CHIA SẺ BÀI VIẾT LIÊN QUAN 3 CỘT ĐẸP CHO BLOGSPOT

Hôm nay mình sang tham khảo Bác Sĩ Windows thì thấy có bài viết này khá hay và hữu ích,chính vì vậy hôm nay mình sẽ chia sẻ tiện ích Bài Viết liên quan đẹp cho blog mà Bác Sĩ Windows đã chia sẻ.



Xem demo tại Bác Sĩ Windows nhé

CÁC BƯỚC THỰC HIỆN
1.Đăng nhập vào blogger -> mẫu -> chỉnh sửa HTML
2.Đặt code sau trước thẻ </head>
<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/AVvXsEiMO5oy-ELXiZ4OhpxG_odw5P86RIbb3MXKZuLGnH3p-gV0TndP_nGg5FmUWTrSKx4OkJIVK4IjUgxhQN8cAMlubp66Cr13hiKfAZf1WUDOY7N7QzcvWugZEfv0bZhdLG4pZvjZqNK26pin/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>

3.Chèn code sau vào nơi 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'/>

4.Lưu template lại

 Nếu blog của bạn chưa có Font Awesome thì thêm code sau trước thẻ </head> 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é!