Chia sẻ bài viết liên quan 3 cột 6 bài viết tuyệt đẹp cho Blogspot

Theo yêu cầu của một bạn inbox yêu cầu mình chia sẻ tiện ích Bài viết cùng chuyên mục đang có trên Blog mình. Thì bài viết này mình sẽ chia sẻ cho các bạn mẫu bài viết cùng chuyên mục (bài viết liên quan - related post) tuyệt đẹp này. Bố cục 2 hàng, 3 cột, 6 bài viết, có responsive hiển thị tốt trên mobile.

Xem demo ngay tại blog mình luôn nhé, nếu thấy thích thì áp dụng ngay nào!

Các bước thực hiện

Bước 1: Đăng nhập Blogger ➔ Mẫu ➔ Chỉnh sửa HTML.

Bước 2: Chèn đoạn code sau vào trước thẻ </head> trong template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>#related-posts{float:left;width:100%;margin:0 0 10px 0;background:#fff}#related-posts a{margin:0;padding:10px 0 10px 10px;background:#fff}#related-posts a:last-child{padding:10px}#related-posts .related_img{object-fit:cover;width:234.6px;margin:0 1px!important;height:120px;border-radius:0;padding:0}#related-title{color:#666;text-align:center;padding:0;font-size:18px;font-weight:400;line-height:1.3;width:234.6px;transition:all .2s;margin-top:5px;word-wrap:break-word;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#related-posts a:hover #related-title{color:#55579e}#related-posts h5{padding:10px;background:#fff;color:#666;font:400 20px &quot;Roboto&quot;,sans-serif;margin:0;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s}#related-posts:hover h5{background:#55579e;color:#FFF}.related-posts-more{position:absolute;width:235px;height:120px;background:#55579e url(https://4.bp.blogspot.com/-SDiaGMyrAAM/WEF-onfl5fI/AAAAAAAABbc/2DQ3OSgdhL8JFrH5OKU8pFh9-eh6shchQCLcB/s1600/search-icon.png) no-repeat center center;background-size:30%;opacity:0;transition:.5s;transform:scaleX(0)}#related-posts a:hover .related-posts-more{opacity:.5;transform:scaleX(1)}</style>
<script type='text/javascript'>//<![CDATA[
// blogttcn.blogspot.com
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/AVvXsEhHJYvJJvoCa8pXYMAV3_gEOYxMAGRPH500Ul3X2xWNA1sN9dD1s7p6BOiielrk1cMJHq9r6A91etb7Nt5TBnQcexk1RqPtuo73nDQdK5bZSxwvdYzB_Z6AIqebBH8W8B23Md9tZteK3Fhk/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,100)+"";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);elatedTitles.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 style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;float:left');if(i!=0)document.write('"');else document.write('"');document.write(' title="'+relatedTitles[r]+'" href="'+relatedUrls[r]+'"><span class="related-posts-more"></span><img class="related_img" src="'+thumburl[r]+'"/><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>

Bước 3: Chèn đoạn code sau vào nơi bạn muốn hiển thị

<div id='related-posts'>
<h5><i class='fa fa-tags' style='margin:0 5px 0 0'/>BÀI VIẾT CÙNG CHUYÊN MỤC</h5>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;Bài viết cùng chuyên mục:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>

Bước 4: Lưu template.
Trong mẫu related post này mình có dùng Font Awesome, nếu blog bạn chưa có Font Awesome thì hãy thêm đoạn code này vào sau thẻ <head> trong template nhé.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Đây là mẫu related post theo mình đánh giá là đẹp nhất trong các mẫu related post mình từng sử dụng, hãy để lại một comment nếu bạn thích nó nhé!