Dùng từ khóa post-footer-line-3 tìm đoạn code <div class='post-footer-line post-footer-line-3'/>
Chèn bên dưới nó đoạn code sau:
<b:if cond='data:blog.pageType == "item"'>2. Tùy biến tiện ích này:
<style type='text/css'>
#related-posts {margin: 10px 0; padding:10px; color: #888; text-align:left; font-size:14px}
#related-posts ul{margin:0;padding:0;list-style-type:none}
#related-posts ul li{padding:10px 0}
#related-posts img{border-radius: 5px 0; float:left; margin-right:10px; width:60px; height:60px; padding:3px; box-shadow:0 0 3px 1px #666;}
#related-posts h4{margin:0; font-size:20px; text-align:center; color:#333; border-bottom: 2px solid #ff4500;}
</style>
<div style='clear:both'/>
<div id='related-posts'>
<script type='text/javascript'>var ry='<h4>Bài viết cùng chủ đề</h4>';rn='<h4>Không có bài viết cùng chủ đề</h4>';rcomment='Nhận xét';rdisable='Tắt Nhận xét';commentYN='yes';</script>
<script type='text/javascript'>
//<![CDATA[
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=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('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2458l7sql6Iy0VDftyi5A1YLT9SaC6FyuAM5hm4vtSgSTNkMu9MPDHQkZoA0ckThubZlyqOmxFtEfYo2tIaLVXdYMFr4c2cK7MosbNvioo1j1M8mW-RbtTHoTzyXc_zV21LY3v_sjoU79/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=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]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><img alt="'+titles[c]+'" src="'+thumb[c]+'"/><div><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+timeR[c].substring(8,10)+'/'+timeR[c].substring(5,7)+'/'+timeR[c].substring(0,4)+comments[c]+'</span></div></li><div style="clear:both"></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<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"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates();
printRelatedLabels('<data:post.url/>');</script>
</div>
<div style='clear:both'/>
</b:if>
Trong đoạn code trên có 1 đoạn màu đỏ
là css mình đã chọn sẵn. Nếu không thích giao diện này bạn có thể thay
đổi lại cho phù hợp với website của mình. Nếu chưa biết về css thì bạn
xem qua bài viết tự học css toàn tập để trang trí blog của mình được như ý nha.
Đồng thời trong đoạn code trên có 1 số vị trí mình đánh dấu màu đỏ bạn thay đổi lại cho phù hợp.
Riêng giá trị maxresults=5: là số bài viết hiển thị trong tiện ích này. Thay đổi giá trị này theo ý bạn nha.
Nếu có vấn đề gì thì để lại comment bên dưới, mình sẽ hồi âm trong thời gian sớm nhất có thể. Chúc bạn thành công.
Nguồn: http://thuthuat.voquocan.com