Bài viết liên quan được rất nhiều blogger sử dụng cho trang của mình vì nó có tính điều hướng và dẫn dắt người dùng khá tốt. Có thể nói các thủ thuật bài viết liên quan mà mọi người biết đến chủ yếu ở một trong 2 dạng bài viết hoặc hình ảnh. 

Theo yêu cầu của bạn ChoiBlogs Hôm nay namkna sẽ hướng dẫn các bạn cách thêm bài viết liên quan bao gồm cả 2 phần danh sách hình ảnh và danh sách tiêu đề các bài viết ở bên dưới ngoài ra còn tích hợp thêm ngày tháng đăng bài khi chỉ chuột vào bài đăng.

Các bạn có thể xem hình minh họa bên dưới.
Bài viết liên Quan gồm danh sách ảnh và bài viết

» Điều kiện cần và đủ để tiện ích bài viết liên quan hoạt động:

- Thủ thuật này lấy bài từ feed do vậy để thủ thuật hoạt động trước tiên bạn cần phải dăng ký và kích hoạt feed cho blog của bạn.

» Cách thêm tiện ích bài viết liên quan gồm danh sách ảnh và bài viết cho blospot :


1- Đăng nhập vào tài khoản blog muốn thêm thủ thuật này (Nếu bạn đã đăng nhập thì bỏ qua bước này và bắt đầu thực hiện từ bước 2 nha.
2- Các bạn vào truy cập vào tab mẫu (Template)

Cảnh báo: Trước khi bạn bắt đầu áp dụng bất cứ thay đổi mẫu mã blogger của bạn, Chúng tôi khuyến khích bạn để sao lưu nó, bằng cách nhấp vào liên kết Download Template Full Version.

3- Sau khi tải mẫu về lưu dự phòng các bạn tiếp tục bâm chọn Chỉnh sửa HTML (Edit HTML)
4- Dán đoạn Code  bên dưới lên trên thẻ </head>
<!-- Start Related posts -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://namknablog.googlecode.com/files/related-img-by-namkna-nt.js' type='text/javascript'/>
<style type='text/css'>
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding:0;margin:10px 0 5px 0;}
#related-posts h2{margin:0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy0O99hE_eQfdYqWu6kcRuAPkEOPv8pdtvd5MoHL6F6u58N6FglU_JSwM753LlWsdgaXDYTTpOF5efHGMp-HRn69r_FIToDsd_pMPUMlJOVgiwF14JllQhm4SbwnP5LZqnb6aXox3Hxbo/s1600/newslienquan.jpg) no-repeat scroll left 0 transparent;height: 16px;}
#related-posts a:hover {background-color:#d4eaf2} 
.lienquan {background: #ddd;height:57px;float: left;padding-left: 1px;width: 173px;margin:1px;overflow:hidden;line-height:1.4em}
.related-posts {margin: 0;padding: 0}
.related-posts ul {margin: 0;padding-top: 5px} 
.related-posts ul li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjIsj_q05GrseaC0xL7h-gP7S1Fi_dpc_7y4_SBIP6HhBn9lc8KbHAcaVIlXxt759v8_q2dsoBE7K41g-JZxY_mIHnxVfhtZkKlcu9mPEEPCVDx8tgvirbc9PtWWO09vmdWYCMhsbN_0I7/s1600/list.png) no-repeat top left;list-style-type: none;margin: 0 0 2px 5px;padding: 2px 0 0 18px;word-wrap: break-word;/*color:#333*/}
</style>
<script type='text/javascript'>
//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=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(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=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]}}titles=c;urls=b;time=e}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);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài vi?t liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]>
</script>
</b:if>
<!-- End Related posts -->
» Tùy chỉnh CSS và Js
  • height:57px là chiều cao của khung phần chứa danh sách ảnh thu nhỏ thumbnail.
  • width: 173px là chiều rộng của khung phần chứa danh sách ảnh thu nhỏ thumbnail.
  • Để điều chỉnh cỡ chữ trong tiện ích bạn thay thế đoạn bên dưới
    .related-posts {margin: 0;padding: 0}
    thành"
    .related-posts {font-size:14px;margin: 0;padding: 0}
    Trong đó font-size:14px; là cỡ chữ trong tiện ích.
  • Link ảnh màu xanh chính là link ảnh icon trước tiêu đề mỗi bài viết bạn có thể thay thế chúng theo ý thích của bạn (trong code này là 14x22)
  • Bạn có thể thay đổi màu chữ bằng cách thay đổi đoạn /*color:#333*/ thành: color:#333 với #333 là mã màu nha. Bạn có thể tìm thêm một số mã màu khác ở đây.
5- Tìm một trong các đoạn code bên dưới trong mẫu của bạn:
Đoạn 1:
<div class='post-footer-line post-footer-line-2'/>
Đoạn 2:
<div class='post-footer-line post-footer-line-1'/>

