Tạo bài viết liên quan kèm thumbnail cho Blogger

 

Hiển thị link các bài viết liên quan kèm theo ảnh mô tả ở ngay dưới bài đăng sẽ giúp gia tăng page views của blog bạn. Người đọc sẽ dễ dàng tiếp cận với các bài viết cùng chủ đề, hay nói cách khác, tiện ích này sẽ khiến blog của bạn trông pro hơn. 

Sau đây là các bước cài đặt : 

1. Đăng nhập vào Blogger , vào Bố cục -> chỉnh sửa HTML, click chọn mục Mở rộng mẫu tiện ích. 

2. Tìm dòng </head> rồi chèn đoạn code sau vào ngay phía trên nó : 

<!--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: 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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End--> 

3. Tiếp tục tìm đến dòng :

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

hoặc (tùy vào mỗi template)

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

Ngay sau dòng trên ta chèn tiếp đoạn code nà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>
<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>
<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>
<!-- Related Posts with Thumbnails Code End--> 

4. Bạn có thể điều chỉnh số bài liên quan bằng cách sửa lại giá trị :

var maxresults=5; 

Để thay đổi màu chữ thì bạn sửa lại phần code CSS.

Save lại và kiểm tra kết quả. Bạn có thể xem demo tại đây. Chúc thành công.

Xem bài viết trên phiên bản di động