Bài viết liên quan (Related product) thu nhỏ cho blogger

=> 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/AVvXsEhE43xCsmJpuPOH3WOuAh5VAJy_ldDg3b32NoONN0ZWiUQymZe3DAvuMbQI1iuhvYsQ5YXLuGxhgzokblLHY2ls5-lCWgf8bwiCJ95JEup43qZSabRS7mnbByyCScP8Q0H4DME60QCbrpl6/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/AVvXsEiTYCMVwxuA1SrLG4y9DVfkuCYB6az0ebsyRbqWlSVT-ev4CONcYO5-Nc7z8_y7ASIq2IKaaGCmMySlAZJ_FSJPHDmLU9ZRGYLsx5mUUA7YS2yYJ-60R7gpX7fsqq5Vrb_mmxkSNSvCKy4x/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/AVvXsEj-xuYn3g1A7knfYUGDiT15mwioZ5INgDhhcjgvn1Blfg3_tU2mxDqNcktf2XQKajU2hyphenhyphenCFj3HaVAuGmhN27Wd7bycC8kiUzCARi9UmgoaG_XoGnvg4crLpPUDVj49k6Twia2rKcXckjJBP/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!