How To Add Stylish Related Post Widget With Thumbnail For Emporio Blogger Theme

Do you like this Blogger Theme? You can Download Here

Do you like this NetSocialBlog Blogger Emporio Theme?
With all of its designs, share buttons, related posts, gadgets, Adsense Middle ads Codes, SEO tags, Social Card and More! You can download this Custom emporio NetSocialBlog theme by >>Making One-Time Payment Here via Debit Card >>

Share this Post:

Related Post Widget is one of the most important widget a blog should have. This is mainly because it helps to reduce bounce rate by showing readers another article after reading the current article which might be of interest to them. Also, it helps to increase to increase your site's page views thus yielding to higher chance of more adsense earnings.

    On this post, you'll find out how to add Stylish Related Post Widget With Thumbnail to the Emporio Blogger Theme as well as the other Blogger new Themes.

Related Post Widget works just like the simple related post widget for blogger but the major difference between the one about to mentioned on this post and that of the simple related posts widget blogger is that; one do show thumbnails while the other won't. Depending on your site's theme and preferences, you can decide to opt in for the simple one or the one with thumbnail.

NOTE: You can use the same method to add related posts widget for Soho, Contempo and Notable Blogger New Theme

DEMO: 

  Althought there are lot of related post widget with thumb around but seems not all does work with the new blogger themes as i tested some. However the one mentioned on this post does really works as shown in the DEMO above.

How To Add Stylish Related Post Widget With Thumbnail For Emporio Blogger Theme

1. Goto Blogger Dashboard => Theme => Edit HTML
2. Click on anywhere inside the HTML Code and press CTRL+F
3. A search box will be displayed. Then type </head> and press enter key to search

4. Copy the code below and paste it directly </head>

<!-- NSB Stylish Related Post -->
<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/AVvXsEiV5i40tMl5URfh-qNqvviDdnE63v43OgGqKM3gkpePZSOvcITc45iyIW_vJVMqPRpkPBvydWDdVG1VpEmDrSSwhWbBnOVx7zG6ej9CE9nmUFWE7_wk3FZ5A3WXSmzMoungBn2d6zyPZrg/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>
<!-- NSB Stylish Related Post -->

5. Now press CTRL+F again to search for this code <data:post.body/>
6. Copy the code below and paste it directly below <data:post.body/>

<!-- NSB Stylish Related Post 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><small><a href="http://www.netsocialblog.com/2017/11/stylish-related-post-thumbnail-widget-emporio-blogger-theme.html" rel="no follow" target='blank'>Get this</a></small>
<div style='clear: both;'/>
</b:if>
<!-- NSB Stylish Related Post end -->

7. Once you've done that, then click on SAVE THEM Now, preview one of your posts to see the changes. If you want something lighter, you can use the simple related post widget here

Share with friends:

• Share
• Tweet
• Share
• Pin It
• Share