Related Posts Widget for Blogger

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 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. Wow! Both design and better functionality at same time.

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.

Adding Related Posts widget for Blogger with Thumbnails

1. Go the Blogger Dashboard and Navigate to the Layout button of your template.

2. Go to the Edit Html of your Blogger Template.

4. Now look for 

  </head>

and ABOVE the code; copy the following code. 

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Now find the below Code in your template. Remember easy way to locate codes if by using the Find option (ctrl+F) and copy pasting the code.

<div class='post-footer-line post-footer-line-1'>

or

<p class='post-footer-line post-footer-line-1'>

6. After you have located those codes, copy the following code and add it AFTER the code.


<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Widget Configuration

To change the widget’s default configuration, you need to edit the following lines for respective settings.
1. To change the total no of posts displayed in your blog posts, Edit the following line of code.

var maxresults=5;

2. To Edit the title of the widget, change the following line of code.

var relatedpoststitle="Related Posts";

3. To edit the default thumbnail (the image which is displayed when no image is there in your post), edit the following line of code.

var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

4.To Change the Colour of the Splitter Line , edit the following code.

var splittercolor="#d4eaf2";

You can make additional changes according to your need. This plugin was developed by Aneesh from Blogger plugins. Thanks to him for developing a really useful widget.
Are you using this widget or did you run into any problems with the widget ? Let us know in the comments below.

Blogger Widgets May 23, 2010

Published by Pradeep Singh

Pradeep is your host at BloggerUser helping you to build your blog by providing Blogger tips, tutorials, guides, free blogger templates and more.

Posts by Visit Website

28 Comments

  1. Julie

    I followed the instructions… I don’t see anything new in my entries. Have any tips?

  2. sarwasunda

    Its work for my blog : Sarwa Sunda
    , thanks.

  3. murat

    it did not worked my new blogger temp. please help

  5. SYDMAN

    dude thanks! although can this work on related posts with categories?

  6. Anthony

    Followed instructions. Nothing changed. Recent Posts are not shown.

  7. gtagamer

    thanks dude it works to me.

  8. bibin

    Thanks. One of the best one

  9. Karen

    Hi and thank you.
    I put it in like you instructed. I didn’t change the default just to see if it would work first and I don’t see it on my blog. Can you give me any pointers? Maybe its my template?
    Thanks for your help!
    Karen

  10. Stephanie

    Followed the directions but nothing happened… Is there a certain amount of time it will take to enact?

    Thanks!

  11. Mali

    Ok, it looks like some of you have some problems with adding this amazing feature. I can guess some points.

    * There may be more than one / so check it first. If there are try the last one or try applying the code till you get the right one.

    *If above one does not work find,

    in your template. yep, as the earlier time if there are more than one , try the last one or try applying the code till you get the right one. and paste the second code after that. (as instructed to paste it after

    Hope this will help. All the best. 🙂

    • Mali

      Opppps, my codes does not appear in my reply.. So I’ll repeat my reply again:
      ————————————————————–
      Ok, it looks like some of you have some problems with adding this amazing feature. I can guess some points.

      * There may be more than one

      /

      in your template. So check it first. If there are, try the last one or try applying the code till you get the right one.

      *If above one does not work find,

      in your template. yep, as the earlier time if there are more than one , try the last one or try applying the code till you get it to work, and paste the second code after that. (as instructed to paste it after )

      Hope this will help. All the best. 🙂

    • Mali

      Bad luck of you, I think my code parts have to be moderated. You will see them later. If not I’ll reply again. and good luck Pradeep Kumar Singh. You doen a greate work.

    • Mali

      Bad luck of you, I think my code parts have to be moderated. You will see them later. If not I’ll reply again. and good luck Pradeep Kumar Singh. You have done a great work.

  12. aadhar

    hey , to display related post , you need to put labels ……..
    those who didint get results put same label on two posts then see one post u will get related post ……………

    this is good and fine …………than widgets linkwithin and outbrain.

  14. kezia

    i followed the instructions, but nothing showed?!

  16. Jess

    Posted it in as instructed and I’m afraid nothing changed. Using a blogger customised standard template (ethereal). Does it not work for some templates?
    Thanks,
    Jess

  17. Christeen

    Hi,

    I already had this one on my blog befor but after I change my template to “the journalist” from “minima” it stop working. 🙁

    I already re install the cript and still not :S and I want it back on my blog.

    Help please! thanks

  18. wholesale garments

    looking for more posts similar to this one. Bravo.

  19. Bibhuti

    Do Not Work In Some Template…Why ?

  20. vivek

    it worked for me..thanks

  21. Rihanna hairstyle

    I tried this on my blog, added all codes you give. But nothing changed. No related posts shown. I tried this 3 times, but no results. Whats wrong with me ??

  22. Resep Rahasia Ibu

    thanks for help me with this code 🙂

  23. Ravi Teja M

    I too tried more times still no effect can u help for http://www.gusgadgets.net

  24. hanzla

    hey admin can you help that how you add script in post as it’s showing in above post
    copy it and paste !!!!
    it is seem to simple in the abover you add it nicely
    i hope you under stand my problem
    forexamle


    #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, “Times New Roman”, 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;
    }

    var defaultnoimage=”http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;
    var maxresults=5;
    var splittercolor=”#d4eaf2″;
    var relatedpoststitle=”Related Posts”;


Comments are closed.

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match