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 == "item"'>Bước 3: Chèn đoạn code sau vào nơi bạn muốn hiển thị
<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 "Roboto",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/AVvXsEhyPV9Pmzjbf2kUCn7VGJR7YvBhcI_ZrvhWnPxFOxIyc7QGXvNwhRDHPacULTMU36I0Fu8srBRRU56ZgYZ0Tgw02u24X3mZdZs6ybR6xlstGPS1zvGl6RKRNzwI8Otu1pQpb-PYIlNmyVY9/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>
<div id='related-posts'>Bước 4: Lưu template.
<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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="Bài viết cùng chuyên mục:";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>
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é!