Tạo tiện ích những bài viết liên quan cùng chủ đề cho Blog

Sẽ rất tiện lợi cho đọc giả khi phía cuối bài viết có thêm 1 tiện ích những bài viết liên quan cùng chủ đề... Đọc hướng dẫn về vấn đề này ở khá nhiều nơi cuối cùng thì mình cũng nắm bắt được cách để tạo được tiện ích này.

Khuyến cáo bạn nên backup lại template trước khi thực hiện bất kỳ thủ thuật nào. Đề phòng rủi ro.

Và sau đây là các bước thực hiện:

Đầu tiên bạn vào mục Thiết kế --- chỉnh sửa HTML --- chọn mở rộng mẫu tiện ích.

Bạn chèn đoạn code sau vào trước thẻ </head>

<style type='text/css'>
#related-posts{float:left;text-transform:none;height:100%;min-height:100%;padding-top:5px;}
#related-posts .widget{margin-bottom:10px}
#related-posts .widget h2,#related-posts h2{height:25px;color:red;font-size:15px;font-weight:bold;font-family:Georgia;margin:0px 4px 0;margin-top:4px;padding:0 0 5px}}
#related-posts a{color:blue}
#related-posts a:hover{color:blue}
#related-posts ul{list-style-type:none;margin:0 0 0px 0;padding:0px;text-decoration:bold;font-size:13px;text-color:#000}
#related-posts ul li{display:block; list-style-type:none;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:21px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #ccc}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;BÀI VIẾT CÙNG CHỦ ĐỀ&quot;;
</script>
<script src='http://voquocan.googlecode.com/files/relatedposts.js' type='text/javascript'/>

 Tìm đoạn code <div class='post-footer-line post-footer-line-3'> và chèn vào bên dưới nó đoạn code sau:

<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&amp;max-results=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Chú ý:

var maxresults=5; là số bài hiển thị trong tiện ích

color:red; là màu của dòng chữ bài viết cùng chủ đề.

BÀI VIẾT CÙNG CHỦ ĐỀ có thể thay dòng chữ này bằng một dòng chữ khác tùy thích.

Bạn thay đổi như thế nào cho phù hợp với blog của mình là ổn rồi. Chúc bạn thành công.

Nguồn bài viết: Thuthuatblogger