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

Trang chủ » Related Posts » Bạn đang xem:

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

Thứ Hai, 13 tháng 12, 2010

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>.

<b:if cond='data:blog.pageType == "item"'>
<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>

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.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=8"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>

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;.
Copy bài viết: