Cách Thêm Bài Viết Liên Quan Cho Blogspot với Giao Diện Đẹp và Hình Ảnh Hiển Thị

Tiện ích Bài viết liên quan cho Blogspot là một trong những tiện ích rất hữu ích. Nó giúp người đọc có thể xem thêm nhiều bài viết trên blog của bạn hơn, từ đó giúp blog thân thiện và tăng trải nghiệm người dùng.  

Trong bài viết này, chúng ta sẽ khám phá cách thêm bài viết liên quan vào Blogspot một cách dễ dàng và hiệu quả. Tận dụng sức mạnh của những công cụ này sẽ giúp bạn xây dựng một trải nghiệm đọc blog đặc sắc, cũng như tối ưu hóa hiệu suất của blog trên các công cụ tìm kiếm. Hãy cùng nhau khám phá và ứng dụng những kỹ thuật này để nâng cao chất lượng và hiệu suất của blog của bạn!

Tiện ích bài viết liên quan cho blogspot là gì?

Tiện ích bài viết liên quan (Related Posts ) là một công cụ được tích hợp vào nền tảng Blogspot giúp hiển thị các bài viết có liên quan hoặc tương tự khi độc giả đang xem một bài viết cụ thể. Chức năng chính của tiện ích này là tạo ra một danh sách các bài viết khác trên blog của bạn mà độc giả có thể quan tâm dựa trên nội dung của bài viết hiện tại.

Việc thêm tiện ích bài viết liên quan mang lại nhiều lợi ích, bao gồm:

• Tăng Tương Tác: Giúp độc giả khám phá thêm nội dung quan trọng và liên quan trên blog của bạn, tăng thời gian duyệt và tương tác.
• Optimize SEO: Các công cụ tìm kiếm đánh giá tích cực việc hiển thị nội dung liên quan, có thể cải thiện vị thế của bạn trong kết quả tìm kiếm.
• Giữ Chân Độc Giả: Hỗ trợ trong việc giữ chân độc giả bằng cách cung cấp nội dung mà họ có thể quan tâm sau khi đọc xong bài viết hiện tại.
• Tạo Trải Nghiệm Người Dùng Tốt Hơn: Cung cấp một trải nghiệm người dùng linh hoạt, giúp họ dễ dàng khám phá thêm thông tin mà họ quan tâm.

Để dễ hình dung, bạn hãy xem DEMO tại bài viết này để biết chính xác sau khi thêm bài viết liên quan. Hãy kéo xuống cuối bài viết để thấy: 

>> DEMO: Cách tạo dáng chụp ảnh đẹp khi mặc váy đi biển

Hướng dẫn thêm Bài viết liên quan cho Blogspot

Dưới đây là hướng dẫn thêm Bài viết liên quan cho Blogspot hoạt động 100% mà mình đã test trên rất nhiều template blogspot khác nhau. Phương pháp này được viết bởi Blogger NTLRUBY, nay xin phép được chia sẻ lại cho bạn nào cần nhé. 

Lưu ý: Bạn nào không rành về code, hãy SAO LƯU lại template trước khi chỉnh sửa. 

Bước 1: Thêm CSS

Các bạn vào trang quản trị Blogger -> Chủ Đề -> Chỉnh sửa HTML. sau đó copy và dán phần CSS bên dưới vào trước thẻ ]]></b:skin> hoặc thay vào CSS bài viết liên quan có sẵn của Template.

/*------------------------------------------*/
/*Bài viết liên quan ntlruby.com*/
/*-----------------------------------------*/
#related-posts .judul{margin:10px 0;font-size:20px;font-weight:500;padding:0;color:#333}
#related-posts .related_item{margin:0 10px 10px 0;display:block;float:left;width:calc(33.333333% - 10px);height:auto;}
#related-posts .related_items,#related-posts .related_item:nth-of-type(4n+0),#related-posts .related_item .clear{clear:both;}
#related-posts .related_items{margin-right:-10px;}
#related-posts .url_item{display:block;text-decoration:none;}
#related-posts .img_item {display:block;margin-bottom:5px;padding:0;width:100%;height:auto;transition:all 400ms ease-in-out;}
#related-posts .related_item:hover .img_item{opacity:.7;}
#related-posts .title_item{display:block;padding-right:10px;text-align:left;margin:0;color:#000;font-weight:400;line-height:1.1;transition:all 400ms ease-in-out;}
#related-posts .related_item:hover .title_item{color:#555;}
@media screen and (max-width:425px){
#related-posts .related_item{width:calc(50% - 10px);}
#related-posts .related_item:nth-of-type(4n+0){clear:none;}
#related-posts .related_item:nth-child(odd){clear:both;}
}
@media screen and (max-width:375px){
#related-posts .related_item{width:100%;}
#related-posts .related_items{margin-right:0;}
#related-posts .related_item:nth-child(odd){clear:none;}
}

Bước 2: Đặt bài viết liên quan

Tiếp theo, các bạn copy và dán đoan code bên dưới vào vị trí muốn bài viết liên quan hiển thị, hoặc thay vào code bài viết liên quan có sẵn.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<script>

//<![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.replace(/.*?:\/\//g, "//")}else thumburl[relatedTitlesNum]='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC'}if(relatedTitles[relatedTitlesNum].length>300)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,300)+"";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('<div class="judul">'+relatedpoststitle+'</div>');document.write('<div class="related_items"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<div class="related_item"><a class="url_item');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'" title="'+relatedTitles[r]+'"><img class="img_item" alt="'+relatedTitles[r]+'" width="16" src="'+thumburl[r]+'" title="'+relatedTitles[r]+'" height="9" loading="lazy"/><div class="clear"></div><div class="title_item">'+relatedTitles[r]+'</div></a></div>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('<div class="clear"></div></div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}

//]]>

</script>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>

<script>
var RelatedLabel = &quot;<data:label.name/>&quot;;
RelatedLabel = encodeURIComponent(RelatedLabel.trim());
(function(){var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, &#39;/feeds/posts/default/-/&#39; + RelatedLabel + &#39;?alt=json-in-script&amp;orderby=updated&amp;callback=related_results_labels_thumbs&amp;max-results=8&#39;);document.write(script.outerHTML)})();
</script>
</b:loop>
<script>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;Bài viết liên quan:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div></b:if>

Vậy là xong rồi. Lưu template lại và kiểm tra thành quả nhé. 

>> Xem thêm các hướng dẫn hữu ích khác tại chyên mục: HƯỚNG DẪN BLOGSPOT TỪ AZ

(Nguồn bài viết: Bài viết được chia sẻ lại từ nguồn NTLRUBY.com)