Recommended Article

5 Reasons Why You Should Change Your Domain Name Now!

Its ain't a new thing when a blogger think of changing his/her domain name even after having been using the domain name for a long time. Although some bloggers and webmasters have manage to stuck to their domain name for years without thinking of changing it, or maybe they thought of changing it but just decides to dump the idea of doing so.

  I guess by now, you might wonder that why would a blogger ever thought of changing his/her domain name? Well, am going to list the reasons below on this post and additionally, why you should also do so too.


  Incase you're not familiar with what it is, a DOMAIN NAME is simply the URL that a site can be accessed with, taking for instance, this site you are currently viewing can be accessed with its DOMAIN NAME via www.netsocialblog.com. Having now knew about what a domain name is, lets discuss about the reason as to why you might want to change your domain name.

5 Reasons Why You Should Change Your Domain Name Now! Name Too Long - Just b…

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="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>
<!-- 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:

Comments

  1. Can this "Related Post with Thumbnail" also works on Mobile view of Blog?
    Please reply...

    ReplyDelete
    Replies
    1. Of course, yes!

      The Related Post With Thumbnail for Blogger Blog does also show on Mobile View

      Delete

Post a comment

Would you like to share Suggestion/Feedback or ask Questions? Feel free to share but Please do not SPAM Us!

Spam comments won't be approved