• ✅ (Đã xác minh)
  • Hiển thị bài viết giống trang news.zing.vn

    (Traidatmui.com) - Mình đã tham khảo thủ thuật từ Blog Fandung thấy thủ thuật khá hay nên mình xin chia sẽ cùng các bạn. Đó là thủ thuật hiẻn thị bài viết giống như trang news.zing.vn. Thủ thuật này sẽ hiển thị dạng 3 cột khác nhau. Cột đầu tiên sẽ hiển thị bài viết mới nhất dạng tóm tắt ở một bên có ảnh thumb ở phía trên; cột kế tiếp hiển thị ảnh thumb và tiêu đề bài viết trước đó và cuối cùng là tiện ích các bài viết khác có liên quan (nằm bên phải). Để hiểu và thấy rỏ hơn thủ thuật này bạn hãy xem hình ảnh bên dưới.

    Hình ảnh minh họa ( news.zing.vn)

    ☼ Sau đây là các bước tiến hành

    1. Đăng nhập vào tài khoản Blogspot
    2. Vào bố cục thêm phần tử HTML/Javascript
    3. Thêm code bên dưới vào phần tử trên
    <style type="text/css">
    *{ padding: 0;
    margin: 0;
    font-family: Arial;
    font-size: 12px;
    }

    #index_news{
    width: 525px;
    margin: 5px;
    }

    #main_content{
    width: 525px;
    float: left;
    overflow: hidden;
    }

    #main_content .top_news{
    width: 525px;
    margin-bottom: 10px;
    }
    #main_content .top1_news{
    width: 234px; /*Độ rộng cột đầu tiên*/
    float: left;
    margin-top: 8px;
    }
    #main_content .top1_news .top1_news_image img{
    border: 1px solid #CCC;
    padding: 1px;
    width:230px; /*độ rộng của ảnh ở cột đầu tiên*/
    height:155px; /*Chiều cao của ảnh ở cột đầu tiên*/
    }
    #main_content .top1_news .top1_news_title{
    padding: 8px 0;
    text-align: justify;
    }
    #main_content .top1_news .top1_news_title a{
    font-size: 16px;
    color: #002392; /*Màu tiêu đề của bài viết có nội dung tóm tắt*/
    text-decoration: none;
    }
    #main_content .top1_news .top1_news_title a:hover{
    text-decoration: underline;
    color: #0066ff; /*Màu tiêu đề của bài viết có nội dung tóm tắt khi rê chuột*/
    }
    #main_content .top1_news p{
    text-align: justify;
    }
    #main_content .top1_news p a{
    padding-left: 4px;
    }
    #main_content .top1_news p img, #main_content .top2_news img{
    vertical-align: bottom;
    }
    #main_content .top2_news{
    width: 95px; /*Độ rộng cột thứ 2*/
    float: left;
    margin-left: 8px;
    margin-top: 12px;
    padding-right: 6px;
    }
    #main_content .top2_news .top2_news_image{
    background: url(http://farm3.static.flickr.com/2509/3847739522_6980c393a3_o.gif) no-repeat;
    width: 90px; /*độ rộng của ảnh ở cột 2*/
    height: 65px; /*chiều cao của ảnh ở cột 2*/
    padding: 4px;
    }
    .top2_news_image img {
    width:90px; /*độ rộng của ảnh ở cột 2*/
    height:65px; /*chiều cao của ảnh ở cột 2*/
    }

    #main_content .top2_news h2{
    padding-top: 2px;
    }
    #main_content .top2_news h2 a{
    color: #000033;
    text-decoration: none;
    }
    #main_content .top2_news h2 a:hover{
    text-decoration: underline;
    color: #ff0000;}

    #main_content .top2_news .dot3x1{
    background: url(http://farm4.static.flickr.com/3574/3847739556_d334d7aa61_o.gif) repeat-x center
    center;
    margin: 10px 0;
    height: 1px;
    font-size: 1px;
    }
    #main_content .topo_news{
    width: 174px; /*Độ rộng cột thứ 3*/
    float: right;
    background: url(http://farm4.static.flickr.com/3508/3846949497_b0f76c94df_o.gif) no-repeat;
    padding: 5px 1px 0 1px;

    }
    #main_content .topo_news .topo_news_title{
    background: url(http://farm3.static.flickr.com/2598/3846949449_4c4b03d2fa_o.gif) no-repeat;
    width: 160px;
    height: 22px;
    color: #FFF;
    padding: 4px 0 0 14px;
    font-weight: bold;
    font-size: 11px;
    }
    #main_content .topo_news ul li{
    background: url(http://farm3.static.flickr.com/2532/3847739582_8f41366c2f_o.gif) no-repeat 8px 10px;
    padding: 2px 2px 2px 20px;
    list-style: none;
    }
    #main_content .topo_news ul li a{
    color: #002392;
    font-weight: bold;
    font-size: 11px;
    line-height: 1.5em;
    text-decoration:none;
    }
    #main_content .topo_news ul li a:hover {
    color: #ff0033;
    text-decoration: underline;}
    </style>

    <script language="JavaScript">
    imgr = new Array();
    imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
    imgnew = "http://farm4.static.flickr.com/3438/3847739416_077831a5c5_o.gif";

    showRandomImg = true;

    aBold = false;
    summaryPost = 147; // Số kí tự hiển thị cho phần tóm tắt bài viết
    numposts = 10; // số bài viết sẽ hiển thị (Gồm tất cả bài viết ở 3 cột)
    topoTitle = "Bài viết khác";
    label = "Advanced blogger"; // Nhãn bài viết hiển thị (nếu hiển thị tất cả bài viết thì không cần gõ nhãn)
    home_page = "http://www.traidatmui.com/"; //thay đổi thành địa chỉ URL blog của bạn

    </script>
    <script src="http://traidatmui-tips.googlecode.com/files/Z_recent_label.js" type="text/javascript"></script>

    Chỉnh code: Bạn hãy dựa vào phần chú thích trong code để chỉnh sửa lại cho phù hợp với blog mình rồi save lại.

    Nếu muốn hiển thị tất cả bài viết trên blog tức không theo từng nhãn riêng, nghĩa là các bài viết sẽ hiển thị theo thứ tự thời gian không phân biệt nhãn, hiển thị từ bài mới nhất trở về sau cho đến khi đủ bài viết mà bạn giới hạn trong code. Để hiển thị như vừa nêu trên thì bạn hãy thay link Javascript (http://traidatmui-tips.googlecode.com/files/Z_recent_label.js) ở trên thành code bên dưới.
    http://traidatmui-tips.googlecode.com/files/Z_recent_post.js

    Chúc bạn thành công
    Nguồn Traidatmui.com

    Đăng nhận xét

    Cùng chuyên mục

    Service & High Quality Anh Trai Nang Blogger

    Powered by BFGMedia

    Chuyên dịch vụ dành cho blogspot
    và mạng xã hội

    Facebok Service

    Tăng like, tăng theo dõi Fanpage và Facebook cá nhân

    Blogspot Service

    Thiết kế, tặng template blogspot, miễn phí hosting vĩnh viễn

    Truyền Thông

    Hợp tác nội dung truyền thông, phát triển tin tức mạng

    Unlock Domain

    Nhận mở chặn link chia sẻ trên Facebook giá rẻ

    Unlimited Colors

    Customize the Skin of the template with Unlimited Color Options

    Google Analytics

    Place your Tracing Code like Google Analytics Only in few options

    Social Sharing

    100% Compatible with 200+ Social Sharing Websites

    Fully Responsive

    Full Compatibility with all Devices like Mobile, Tablet and Desktop

    No Coding Required

    Customize your Website with No Coding Knowledge Required