Skip to main content

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 With Thumbnail In 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="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 on your network.

Comments

Popular posts from this blog

How to Fix Error 0xc004d307 to Maximize Allowed re-arms

Learn how to fix Error 0xc004d307 or a maximum number of rearms exceeded windows 7 fix or the maximum number of rearms has been exceeded windows 7 fix or SLRMGR rearm not working after restart.




Error 0xc004d307: The maximum allowed number of re-arms has been exceeded.
While converting your not genuine windows to genuine, you may get an Error message like this Error 0xc004d307. You get this error because you have used the command for more than three times. You can use SLMGR - REARM only three times. To avoid this error, you have to reinstall OS (Operating System). Even without reinstalling OS you can solve this problem. Just follow the procedure.

Learn Programming:Find the Grade of a Student Using Switch Case in C Language

After using command SLMGR -REARM for three times, “SkipRearm” registry key will become “0”.You need to change the “SkipRearm” registry key to “1”.

You can find “SkipRearm” by going to the following location from “Registry editor”.

Path:- HKEY_LOCAL_MACHINE/SOFTWARE/Mi…

5 Best SEO Friendly and Fast Loading Blogger Templates

Today, I have made a list of top 5 free blogger templates which are Highly SEO Optimized, Fast loading, Adsense ready, responsive and mobile-friendly or SEO friendly fast loading blogger template or fastest loading blogger template or fast loading responsive blogger template or fast blogger template or supreme v2 blogger template or free blogger template fast loading or free blogger templates for Adsense or best SEO optimized blogger template or SEO hub blogger template or smart SEO blogger template or SEO hub fast loading blogger template



Blogger Is One Of The Top And bests Free Blogging Platform. After creating a blog on Blogger.com.

The next question is which template to choose?

No need to worry, I have selected 5 best SEO friendly, Adsense friendly, Fast loading, Free blogger template. so you can select one of the best templates for your blog from here.

These templates have special features which will help you to improve search rankings in Google.

Free Responsive and SEO Optimized…

10 Best PPD Pay Per Download Sites With or Without Survey

In this post, I have listed top 9 best rated and reliable PPD sites ( pay per download sites ) with or without a survey to earn money online or best ppd sites for india or pay per download affiliate or pay per download india or pay per download app or upload and earn per download or pay per download android or upload ocean or uploadocean review or pay per download app or pay per download without survey or best pay per download sites or upload and earn per download or pay per download india or best ppd sites for india or best ppd sites without survey 2017 or earn money by downloading songs




One can earn money easily by uploading files on PPD websites, be sharing links to social sites, their blogs and get paid whenever someone downloads that file. It is an easy way to earn money online from home by using Top PPD Networks.

As you may know, there are lots of PPD websites on the web, most of them promise high pay per download, unfortunately only a very few of them actually fulfill their pr…