Hưỡng dẫn thêm tiện ích Bài viết liên quan cho Blogspot

Quay lại vấn đề trọng tâm. Tại sao chúng ta cần tạo tự động các bài viết liên quan? Điều này nói cho cùng là cần thiết cho các trang web có số lượng bài viết lớn. Bởi vì khi đó, một bài viết thường liên quan đến vài bài khác, và mỗi lần viết bài mới bạn phải mất rất nhiều công sức cập nhật mối liên kết qua lại giữa chúng với nhau.

Tuy nhiên ở khía cạnh khác, tạo các mối nối bằng tay giữa các bài tạo ra sự liên kết mạnh mẽ hơn, vì bạn biết rõ nhất với bài viết A thì bài viết C là liên quan nhất chứ không phải bài B, trong khi đó hệ thống tự động có thể đưa ra bài B cho độc giả.

Do vậy để cân bằng bạn nên kết hợp cả hai, vẫn có những liên kết bằng tay ngay trong bài và một hệ thống auto các bài liên quan ở cuối.

Và bây giờ sẽ là đoạn code để làm điều đó. Nếu bạn có kinh nghiệm với Blogspot thì mới nên làm nhé, mới dùng mà chiến cái này luôn là hơi bị nhức đầu đấy! Backup lại Template của bạn phòng khi lỗi nhé.

Vào mẫu chọn chỉnh sửa HTML

Tìm thẻ đóng </head> 

Và paste đoạn code dưới đây vào trước thẻ </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;

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;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

margin-right:5px;

color:black;

background-color:#CCC;

text-align:center;

}

#related-posts a:hover{

background-color:#2AA4CF;

color:#FFF;

}

</style>

<script type='text/javascript'>

var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipCanu-BMgfpy2frkUbdVSWJAcjTZMX-6MJClWliu7FWmStL4Wxy5NuDtJKMjRoQ5CNTl0lah-1c1nnA1S6UYKBN0cJ5nun466pL_sQvYZNOz5SBFiZd0JlxXUD4Vk5Gr1FM2fSVbL9w/s1600/no-image.jpg&quot;;

var maxresults=5;

var splittercolor=&quot;#DDDDDD&quot;;

var relatedpoststitle=&quot;Bài Viết Liên Quan&quot;;

</script>

<script src='https://googledrive.com/host/0BxKUKf8tfKupSnQ0Znd2Tm5xT1E' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

Nếu muốn thay đổi số lượng bài viết liên quan thì điều chỉnh giá trị: var maxresults=5;thường để 3 cho đến 5.

Tìm đến dòng <div class='post-footer'>

Rồi paste đoạn code dưới đây vào sau dòng đó:

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

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

Cuối cùng nhấn Save để lưu tempalte. Chú ý là nhiều template thì bạn phải paste vào sau: <div class='post-footer-line post-footer-line-1'> chứ không phải <div class='post-footer'> thì nó mới hiện bài viết liên quan. Bạn cứ thử lần lượt, cái nào OK thì dùng.

Bài viết lấy code mẫu từ trang: http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html

Nếu quá chán với code, bạn có thể dùng http://www.linkwithin.com/ nó cũng tạo bài viết liên quan rất đẹp mắt thông qua chỉ vài click thôi chứ không nhức đầu như trên đâu, yếu điểm là trang web chậm đi đôi chút.