TIỆN ÍCH BÀI VIẾT LIÊN QUAN CHO BLOGSPOT

Blogspot có nhiều ưu điểm, ví dụ như giao diện viết bài đơn giản, thân thiện, hosting thoái mái, chịu tải lớn giúp chủ trang không lo lắng khi lượng người dùng tăng đột biến. Nhưng yếu điểm của Blogspot là nó không có nhiều widget hỗ trợ giống như các CMS khác.

Thực tế Blogspot chỉ có khoảng 20 tiện ích mà người dùng cảm thấy thực sự có ích:

Còn lại phần đa đều phải tự tìm trên mạng, chẳng hạn tiện ích bình luận gần đây hay bài viết mới nhất đều phải tự tìm. Và lần này cũng vậy, tiện ích bài viết liên quan – điều rất quan trọng để giữ chân độc giả lâu hơn cũng không được Blogspot cho vào kho tiện ích mặc định.

Một điều chắc chắn không phải Google không làm được, nhưng lý do gì mà họ không bổ sung các widget cơ bản đó vào thì tôi vẫn chưa rõ.

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>

copy đoạn sau và dán trước thẻ </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{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;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ7uJ5uwjfs_oqGZ-mMMlOVEBIJ6S_huAdPlD6WMpi726LTHACjEfLGncT_yMi8lxvfzS2iUA6dBc8_5ZdowJdOpi_0HO4WLqG8irs4gb0bfsO5t-BoEYjOtqmwPsWtQ4_wLI3hWjWkTzD/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>

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 dán đoạn code sau vào trên dòng <div class = 'post-footer'>

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
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://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>