How To Add Related Posts Widget With Thumbnail In Blogger

Learn how to add related posts widget with thumbnail in your blogger blog.

Related posts widget play an important role in a blog to generate more pageview and it helps to reduce bounce rates. A visitor is very much likely to read related articles if they are available.

Here, I have written a tutorial on how to add related posts widget with thumbnails in your blog.

There are many related posts widget available that you can add to your blog, but if you are looking for a widget that you can add to your blog and customize as per your requirement, there is one for you.

Add Related Posts Widget With Thumbnail In Blogger

Step 1: Go to Blogger Dashboard → Theme → Edit HTML

Step 2: Click anywhere inside Template code area and Press CTRL+F

Step 3: A search box will appear, find </head>

Step 4: Paste below code Just above </head> tag

<!-- related post widget by bestbloggerlab.com start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-post-title{color: #000000;margin-bottom: 0.75em;padding: 0 10px 0 0;text-align: left;font-size:20px;font-weight:bold;}
#related-posts a {color: #000000;} 
#related-posts ul { list-style-type: none; color: #000000; }
#related-posts li { padding: 8px 2px; clear: both; overflow: auto; border: 0px solid #CCC; margin: 5px 5px 8px 5px;}
.image_left{ float: left; margin: 0px 10px 10px 2px; padding: 0px; width: 80px; height: 56px;}
#related_here{ float:left; width: 49%; padding: 0px; margin:0px; }
#related_here2{ float:right; width: 49%; padding: 0px; margin:0px; }
.related_all_ul{overflow: auto;}
</style>
<script type='text/javascript'>
//<![CDATA[
function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");if(e.feed.entry[l].media$thumbnail)var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");else if(null!=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/))var a=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];else var a="http://1.bp.blogspot.com/-a-3WZRtj7pw/VoxaVk-cPMI/AAAAAAAABMo/ivQ1HVw0ZME/s250-Ic42/no-thumbnail.png";relatedImage[relatedTitlesNum]=a;for(var n=0;n<t.link.length;n++)if("alternate"==t.link[n].rel){relatedUrls[relatedTitlesNum]=t.link[n].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=relatedTitles[r],t.length+=1,t[t.length-1]=relatedImage[r]);relatedTitles=l,relatedUrls=e,relatedImage=t}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1),relatedImage.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random()),l=0;for(relatedTitles.length>1;l<relatedTitles.length&&20>l&&l<maxposts;)l%2==1?document.getElementById("related_here2").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>":document.getElementById("related_here").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>",t<relatedTitles.length-1?t++:t=0,l++;relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length),relatedImage.splice(0,relatedImage.length)}var relatedTitles=new Array,relatedImage=new Array,relatedTitlesNum=0,relatedUrls=new Array;
//]]>
</script>
</b:if>
<!-- related post widget by bestbloggerlab.com end -->

Step 5: Now open the search box again and search <div class='post-footer'>

Step 6: Just above <div class='post-footer'> Paste the following code:

<!-- related post widget by bestbloggerlab.com start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<p id='related-post-title'>Recommended Posts For You</p>
<div class='related_all_ul'>
<ul id='related_here'/>
<ul id='related_here2'/>
</div>
<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&amp;max-results=7&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'> var maxposts=4; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script>
</div>
<div style='clear: both;'/>
</b:if>
<!-- related post widget by bestbloggerlab.com end -->

Step 7: Save your Template.

Note:-

1. If you want to change CSS style according to your template design you can change it in related posts CSS code.

2. You can change no. of posts to appear in related posts. Just change number in maxposts=4; in red color

I hope you find this article is very helpful to you so don't forget to share this post in your network.

ПОИСК ПАРТНЕРА ___________________________