Thủ thuật bài viết liên quan có hình ảnh ngang cho Blogger - Related Posts

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. Đây là thủ thuật blogger cực kỳ phổ biến trong cộng đồng Blogger và Wordpress. Chúc bạn thiết kế website của mình thật tuyệt vời và hoàn hảo.

 

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

1- Đăng nhập vào blogger
2- Chọn Thiết kế
3- 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>.

<!--Bài viết liên quan - thủ thuật blogger-->
    <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://thietkewebplus.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
    </b:if>
    <!--Bài viết liên quan - thủ thuật blogger-->

6- Tìm đến đoạn code tương tự sau:

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

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

<!-- Bài viết liên quan - thủ thuật blogger -->
    <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>
    <!-- Bài viết liên quan - thủ thuật blogger -->

• 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ư: "Nội dung liên quan"
• Save (Lưu mẫu) lại và kiểm tra kết quả.

Tweet