Tạo bài viết liên quan cho blogspot có ảnh đại diện.

Fairstar | 22-05-2011 | nhận xét (5)

Thủ thuật hiển thị bài viết liên quan kèm ảnh Thumbnails ở đây thể hiện một cách chuyên nghiệp hơn. Bài viết này được lấy từ 1 số nguồn trên internet trong khi lang  thang . 
Dưới đây là hình minh họa, bạn cũng có thể xem ngay trong Blog của mình ngay cuối mỗi bài viết 

Cách tiến hành:

1. Đăng nhập vào blog 
2. Chọn Thiết kế
3. Chọn Chỉnh sửa HTML
4. Chọn mở rộng tiện ích mẫu
5. Dán đoạn code bên dưới vào trước thẻ  </head> .

(Tìm thẻ </head> bằng cách copy (Ctrl +C) thẻ </head> bấm phím Ctrl + F Sau đó Bấm Ctrl +V thì thẻ </head> trong ô HTML xẽ được tô đậm tìm kiếm các thẻ khác ở bên dưới làm tương tự)

<!--Related Posts with thumbnails-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type="text/css">
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }
    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }
    #related-posts  a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script src='http://dl.dropbox.com/u/66256041/lien-quan/namkna-blogspot/relatedthumbs21.js' type='text/javascript'/>
    </b:if>
    <!--Related Posts with thumbnails-->

- Bạn nên Downloaf file Js bên trên về sau đó upload lên host riêng để sử dụng lâu dai. nếu chưa có host thì bạn tham khảo bài viết đó Tại đây. 
     6. Tiếp theo:  Tìm đến đoạn code tương tự sau:

 <div class='post-footer-line post-footer-line-1'>

Thêm vào sau nó đoạn code dưới :

 <!-- Start Related Posts with Thumbnails-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + 
data:label.name + 
&quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;'
 type='text/javascript'/></b:if></b:loop><a 
href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'
 style='display:none;'>Related Posts with thumbnails for 
blogger</a><a href='http://www.bloggerplugins.org/' 
style='display:none;'>blogger tutorials</a>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=5;
    var relatedpoststitle="Related Posts";
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </div><div style='clear:both'/>
    </b:if>
    <!-- End Related Posts with Thumbnails-->

Trong đó:

• var maxresults=5; số 5 là giá trị max số bài viết hiển thị
• var relatedpoststitle="Related Posts"; Bạn có thể thay thế chữ Related Posts thành chữ bạn muốn như: "Bạn cũng có thể xem thêm"
• Save (Lưu mẫu) lại ---> kiểm tra kết quả thế nào nhé !

Mẫu này hiển thị không tốt với nhãn tiếng việt, nếu muốn sử dụng các nhãn tiếng việt bạn có thể tham khảo bài viết khác Tại đây.