13
comments
Add Related Posts Widget with Thumbnail in Blogger

If you want to increase your blogs page visits/user then i recommend you to add related posts widget in blogger, if you Add related posts widget with Thumbnail in your blogger blog then you will definitely feel the change in terms of number of Pages visited by user.

Add Related Posts Widget with Thumbnail in Blogger

Advantage of having related posts widget is that, Suppose any user is reading one of your blog post and seeking for some information. After finishing of reading he might be impressed with your post and want to visit another, then this widget is easiest way for surfing through related posts. Thus Number of page visits will be increased and as well your traffic bounce ratio will be decreased gradually.

Steps to Add Related Posts Widget with Thumbnail in Blogger

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Layout > Edit HTML and checked the Expand Widget Templates Check box.

layout edit html expand widget template


#Step 2. Find(Ctrl+F) </head> and
replace it with this code:
<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 src='http://sites.google.com/site/besthowtoblogger/blogspot/relatedPostWiththumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>


#Step 3. Find the either line given below.
<div class='post-footer-line post-footer-line-1'>
OR
<p class='post-footer-line post-footer-line-1'>

Put the code given below immediately after the above one.
<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

#Step 4. You can adjust the maximum number of related posts being displayed by editing this line in the code:

var maxresults=5;

To edit the title of the widget you can change this line of code:

var relatedpoststitle="Related Posts";

#Step 5. Save template and done!.

Update: it is possible to make the thumbnail larger:
- Find ]]></b:skin> code in your blog and put below css code just before that.

#related-posts img {
height:150px !important;
width:150px !important;
}
Done :)


13 Responses to "Add Related Posts Widget with Thumbnail in Blogger" - Leave a response

  1. jaganmangat July 12, 2010 at 12:52 PM
    dude,it doesn't work,plz revise your article and correct if you have done any mistakes, i will be back to your post,article was nicely posted good work keep it up.....!!!!
  2. Mason July 14, 2010 at 7:24 PM
    i'm using blogger in draft and i can't get it to work either. can you post instructions for blogger in draft? thanks!
  3. Piyush - Admin @ Blogger How To Tips July 15, 2010 at 8:18 AM
    @jaganmangat, i have test it again and it works perfectly: http://menuzoomer.blogspot.com/2010/07/demo-post-2.html

    Can you tell me where you are getting stuck???.

    @Mason: It won't make any difference whether you are using blogger in draft or simple blogger. if you tell me something more about your problem, i will be able to address the solution very soon.

    Thanks to both of you.
  4. Editor September 4, 2010 at 4:28 AM
    I VE PUT THE CODE AS IF YOU SAID BUT I DIN GET ANY SYMPTOMS OF RELATED POSTS IN MY BLOG
    BLOG ADDRESS: LENSFIRE.BLOGSPOT.COM
  5. Piyush - Admin @ Blogger How To Tips September 14, 2010 at 12:16 PM
    @Ir.Ladybird, What issue is keeping you implementing this hack?. Can you elaborate more on this, so i can help you.
  6. Piyush - Admin @ Blogger How To Tips December 14, 2010 at 10:24 AM
    @Ravi Rajvanshi, What issue you are facing?, let me know.
  7. Anonymous January 31, 2011 at 6:16 AM
    Hi, I just tried to add the related posts thumbnail widgets and am having trouble with it. Can you help? I can be reached at alifetobraggabout@gmail.com. Thanks :)
  8. Aprille Faye Baltazar January 31, 2011 at 7:11 PM
    hi I tried and followed the instructions but the related post item is not showing in my blog.. can you check it out please. here's my email add for faster transaction: afayebiz@gmail.com. my blog is at http://aprillefaye.blogspot.com will appreciate your response. tnx
  9. Piyush - Admin @ Blogger How To Tips February 1, 2011 at 8:21 AM
    @Aprille, I guess you are using template designer designed templates, Please make sure that you are adding code in Expand widget mode. try again and let me know.

Post a Comment

^ Scroll to Top