Tiện ích bài viết liên quan dạng ảnh thu nhỏ

Khi độc giả đọc một bài blog nào đó của bạn thì không phải là điều ngẫu nhiên, chắc chắn họ quan tâm tới chủ đề nội dung của bài blog đó. Vì vậy tiện ích bài liên quan sẽ giúp độc giả đọc nhiều hơn và blog của bạn sẽ tăng thêm lượt truy cập. Hôm nay chúng ta cùng cách tạo nó.

Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML

#Thêm css

Tìm thẻ ]]></b:skin> và dán đoạn code dưới vào trước nó.

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/AVvXsEgBkYmkWrZ-khY9SO8L6XwiWYJxJgVipOyiJGzxmxZ9x6aOmrPbfd8vkJyryBSY7V7XVNFRV4XrPE2A2aClAEWIWyNLyg7vXGMYNCLBxBQKJ250CsEiAKvat_ykK9LntRd8xKkKSEzBQvc5/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}

#Thêm HTML

Tìm một trong 4 đoạn code sau, thường là đoạn cuối.
1.

<div class='post-footer'>

2.

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

3.

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

4.

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

Dán đoạn code bên dưới vào trên thẻ tìm được

<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/AVvXsEjlAekTPawKtH6MjkkAbPTCNhljkyrJxHoo8BGJ_iKovo75sQpmqSvD7Bs5EEtv3dgmSnmbpjS3WKaRtvMqnPIs5Qhp69dZKCtGSa76ojk2_4cKzuRIqE0bN21brQSZm6K-7RKHYslwKkuu/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/AVvXsEj1BSiom03P1NkXNYlrdufx6pVg9JwX3Xzi5pblBNWV-7O4krjAcmCOdbpdY9R10mSLANW2CebToGB1vBONLoXb49tz1fFWXv0bp9WU0AeZUroJMlTopS0K6faeTbAZeEmJ5YdYSAZC_lgo/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.

nguồn namkna.blogspot.com