How To Add Related Posts Widget To Blogger with Thumbnails

We do'nt take your much time because here we tell you the seo and async related posts widget tricks with thumbnails in short. To add related posts widget you need to add an html widget in blogger and simply paste little bits of codes which includes js and some little code.

Smartly link your content using this awesome blogger new related posts widget hack or whatever.

Adding Relatest Posts Widget With Thumbnails to Blogger

Follow these simple steps to add related posts widget to your blogger blog

Step 1: Adding HTML widget in Blogger Layout.

This is first step to add best blogger related posts widget, Go to Blogger Dashbord and then Layout. Click on + add a widget and Then choose HTML widget from Popoup.

Step 2: Switch to HTML in Widget And Place the Below Codes

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='related-posts-container' id='related-posts-widget'/> <div style='clear: both;'/> <script type='text/javascript'> <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast'> var labelArray = [&quot;<data:label.name/>&quot;]</b:if></b:loop>; var relatedSettings = { blogURL:&quot;<data:blog.homepageUrl/>&quot;, relatedHeading:&quot;<h4><span>Related Posts</span></h4>&quot;, relatedPosts:4, relatedStyle:1, thumbnailSize:&quot;s100-c&quot;, defaultThumb:&quot;&quot;, titleLength:&quot;auto&quot; };</script> <script type='text/javascript'> //<![CDATA[ var randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e in relatedSettings)d[e]="undefined"==relatedSettings[e]?d[e]:relatedSettings[e];var f=function(a){var d=b.createElement("script");d.type="text/javascript",d.src=a,c.appendChild(d)},g=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},h=function(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},i="object"==typeof labelArray&&labelArray.length>0?"/-/"+h(labelArray)[0]:"",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b>0?b:1);f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+c+"&max-results="+d.relatedPosts+"&callback=startRelated")},k=function(a){var l,m,n,o,p,b=document.getElementById("related-posts-widget"),c=h(a.feed.entry),e=d.relatedStyle,f=d.relatedHeading+'<ul class="related-posts-'+e+'">',k='<span style="display:block;clear:both;"></span>';if(b){for(var r=0;r<d.relatedPosts&&r!=c.length;r++){n=c[r].title.$t,o="auto"!==d.titleLength&&d.titleLength<n.length?n.substring(0,d.titleLength)+"&hellip;":n,p="media$thumbnail"in c[r]&&d.thumbnailSize!==!1?c[r].media$thumbnail.url.replace(/\/s[0-9]+/g,"/"+d.thumbnailSize):d.defaultThumb,l=h(c[r].published.$t);for(var y=0,z=c[r].link.length;y<z;y++)m="alternate"==c[r].link[y].rel?c[r].link[y].href:"#";1==e&&(f+='<li class="related-post-item" style="'+i+'"><a class="related-post-item-wrapper" href="'+m+'"><div class="rthumb"><img alt="'+o+'" class="related-thumb" src="'+p+'" width="64" height="64"></div><div class="related-title">'+o+"</div></a></li>")}b.innerHTML=f+="</ul>"+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]); //]]> </script> <div class='clear'/><b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:post.isFirstPost'> <a href='https://taurenidu.blogspot.com'> <img alt='Blogger Tutorials and Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizifl01CUi-TygUzMNWSY2lrka9PNoNsrV0jQl_Fy7vflD0TvtOy6i3i5N1GpHkJEohTDIOGnMGLV6MANmkAUygFzrnoos7tT764cNLWwO7eJcsCQbiMODBSbwkm6N6vXEN4MvCFe5_9f6/s1600/blogger%252Btips%252Btutorials.png'/></a><a href='https://firstspecs.blogspot.com'> <img alt='Blogger Tutorials and Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizifl01CUi-TygUzMNWSY2lrka9PNoNsrV0jQl_Fy7vflD0TvtOy6i3i5N1GpHkJEohTDIOGnMGLV6MANmkAUygFzrnoos7tT764cNLWwO7eJcsCQbiMODBSbwkm6N6vXEN4MvCFe5_9f6/s1600/blogger%252Btips%252Btutorials.png'/></a> </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'> .related-posts-container{margin:5px 0px;}.related-posts-container h4{margin-bottom:15px;}.related-posts-container ul,.related-posts-container ul li{list-style:none;margin: 0;padding: 0;}.related-posts-container ul li a{text-transform:capitalize !important;font:14px/1.5em &#39;Open Sans&#39;,Arial,sans-serif;color:#647993;}li.related-post-item:last-child{margin:0 0 2% !important;}.related-posts-1 li:nth-child(even){margin:0 0 4% !important;}.related-posts-1 li{width:41.8% !important;float:left;margin:0 3.49% 4% 0 !important;padding:3% !important;}.rthumb{float:left;margin-right:10px;}.related-thumb{height:64px !important;width:64px !important;}@media only screen and (max-width:500px){.related-posts-1 li{margin:3% 0!important;width:94%!important}.related-posts-1 li:nth-child(2n){margin:3% 0!important}}</style></b:if>

Save widget and Enjoy....and Share our article...

 Feature of our New Related Posts widget

I am also owner of a blog which is world fastest and India number one blogspot, posts many related posts widget script in internet but this time I post related posts widget that I personally use.

• Recommneded By +Tauren Idus 
• Use Canonical Version of Posts, means no duplicate issue is encountered.
• Tested over 5000 Blogs including taurenidus, helplogger and many more.
• Use Even Number, currently degault munber of thumbs is Four.
• This is first related posts which avoid render blocking and not alter blog speed.
• Now your turn to know the features of this related posts widget specially designed for blogger.
•