Tiện ích Bài viết liên quan có ảnh đại diện

Ngoài tiện ích Bài viết liên quan có ảnh đại diện của Linkwithin, còn có tiện ích tương tự hiển thị các liên kết đến các bài viết liên quan kèm ảnh đại diện cho một bài viết thuộc một nhãn nào đó. Tiện ích này giúp cho người đọc dễ dàng tìm đến bài viết theo chủ đề và cũng giúp cho blog của bạn đẹp hơn. :19)

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code dưới đây vào trước thẻ </head>.

<!--Related Posts with Thumbnails Scripts and Styles Start-->
<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: blue;
font-family: Arial, Times New Roman, 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 type='text/javascript'>
var defaultnoimage="http://bit.ly/hGWr7r";

var maxresults=5;

var splittercolor="#d4eaf2";
var relatedpoststitle="Bài viết liên quan";
</script>
<script src='http://hacodeproject.googlecode.com/files/relaposts-thumbnails.js' type='text/javascript'/>
</b:if>
<!--Related Posts with Thumbnails Scripts and Styles End-->

Bước 2. Tìm dòng <div class='post-footer-line post-footer-line-3'> và đặt đoạn trước nó với đoạn code dưới đây.

<!-- Related Posts with Thumbnails Code Start-->
<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>
<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=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Bạn có thể điều chỉnh số bài viết tối đa được hiển thị bằng cách thay con số trong dòng code var maxresults=5;.