Mẫu bài viết liên quan kèm ảnh đẹp cho blogger

Lại một mẫu bài viết liên quan cho blogger khác được mình tìm hiểu và chia sẻ tới các bạn . Với tiện ích bài viết liên quan này bạn sẽ có một khung giới thiệu đến bạn bè độc giả các bài viết liên quan tới bài đang đọc với hiệu ứng và hiển thị đẹp mắt với hình ảnh bài viết và tiêu đề sẽ giúp kích thích người đọc tiếp tục đọc bài viết trên trang của bạn hơn và tạo ra lượng tương tác thời gian trên trang (timeonsite) cao tăng thứ hạng website của bạn

Cùng tôi tìm hiểu và cài đặt nó cho blog của bạn nhé.

Với tiện ích này chỉ hiển thị bên trong bài viết đơn chi tiết phía bên dưới nội dung bài viết.

Để tiện ích hiển thị đúng các bạn làm theo các bước sau

Bước 1 chèn đoạn code sau vào trước thẻ </head>

<script type='text/javascript'>/*<![CDATA[*/
// Related Posts
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/AVvXsEgn_N7uSdozZXJWzsvtRmbnQHfy2i4tj5AMBN06Dgwh1aa0TO5q_WVfc389f95EtN0X1JconGfVQxMdsXx7R_UTkDzM7yu4SReo06RggDqioktObVouiDmkvVqu_iiVOkromzhl_3-tQHci/s1600/no_image.jpg"}}if(relatedTitles[relatedTitlesNum].length>5000)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,5000)+"...";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="#DDDDDD";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('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<15&&i<maxresults){document.write('<a style="text-decoration:none;padding:5px;float:left;');if(i!=0)document.write(''+splitbarcolor+';"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img src="'+thumburl[r]+'"/><div id="titles"><h3>'+relatedTitles[r]+'</h3></div></a>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}$(document).ready(function(){var dimension=415;$('#PopularPosts1,#PopularPosts2,#related-posts').find('img').each(function(n,image){var image=$(image);image.attr({src:image.attr('src').replace(/s72-c/,'s'+dimension)})})});
/*]]>*/</script>

Bước 2 các bạn tìm đến phần code phía dưới của nội dung và chèn đoạn code sau

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id="related-posts"><h2>What's Related?</h2><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&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'> var maxresults=5;removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script> </div></b:if>