Bài viết liên quan có ngày đăng và số nhận xét

Mấy ngày qua có một số bạn hỏi qua khung bài viết liên quan và theo dõi qua email ở cuối mỗi bài đăng của mình. Thực chất thì theo dõi qua email là tùy biến lại giao diện của bài này Widget Theo Dõi Qua Email Flat UI Cho Blogger. Còn lại bài viết liên quan hôm nay mình xin chia sẻ nó tại bài viết này. Script bài viết này KHÔNG phải do mình viết ra, mà do tác giả Duy Phạm làm, do có người hỏi nên mạn phép đem về đây chia sẻ với mọi người.

Bài viết liên quan có ngày đăng và số nhận xét

Đăng nhập vào Blogger » Mẫu » Chỉnh sửa HTML

Tìm đến thẻ ]]></b:skin> và thêm đoạn CSS này lên trên

#related-posts{float:left}
#related-posts ul{margin:0;padding:0;list-style-type:none}
#related-posts ul li{padding:10px 0}
#related-posts ul li:hover img{width:42px;height:42px;padding:0}
#related-posts img{float:left;border:1px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px}
#related-posts h3{margin:0;font-size:16px}

Tạo hàm includable để dễ chỉnh sửa hoặc xóa nó đi nếu cần

<b:includable id='relatedPosts' var='post'>
<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 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/AVvXsEiRg5HrrKZlh9ee3iYLS_HoLAuSUbVgZuYnJs9hSZ3j2_bT8khjd0HG899X7NIte8z58x69gI5s_bpugb3WRYIb9EcW7I_mAUlQ0Y7fNBrXF1F5dxHajndYoMQbo9j7Z7ibL-v1lMk59YPD/'};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){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);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(y!=-1){urls[c]=urls[c]+'?m=0'}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='&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>
</b:if>

cuối cùng chèn nó vào vị trí mà bạn muốn v.d.

Ngay sau bài viết

Tìm đến thẻ

<div class='post-footer'>

thêm đoạn mã nhỏ này vào sau đó

<b:include name='relatedPosts' data='post'>

Ra ngoài khung bài viết giống website của mình

Từ thẻ

<div class='post-footer'>

các bạn kéo xuống tìm đến thẻ </b:includable> gần nhất
và thêm đoạn mã này xuống lên trên

<b:include name='relatedPosts' data='post'>

Sau khi hoàn thành lưu lại template và tận hưởng.

Lời kết

Đây là một trong những script mình ưng ý nhất trong việc lấy bài viết liên quan, còn về phần giao diện mình không thể chia sẻ giao diện y chang của mình được vì mình muốn website của mình có cái riêng với mọi người, nên mình sẻ chỉ hướng dẫn các bạn cách thức để làm ra nó. Nếu có thắc mắc bạn có thể để lại ở khung bình luận phía dưới. Bạn cũng có thể xem qua bài viết gốc của Duy Phạm.