How To Add Related Posts Widget With Thumbnail In Blogger

Learn how to add related posts widget with thumbnail in your blogger blog or stylish related post widget for blogger or simply related post widget for blogger or link within blogger or blogger related posts or you may also like widget blogger or link within alternative or related post with thumbnail blogger or related posts widget WordPress or related post widget for blogger with thumbnail or simply related post widget for blogger or related post with thumbnail blogger

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 on 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.

DEMO: I am also using the same related post widget on my blog.

Related Posts Widget With Thumbnail In Blogger

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi09rvxIhV-yxI5_tY-qQHvwBD7pJJOgaNAW86UB5SeEPAR0Sj4j-xHxPFluVfNdxkKCZ5mbzMy_pedVSUhWA5yWJGNsZHqI3VvQ4WFZqmCk8ZmjFVfrqvnB9j01aP2EQkU7MafRGIzrb8/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 on your network.

Ghanendra Yadav

Hi, I’m Ghanendra Yadav, SEO Expert, Professional Blogger, Programmer, and UI Developer. Get a Solution of More Than 500+ Programming Problems, and Practice All Programs in C, C++, and Java Languages. Get a Competitive Website Solution also Ie. Hackerrank Solutions and Geeksforgeeks Solutions. If You Are Interested to Learn a C Programming Language and You Don't Have Experience in Any Programming, You Should Start with a C Programming Language, Read: List of Format Specifiers in C.
Follow Me

Share this post