Add Related Posts with Thumbnail Widget

Add Related Posts with Thumbnail Widget (hiển thị bài viết liên quan cùng với ảnh Thumbnail) là tiện ích cho phép hiển thị các bài viết liên quan trong mỗi bài viết cùng với ảnh Thumbnail . Các bài viết liên quan được chọn từ cùng 1 danh mục.

Chú ý: trước khi chỉnh sửa trong phần HTML các bạn cần backup trước Template đang dùng để tránh bị lỗi.

Hướng dẫn:

Bước 1:  Truy cập vào quản lý Blogger, click Mẫu rồi click tiếp Chỉnh sửa HTML

Bước 2:  Click chuột vào khoảng trống bất kỳ trong khung soạn thảo HTML ở phía dưới rồi ấn CTRL+F để hiện ra khung tìm kiếm rồi gõ "</head>"

Bước 3: Sao chép và dán đoạn mã ở phía dưới vào phía trên thẻ </head> vừa tìm

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://bloggerviet-biz.googlecode.com/svn/trunk/js/up-related-post-thumbnail.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

- để thay đổi kích thước ảnh Thumbnail, bạn thay đổi giá trị ở dòng code màu đỏ "width:110px;height:100px;"
- để thay đổi kích thước và màu sắc tiêu đề bài viết liên quan, bạn thay đổi giá trị ở dòng code màu xanh "width:110px;"
- để hiển thị bài viết liên quan ở cả trang chủ và mỗi trang con, bạn xóa dòng code màu tím

Bước 4: tìm đoạn code sau (nếu tìm thấy đoạn code này 2 lần, bạn sẽ dừng lại ở đoạn code thứ 2)

<div class='post-footer'>

Bước 5: Dán đoạn mã dưới đây vào phia trên "<div class='post-footer'>"

<!-- 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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://www.bloggerviet.biz/2014/09/add-related-posts-with-thumbnail-widget.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

- để thay đổi số lượng bài viết liên quan, thay đổi giá trị ở dòng code màu đỏ "var maxresults=5;"
- để thay đổi tiêu đề, bạn thay đổi giá trị ở dòng code màu xanh "Related Posts:"
- để hiển thị bài viết liên quan ở cả trang chủ và mỗi trang con, bạn xóa dòng code màu tím

Click "Lưu mẫu" để hoàn thành