Code tạo Bài viết liên quan cho Blogspot gọn nhẹ là một việc khá quan trọng để tối ưu SEO cho Blogspot. Tất cả các bạn làm SEO đều hiểu rõ vì sao cần phải thêm bài viết liên quan cho website blog rồi đúng không nào.

Dưới đây mình sẽ tổng hợp các cách tạo bài viết liên quan cho Blog (Related posts blogger) để các bạn lựa chọn cho phù hợp với Blog của các bạn.

Cách làm thì có rất nhiều cách nhưng mình khuyên các bạn chỉ nên lựa chọn cách nào đơn giản gọn nhẹ thôi, màu mè quá sẽ làm blog của các bạn load chậm, thậm chí còn bị xung đột với các dòng code khác dẫn đến blog của bạn không chạy. Giống như blogspot của mình, mình đã chọn cách 1 đơn giản, gọn nhẹ mà nhìn vẫn rất chuyên nghiệp.

Các bạn lưu ý: Dù cách hướng dẫn thêm bài viết liên quan nào đi nữa thì code đều có 3 đoạn
- Đoạn 1: Code Javascript
- Đoạn 2: Code CSS
- Đoạn 3: Code HTML

Các bạn cùng lướt qua các cách dưới đây và chọn đoạn code thêm bài liên quan cho Blogspot của các bạn nhé.

Bước 1: Các bạn thêm đoạn code Javascript dưới đây vào Blog

<b:if cond="data:blog.pageType == &quot;item&quot;">
<script type="text/javascript">
//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("
<li>Không có bài viết liên quan</li>
")}else{while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}document.write('
<li><a href="'+urls[c]+'" title="'+titles[c]+'">'+titles[c]+"</a></li>
");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>
");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]>
</script>
</b:if>

Các bạn hãy vào phần chỉnh sửa HTML và copy đoạn code ở trên dán vào trước thẻ </head>

Bước 2: Copy đoạn code CSS bên dưới dán vào phía trên dòng code </style>

#related-posts h4 {border-bottom:2px solid #83C75D; font-size:18px;}
#related-posts ul {border: medium none;padding: 0;font-size: 16px;}
#related-posts ul li {border-bottom:1px dotted #cccccc;margin-bottom:5px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeoQdqcMLeQRgLFGFqUNebpJ2MiRJ9KulrRQVbon1ot16xolTeN_pJxuchHbd215tS4KSnliNIY5-2cjy3QDgPZcUWn-b7hfIxdQbkzMYxXugSce98vYmXy3ufl7ailnbicgIfllUcLPU/h120/gicovietnam-blogspot-com.png) 0 5px no-repeat;padding-left:15px}

Bước 3: Copy đoạn code HTML bên dưới dán vào phía sau dòng code <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
 <h4>Bài viết liên quan</h4>
<b:loop values='data:post.labels' var='label'>
 <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=10;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
</b:if>

Các bạn thay đổi giá trị maxresults=10 cho phù hợp với blog. maxresults=10 là số lượng bài viết liên quan được hiển thị.

Có thể trong Template của bạn sẽ có nhiều thẻ <data:post .body=""> nên bạn hãy thử từng cái một nhé, thử đến khi nào hiển thị đúng vị trí thì thôi.

DOWNLOAD:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeoQdqcMLeQRgLFGFqUNebpJ2MiRJ9KulrRQVbon1ot16xolTeN_pJxuchHbd215tS4KSnliNIY5-2cjy3QDgPZcUWn-b7hfIxdQbkzMYxXugSce98vYmXy3ufl7ailnbicgIfllUcLPU/h120/gicovietnam-blogspot-com.png
OR
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6-cH65vl2xsTUbjuesqJVZzGrpuFrNPou_o9zDtkmcslDHV8wNv1-aAI9TN7CbdqerTamVebhqWF4QsUW4MsZEQBEVzQsl-jdj7UHdyOsv0xPn88VhdZuI0AIJoFWiRz6nXEHUUyDIiE/s1600/li-li.png
or
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6-cH65vl2xsTUbjuesqJVZzGrpuFrNPou_o9zDtkmcslDHV8wNv1-aAI9TN7CbdqerTamVebhqWF4QsUW4MsZEQBEVzQsl-jdj7UHdyOsv0xPn88VhdZuI0AIJoFWiRz6nXEHUUyDIiE/s1600/li-li.png