Recommended Article

4 Must To Have Gadgets With PC For Newbie and Geek

Do you just bought a PC or you already had one and wonder what Gadgets are for now important to acquire with the PC? Although You might have had preliminary lists of some gadgets you wanted to acquire but nevertheless you'll still find some that would be quite handy right here
Unlike a mobile phone in which its main add-ons is just the sim and purchasing mobile airtime, a PC need lots more than that. And with numerous gadgets for PC out there, its easier to get overwhelm as which one to start with.
     But here, i had gathered 4 Important Gadgets which you need to have with your PC
4 Gadgets You Need To Have With Your PCExternal Mouse - Although laptops came with a default mouse buttons likewise trackboard which are embedded below the keyboard, i'd still recommend getting an external mouse.
Using an external mouse allows you to perform tasks in a faster and more easier way. 
Flash Drive - Probably you didn't have a printer and you're to print out a document from your…

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

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


Comments