Subscribe For Free Updates!

We'll not spam mate! We promise.

Thursday, May 30, 2013

Add Related Posts Widget For Blogger With Thumbnails

Are you looking to increase page views of your blog? This should be a must have widget for your blogger blog. Related Posts with thumbnails is not just a one more related posts widget. This widget really looks good with the content and thus adds something worth to the overall design of your template. It helps your readers to go through the similar posts they were reading and so helps to decrease your bounce rate by increasing page views.

By displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

In this post we will go through the steps of adding the Related Posts Widget with thumbnails for Blogger. Ready to add to your template? Go through the steps below.

How To Add Related Posts Widget For Blogger With Thumbnails

  • First for All Go To Blogger.com > Design > Edit Html
  • Find </head> Using CTRL+F
  • Copy the code below and paste it just after </head> tag 
<!--Related Posts with thumbnails Scripts and Styles Start B2W--><b:if cond='data:blog.pageType == &quot;item&quot;'><style type="text/css">#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color: black;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{color:black;}#related-posts a:hover{color:black;}
#related-posts  a:hover {background-color:#d4eaf2;}</style><script type='text/javascript'>var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";var maxresults=5;var splittercolor="#d4eaf2";var relatedpoststitle="Related Posts";</script><script src='http://beautifulbloggerwidgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/></b:if><!--Related Posts with thumbnails Scripts and Styles End B2W-->
  • Now find the following code: 
<div class='post-footer-line post-footer-line-1'>
  • If you can't find it, then search for this one: 
<p class='post-footer-line post-footer-line-1'>
OR:
<data:post.body/>
  • Copy the code below and paste it just after <data:post.body/> tag and save your template.   
<!-- Related Posts with Thumbnails Code Start B2W-->
<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><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://beautifulbloggerwidgets.blogspot.com/' ><img style="border: 0" alt="Blogger Widgets" src="http://2.bp.blogspot.com/-Hn8-zTJf3L0/T9cqAcnrfJI/AAAAAAAAAGM/5gBy5_MPPBQ/s1600/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End B2W-->
  • Change the 6 value from max-results=6 with the number of posts you want to be displayed.  

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
Follow us →
Share It →

31 comments:

  1. thank you see this http://probloggerhome.blogspot.in/

    ReplyDelete
  2. I keep getting my signature as the default picture for my posts (even though they have other pictures. (I changed the link to show a different picture, if there is no picture)

    www.nerdmomtotherescue.blogspot.com, so you can see what I mean.

    ReplyDelete
  3. Nice interesting! more & BEST at www.probloggerhome.blogspot.in about Customizing, Monetizing, Advertising,SEO, Driving traffic, ...
    http://www.probloggerhome.blogspot.in

    ReplyDelete
  4. its not working in my blog,im trying

    ReplyDelete
  5. Nice post....

    Kashif Bro I am also pakistani and can you plz give me your personal fb profile id to Bacha_shareef@live.com that i am very thank full to you.
    PLz send you fb profile id plz, i want to get some help from you...

    ReplyDelete
  6. thank very much this is exactly what i was looking for

    ReplyDelete
  7. excellent post,i really like the your post,thank you for the sharing this excellent post,| Search Engine Optimization | Seo Ebooks | Blogger Widgets | Blogger Templates |

    ReplyDelete
  8. thanks visit it -www.smsheart.in

    ReplyDelete
  9. It's not working in my blog why?

    http://learn-4-future.blogspot.com

    ReplyDelete
  10. great tutor. just add your link to my blog here http://doarinfo.blogspot.com/p/following.html

    ReplyDelete
  11. Not working on my blog.check here on my blog.what is error...

    http://www.cyberzoneattack.com/

    ReplyDelete
  12. excellent post
    http://indiaedu9.blogspot.in/

    ReplyDelete
  13. its not working for my blog. why? help

    ReplyDelete
  14. this helps me well done
    Happy Diwali 2013enjoyed this post

    ReplyDelete
  15. Not working for my blog

    http://theLetter10.blogspot.com

    I've tried many different techniques, but can't get anything. Is it because I'm using a custom template?

    ReplyDelete
  16. wow it works well thank you :)

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. helped me to improve.... Am new to the world of internet and its wide oppurtunities...... Make Money , Blogging Tips

    ReplyDelete
  19. Sorry Dear Help its not working on my Both of Blogs... Findandroidgames.blogspot.com and Findandroidappz.blogspot.com ..... Kinldly Help

    ReplyDelete
  20. <a href='http://www.gamezit.com>Thnx It Was Helpful</a>

    ReplyDelete