Bài viết liên quan thể hiện dưới dạng ảnh thu nhỏ cho Blog

Bài viết liên quan(Related post) là một tiện ích khá hữu ích trên blog hoặc trên website, nó thể hiện được tất cả các vấn đề liên quan đến một chủ đề nào đó mà khách quan tâm.Hiện tại mặc định thì blog sẽ không có phần bài viết liên quan này.Vì vậy hôm nay huanthai sẽ hướng dẫn các bạn cách tạo tiện ích bài viết liên quan theo hướng những bài viết này sẽ thể hiện dưới dạng những ảnh thumb thu nhỏ gọn, đẹp mắt, nó sẽ tạo tính thẩm mỹ cho phần blog của các bạn.

* Các bước để thực hiện trình bày bài viết liên quan với hình ảnh thu nhỏ(thumbnail) cho blog:
- Vào mẫu (Template) --> Chỉnh sửa mẫu (Edit HTML)
- Sử dụng đoạn code bên dưới để dán vào trước phần thẻ ]]></b:skin>:
----------------------------------------------------------------------------------------------------------------------

ul#related-posts{font:14px Oswald;list-style:none;text-transform:none;margin:10px 0;padding:0}

ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}

*html ul.rp#related-posts li{margin:0 13px}

ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:4px solid #bbb;display:block;height:95px;position:relative;width:90px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}

ul#related-posts li .overlay{height:89px;line-height:16px;position:absolute;width:84px;z-index:10;padding:6px 0 0 6px}

ul#related-posts li a:hover .overlay{background:url(https://googledrive.com/host/0B_EqPkkCHtDLVnV0dkNmUFAzWGc);display:block!important;}

ul#related-posts li img{bottom:0;padding:0!important}

ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);border:4px solid #666}

--------------------------------------------------------------------------------------------------------------------------
- Tìm thẻ:  <div class='post-footer'>
Sau đó thêm vào đoạn code bên dưới vào sau thẻ này:

--------------------------------------------------------------------------------------------------------------------------

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<h2>Bài viết liên quan:</h2>

<script type='text/javascript'>

var defaultnoimage=&quot;https://googledrive.com/host/0B_EqPkkCHtDLb1VzS3FNVGxNY1E&quot;;

var maxresults=6;

</script>

<script type='text/javascript'>

//<![CDATA[

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.media$thumbnail.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{if(typeof(defaultnoimage)!=='undefined')thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUSzEDCjI4TYpSg_dEEsIgONO94icaYUnvuUoXbWgvXkRVDzmIvpA8YozWCI51QSKPaCCvnqxvofSgVnJkMwGQxk_N3SVZnXsU2yt57hS6qFUVo68eyGeb077u3U3yg6qdWWOUazXt3ENC/s1600/noimage-namkna-blogspot-com-1.png"}}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";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(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined')splitbarcolor=splittercolor;else splitbarcolor="#d4eaf2";for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.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('<ul id="related-posts">');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a');document.write(' href="'+relatedUrls[r]+'"><span class="overlay" style="display:none;">'+relatedTitles[r]+'</span><img style="width:90px;height:90px;border:0px;" src="'+thumburl[r]+'"/></a></li>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}

//]]>

</script>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<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'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</script>

</b:if>     
--------------------------------------------------------------------------------------------------------------------------

Với đoạn code này bạn tuỳ chỉnh những chỗ có bôi màu:

- Thay Bài viết liên quan: thành chữ bạn muốn như: bài viết liên quan hoặc có thể bạn quan tâm hay từ nào khác tùy ý bạn,

- var maxresults=5; là số hình ảnh thumbnail muốn hiển thị.
- Lưu lại mẫu và xem kết quả

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

* Mọi thắc mắc hay cần hỗ trợ về vấn đề sử dụng các code này, các bạn vui lòng comment lại mình sẽ giải đáp ngay khi có thể.