Chèn Related Posts Widget vào blogger với ảnh Thumbnails

Dưới đây là cách hiển thị bài viết liên quan khá bắt mắt dưới mỗi bài viết trong blog của bạn với một ảnh nhỏ . Các bài viết liên quan được lựa chọn từ các bài viết khác trong cùng thể loại / nhãn / thẻ.










Các bước chèn Related Posts Widget vào Blogger/Blogspot.

Bước 1: Vào Bảng điều khiển Blogger (Blogger Dashboard) >> Mẫu >> Chỉnh sửa HTML.

Bước 2: Tìm (Ctrl + F) đoạn code sau:

</head>

Bước 3: Copy và paste đoạn code sau vào trước </head>:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIwpN11XEaMB1nEwewA4LVB2pv_aKj5lMgjFqhUMpP73r0Q6rNc7vvKlxKPI4ds6z-wbSmy3VBiS-igxKTivM-wMrZ3pII9VPbQKU15ZVW8HUiNlg5ISTfqop_OtL6R-3HOiU3nxgtZY-6/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Chỉnh sửa theo ý bạn:
   - Thay đổi ảnh mặc định: Thay đoạn link ảnh màu xanh bằng link ảnh của bạn.
   - Thay đổi số bài hiển thị: Thay giá trị ở đoạn code màu đỏ (mặc định là 5) bằng giá trị bạn muốn.
   - Xóa đoạn code màu tím nếu bạn muốn hiện thì ở cả trang chủ.

Bước 5: Tìm đoạn code sau:

<div class='post-footer'>

Bước 6: Copy và paste đoạn code bên dưới vào phía trên đoạn code ở bước 5:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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=6&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'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

Các giá trị cài đặt:
   - Thay giá trị ở đoạn code màu đỏ (mặc định là 6) bằng giá trị mà bạn muốn tìm kiếm (giá trị này là số bài viết liên quan tìm được nếu đặt lớn hơn giá trị ở bước 4 thì sẽ không hiển thị hết và đặt nhỏ hơn thì sẽ không hiển thị đủ - nên đặt lớn hơn).
   - Nếu bạn muốn hiển thị widget này ở trang chủ thì xóa đoạn code màu tím.

Bước 7: Lưu mẫu.

Các file cần thiết (Đề phòng trường hợp link trong code die):

no_image.jpg
related-posts-with-big-thumbnails.js

<Click chuột trái ảnh bên để tải file hoặc click chuột phải chọn  Sao chép địa chỉ liên kết (Copy Link Location) để lấy link>



Chúc các bạn thành công.