- Và dán vào ngay sau 1 trong 2 code trên đoạn code bên đưới:
<!-- Related posts -->
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div id='related-posts'>
<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=9&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=9;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div> 
<div style='margin-bottom:5px;clear:both'/> 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRYBoYNToJ8LuKRskUa30u_n9D03KMJH7krbA81_3knx6pbXM__dnL6-MCjBDsuJOmOHYjM0iLoIiGtyTBtXoYuDdM1sGYBlXDVbUQ5txrH3VX1_Q99pc6p2ABoXHKoSPqYdt2ldAQBNk/s1600/cac-tin-khac-namkna-blogspot-com-ngoctra.jpg'/>
<div class='related-posts'>
<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=12;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div class='clear'/>
</b:if>
<!-- Related posts by namkna.blogspot.com -->
» Tùy chỉnh javascripts:
  • max-results=9; là số bài ở dạng hình ảnh thu nhỏ (thumbnail) Hãy tùy chỉnh lại số lượn cho phù hợp với blog của bạn.
  • Hãy tải fie related-img-by-namkna-nt.js về host riêng để dùng lâu dài nha các bạn.
  • var maxresults=12 là số bài ở dạng list liệt kê tiêu đề của bài viết.
    • Các bạn có thể xem hình ngay dưới sẽ thấy rõ hơn.
    Tùy chỉnh Bài viết liên Quan gồm danh sách ảnh và bài viết

Cuối cùng hãy để lại comment của bạn nếu bạn gặp bất cứ khó khăn gì khi áp dụng thủ thuật này. Namkna sẽ hỗ trợ các bạn.

» Nâng cao:

Cập nhật cho những bạn muốn chỉnh sửa lại kích thước hình ảnh các bạn hãy tải file related-img-by-namkna-nt.js về và mở ra bằng notepad sau đó tìm đoạn code được tô mầu như bên dưới:
var relatedTitles=[],relatedTitlesNum=0,relatedUrls=[],thumburl=[];
function related_results_labels_thumbs(f){for(var e=0;e<f.feed.entry.length;e++){var g=f.feed.entry[e];relatedTitles[relatedTitlesNum]=g.title.$t;try{thumburl[relatedTitlesNum]=g.media$thumbnail.url}catch(h){s=g.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),thumburl[relatedTitlesNum]=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"undefined"!==typeof defaultnoimage?defaultnoimage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxAfA8LtxPscz81d08P_QGCS5wRjjwywFc65TATu_pS9Gjb_CfOPGsxxtN5tD83fhMPmvi_i2AZ0a72aYSuSvld6s_KbZ7e4VS2HOlDSsPjg3TbgRhk_AUrA1tplANU6aDKTE_V-lqyB4/s1600/noimage-namkna-blogspot-com-ngoctra.png"}35<relatedTitles[relatedTitlesNum].length&&
(relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...");for(var i=0;i<g.link.length;i++)if("alternate"==g.link[i].rel)relatedUrls[relatedTitlesNum]=g.link[i].href,relatedTitlesNum++}}
function removeRelatedDuplicates_thumbs(){for(var f=[],e=[],g=[],h=0;h<relatedUrls.length;h++)contains_thumbs(f,relatedUrls[h])||(f.length+=1,f[f.length-1]=relatedUrls[h],e.length+=1,g.length+=1,e[e.length-1]=relatedTitles[h],g[g.length-1]=thumburl[h]);relatedTitles=e;relatedUrls=f;thumburl=g}function contains_thumbs(f,e){for(var g=0;g<f.length;g++)if(f[g]==e)return!0;return!1}
function printRelatedLabels_thumbs(f){for(var e=0;e<relatedUrls.length;e++)if(relatedUrls[e]==f||!relatedTitles[e])relatedUrls.splice(e,1),relatedTitles.splice(e,1),thumburl.splice(e,1),e--;f=Math.floor((relatedTitles.length-1)*Math.random());e=0;0<relatedTitles.length&&document.write("<h2>"+relatedpoststitle+"</h2>");for(document.write('<div style="clear: both;"/>');e<relatedTitles.length&&20>e&&e<maxresults;)document.write('<div class="lienquan"><a style="text-decoration:none;padding:3px;float:left;"'),
document.write(' href="'+relatedUrls[f]+'"><img style="width:60px;height:40px;border:1px solid #A8A8A8;padding:4px;background:#fff;margin-right:4px; float: left;" src="'+thumburl[f]+'" /><span style="color: #006633;font-family: Arial;font-size: 12px;font-weight: normal;text-align: justify">'+relatedTitles[f]+"</span></a></div>"),e++,f<relatedTitles.length-1?f++:f=0;document.write("</div>");relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
;
Trong đó:  
  • width:60px; là chiều cao của ảnh thu nhỏ thumbnail.
  • height:40px; là chiều rộng của ảnh thu nhỏ thumbnail.
- Sau đó lưu lại và tải lên host riêng của bạn để dùng lâu dài nha.. Nếu chưa có host bạn có thể xem bài viết đó tại đây.