[Blogspot] - Widget bài viết liên quan theo chiều ngang cho blogspot

 Widget hiện bài viết liên quan theo chiều ngang cho blogspot. Thủ thuật hiện bài viết liên quan theo chiều ngang cho blogspot. Cách làm hiện bài viết liên quan theo chiều ngang cho blogspot.

 Widget hiện bài viết liên quan cho blogspot

Sau đây là các bước để thực hiện:
1. Thêm đoạn mã CSS dưới đây vào phía TRÊN ]]></b:skin>:

#related-posts{float:left}#related-posts ul{margin:5px 0;width:524px;padding:0;list-style-type:none}#related-posts ul li{position:relative;float:left;border:0 none;margin-right:11px;width:76px}#related-posts ul li:hover{z-index:98}#related-posts ul li:hover img{border:3px solid #BBB}#related-posts ul li:hover div{position:absolute;top:40px;left:10px;margin-left:0;width:200px}#related-posts ul li img{border:3px solid #DDD;width:70px;height:70px;background:#FFF}#related-posts ul li div{position:absolute;z-index:99;margin-left:-999em}#related-posts ul li .title{border:1px solid #CCC;background:#FFF;padding:5px 10px}

2. Thêm đoạn mã dưới đây vào ngay SAU <div class='post-footer'>:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='clear:both'/><div id='related-posts'><script type='text/javascript'>var ry='<h2>Bài viết liên quan</h2>';rn='<h2>Không có Bài viết liên quan</h2>';rcomment='Nhận xét';rdisable='Tắt Nhận xét';commentYN='yes';</script><script type='text/javascript'>//<![CDATA[var nothumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihm74ZN7CcrZuk6i0CKpSsnlgag-vmgjtQV6TDdS14UqQkWe5Crg4J7JYHuNZxethKkju-qhr8KYqIEb2vjfZ6f_QCzcJ2oXwLV_POmszhG_ULxJVa6dj7oWXHLsGlb3mH-BgtFKue71YU/';dw='';titles=new Array();titlesNum=0;urls=new Array();time=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;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};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]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=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){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.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(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';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='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/></b:loop><script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script></div><div style='clear:both'/></b:if>

Cuối cùng, bấm Lưu mẫu để hoàn thành.

Vài lưu ý:
- Giá trị số 6 trong code trên là số bài viết liên quan tối đa được hiển thị. Các bạn có thể thay đổi thành giá trị khác.
- Nếu bạn không muốn hiển thị ngày đăng với số nhận xét kèm theo thì tìm và xóa:

<span>'+timeR[c].substring(8,10)+'/'+timeR[c].substring(5,7)+'/'+timeR[c].substring(0,4)+comments[c]+'</span>

Chúc các bạn thành công!