2012/09/22

Best Blogger Related Posts Widget with Thumbnail

6 comments

The Blogger Related Posts Widgets is one very important tool for attracting readers to read more of your content and make them stay on your site longer than they should. If visitors come to your site, read the content that brought them there and then click away, they mightn't come back again but if they stay long enough and happen to discover the good things about your site, I guess they will practice your website/blog url or bookmark your site so they can re-visit next time.
Installing this widget should help a lot.






Effectiveness of the Blogger Related Posts Gadget


You mightn't know just how effective this widget is but, I guess you have seen websites or blogs having on their sidebar things like; Recent Posts Widgets, Most Popular Posts Widgets and other forms of Widgets. Did you know, all of those widgets are installed by Bloggers or Webmasters just to keep visitors longer on their site? The Related posts widgets are far and more effective than any content widgets, Most especially the one with Thumbnail (images) and heading which is right under every posts you make.


How it Works


There's no special work to it. All you have to do for this widget to work is to create a label or labels, otherwise it wont display at all.


How to Install Widgets


Step 1)
  • From your Blogger dashboard
  • Click on Template  ==> Edit HTML ==> Proceed
  • Make sure to Tick the "Expand Widget Template" Box
  • We also recommend you Back Up your template before installation.
  • On your Keyboard press CTRL + F
  • Find </head>
  • Paste the code below right under </head>

<!--Related Posts with thumbnails Scripts http://wwsurfers.blogspot.com/-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
background:#cccccc;
padding:1px;
margin:0px;
text-transform:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
.img:border:4px ridge #cccccc;


}
.related-post-footer{
background:#999999;
margin:0;
font-size:11px;
padding:5px 0;
text-transform: none;
}
#related-posts h2{
font-size: 1.8em;
font-weight:;
color: #141414;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
margin-bottom: 0em;
padding-top: 0em;
padding-bottom: 0em;
text-transform;underline;
}
.img{
border:4px ridge #cccccc;
padding:5px
}
#related-posts a{
color:#0000ff;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#999999;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyEXEv34II/AAAAAAAAADE/pgs7crFJ_D4/s1600/no+Image+1.png&quot;;
var maxresults=4;
var splittercolor=&quot;#d4eaf2&quot;
var relatedpoststitle=&#39;See Related Posts&#39;
</script>
<script src='http://olusegun-fapohunda-calculator.googlecode.com/svn/wiki/related-post-with-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts http://wwsurfers.blogspot.com/-->


Important Note:

  • If you want the Related Posts widget to display more than just five posts, then you should consider changing the var maxresults=5; in the above code to any number you want. For example; var maxresults=7; to display seven related posts.

Step 2)

  • Having done all of that. Go ahead and look for;    <data:post.body/>
  • Paste the code below right under; ==>    <data:post.body/>




<!-- start related posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><br/><a href='http://www.worldwebsurfers.com/2012/09/best-blogger-related-posts-widget-with.html' target='_blank'><img alt='Blogger Related Posts Widget' border='0' src='http://sphotos-f.ak.fbcdn.net/hphotos-ak-ash4/185300_352802104803421_399692651_n.jpg' title=''/></a><div style='clear:both'/>
</b:if>
<!-- end related posts-->


  • When you're done with that, go Save, reload your page and see how it looks.


Note:
  • Your blog theme or template might have more than one of this code (<data:post.body/>) but that shouldn't be a barrier, just try all of them until you get the right spot.
  • If a particular post isn't labeled the widget wont display below the posts.

Got any questions or contributions? Kindly use the comment. WorldWebSurfers.com is keen to bring you real value, so make sure to subscribe so you don't miss our updates. Cheers!




That should be all. With this medium, we want to say thank you for your continued liking and sharing. If you haven't liked this post yet, you may do that by hitting the buttons just above.

If you are a blogger and you appreciate the hard work, whether or not you copied this post, we implore you to kindly link back to this post here , you may do it anyhow you can. We consider that a great contribution.




Emmanuel Obarhua

Howdy! I'm a friendly blogger and web designing ardent. I designed this site, here's how it was looking . If you have a blog or a website and wishes to beautify it, or you want a service I render just drop me a line , will get back to you.

Kindly follow me @ Twitter | Facebook | Google+

Looking for something else? Search site here:



Blogger Related Posts Widget




Hey! Kindly subscribe to our RSS feed here with your email address so you can get all our updates, eBooks and other breathtaking give-aways right on your email :)




Regards: WorldWebSurfers.com





6 comments :

atiqur rahman said...

Thanks for the great post. I have just installed iton my blog.
Blogger Gadgets, Widgets, Plugins, Templates

Vines said...

Thanks a lot its work on my blog..great!

Emmanuel Obarhua said...

You're welcome Vines, I am glad it worked for you.

Anonymous said...

I don't find this line: in my template's html. What should I do for this?

Emmanuel Obarhua said...

Hi Anonymous, I guess you're either talking about; this < /head > or < data:post.body/ >. I am certain all blogger blogs have those two tags. Make sure to click on the "Expand Widget Template" and try again.

Anonymous said...

Amazing! I'm genuinely enjoying the layout of your website. Are you using a customized theme or is this readily available to all individuals? If you do not want to say the name of it out in the general public, please email me at: leonida-copley@googlemail.com. I'd really enjoy to get my hands on this template!
Thanks a lot.

Visit my web-site ... stump removal

Comment here

Hi There, Our site is dofollow wink.jpg . We welcome your comments HEARTILY.
But please! Do not use;

" Keywords " or " Names of companies " while commenting, It will and MUST be deleted upon our review.

You may not use “ Anonymous ” as your name.
If your comment is the direct opposite of the topic,
It won’t stay long.
Use anchor text the right way.
Comment responsibly.

These Terms are not personal; We love our blog as much as we appreciate
your comments. THANK YOU.