Bài viết liên quan dạng ảnh thu nhỏ cho blogger

Bài viết liên quan (related post) là một phần không thể thiếu với các blogger muốn hướng đến sự chuyên nghiệp và thu hút độc giả. Tiện ích related post hôm nay namkna sẽ giới thiệu sẽ có dạng list ảnh thumbnail và tiêu đề sẽ hiện ra khi bạn dê chuột lên ảnh đó. Nhìn khá đẹp thích hợp cho các blog về hình ảnh hay các blog chuyên về báo trí.
Xem Demo:



Các bạn có thể xem ảnh minh họa bên dưới:

=> Làm thế nào đẻ thêm Related post với hình ảnh thumbnail vào blogspot.

1- Đăng nhập vào blog

2- Chọn mẫu (template)

3- Chọn chỉnh sửa HTML => Chọn mở rộng tiện ích mẫu

4- Dán đoạn code bên dưới vào trước 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0g_nAtMCLnya4CSOuVAMVzOJOarCjenMQ9qszADioYvZG5znY4pczwIIgxJ04mgDEYdhGsZIBYD-XRiL2kQEVFW-drtox3eFKVYaIz6mE9ufHVUXSLUJIJ7-ucrJmllQaemFsWHZp226f/s1600/transparant-namkna-blogspot-com.png);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}

5- Tìm thẻ 1 trong 4 thẻ sau:
Thẻ 1:

<div class='post-footer'>

Thẻ 2:

<div class='post-footer-line post-footer-line-1'>

Thẻ 3:

<div class='post-footer-line post-footer-line-2'>

Thẻ 4:

<div class='post-footer-line post-footer-line-3'>

=> Thêm và sau 1 trong các thẻ trên đoạn code bên dưới:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2>Related product you might see:</h2>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF2MCiem0OcfZe0txNT0ofbAAswWNzXoZyc18CL3wh3lXY6yydYriHMnzMTgXgveoRmHKO2KnO_cIYhxIadTpFdfYgDX4f8rdrRTMtxR5YKIMmIJ_MjDYjVI4rBiBST3xYuxVkWgb2mvh7/s1600/no-image-namkna-blogspot-com.jpg&quot;;
var maxresults=5;
</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/AVvXsEhix3LVWB1FXJRl3-wIoK2YCiVXaDqKWzUCuDfheHOgylJqYIhZC-Pt5Re7YUGOYk2fdIfkXhH-oy_e7u9TEF6BYLP9TZGy6V0vBXVGicTTZJT2rU7omyXGiS_GU0Bde1u7cYGnxFwFAsz0/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>      

Tùy chỉnh:

var maxresults=5; là số hình ảnh thumbnail muốn hiển thị.

Thay Related product you might see: 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,

6- Lưu mẫu lại và xem kết quả nha!