Displaying  related posts at the bottom of each post is a best way to keep to visitor busy and increase your page views.The related posts widget with thumbnails lists a selected number of posts with image thumbnail from each post.This gadget is quite similar to linkwithin's related posts but if you are going use this gadget then you are getting many options to customize this gadget according to your template.The original script is created by Blogger's Master Aneesh of BloggerPlugins and I customized some CSS part and increases the thumbnail size to give it more beautiful look.You can see the live preview of this gadget below in preview.


How To Add Related Posts With Thumbnail To Blogger


  1. Go to Blogger Dashboard > Design > Edit HTML.
  2. Download a copy of your template first.
  3. Tick "Expand Widget Templates" checkbox.
  4. Now search for below tag in your template


</head>

Just above it paste below code

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove -->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float: center;
text-transform: none;
height: 100%;
min-height: 100%;
padding-top: 5px;
padding-left: 5px;
font-size
}

#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: #6E6E6E;
color: #ffffff;
}
</style>
<script type='text/javascript'> var defaultnoimage=&quot;http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png&quot;; var maxresults=5; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;&quot;; </script>
<script src='http://code.helperblogger.com/hb-related-posts.js' type='text/javascript'/>>
<!-- remove -->
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Now search for below code in your template

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

Now place below code snippet just before of above line.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove -->
<b:if cond='data:blog.pageType == "item"'>
<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=7&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 alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='http://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a></b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Now save your template and go to your blog,you will watch this widget just below of your posts.

Customizations


  • To change the title of widget find the Related Posts in 2nd code.
  • To change the number of posts to display find this var maxresults=5; code in 2nd code.

Post a Comment

  1. hi ihave a problem when i enter these code after that post is not showing
    their just written
    "loading'
    plz help

    ReplyDelete
  2. I am not able to find the second code: i am using prozain blogger templete please help me.

    ReplyDelete
    Replies
    1. pls check "expand widget templates" check box then try again....

      Delete
  3. Thanks, works properly on my blog

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

    ReplyDelete
  5. same space as your blog has but only fitting 4 posts in a row , hoe to adjust size to fit 5 in a row

    ReplyDelete
    Replies
    1. According to CSS it's trying to take 100% of the parent element, so try to expand it a bit, or try to set #related-posts width to an exact size (600px or something).

      Delete
  6. idiot, you copied this from Blogger Plugins. Better change those backlinks in the widget to your own for making the people think that this widget is created by yours.

    ReplyDelete
    Replies
    1. Bro, first thing I want to clear that I am not copied from blogger plugins,I have reshared it on my blog with making some customizations and adding some CSS styles.Also I don't want to steal his credits and his work for making the scripts th'ats why I have not removed the backlinks.I have already added a link to his blog :)

      Delete
  7. Thanks a lot for explanation! Made it yesterday - works fine.
    But I have another type of an issue.

    My blog: http://kuklikicom.blogspot.be/
    It is bi-lingual.
    TO make life easy to the readers I preceede the text with a small icon with the corresponding flag.
    And the related posts widget picks up often this flag instead of nice pictures in the post.
    How to bypass this?

    Thanks a lot for any advices.
    Kukliki

    ReplyDelete
    Replies
    1. Solved it using div with hidden image :)

      Start knowing CSS :)

      Cheers
      Kukliki

      Delete
  8. wah... sangat berguna sekali bagi para blogger pemula indonesia.

    salam
    Yuli
    ^_^

    ReplyDelete
  9. Thanks so much for the code! I have a question...
    I have different "labels" some with several posts (I am a new blogger) and only one category(label) is showing the related posts. My other label that I have several posts under does not show the related posts on any of those posts. ???
    Maybe you could take a look at my site to see what I mean.
    DIY Tutorials are showing Related Posts....Before/After are not.

    thanks!

    ReplyDelete
  10. thanks, that's work in my blog
    kopost.blogspot.com

    ReplyDelete
  11. Please Visit My Blog :

    http://digitcrunch.blogspot.com/

    ReplyDelete
  12. Not working pls help, http://itech-hubz.blogspot.com/

    ReplyDelete
  13. The increased thumbnail size and little tweaks makes it perfect for my blog. Thanks a lot man

    ReplyDelete
  14. Hi!
    I used to use similar code on my blog and it worked perfectly fine, but then I don't know what happened, but it doesn't work anymore. Now I implemented your code and it still doesn't work. Can you please help me out. My blog is http://www.adaptacije-jurca.com/.

    ReplyDelete
  15. I tried it on my blog, but it is not working.
    My site is http://www.hdpeak.net

    Please help.

    ReplyDelete
  16. Thanks i believe that related post widget plays an important role in engaging the user and also to increase traffic.even those posts that did not get good amount of traffic gets clicked because of the same labels and hence hardwork of admins and writer gets rewarded.so i will say it is like a traffic booster.Related post widget for blogger

    ReplyDelete
  17. Can you please make one without thumbnails.

    ReplyDelete
  18. Not Working sir! please help its not showing! :(
    http://www.designsbee.com/

    ReplyDelete
  19. I can't see the given code in the step 2...So Can you please add this widget to my blog manually?...And send the edited template to my email address...Thanks for your great posts..

    ReplyDelete
    Replies
    1. My website : http://www.islaamthetruth.blogspot.in/

      Delete
  20. not working ..... on implementing my blog .. http://techtalkseekers.blogspot.in/

    ReplyDelete
  21. not working... on my blog
    http://www.instanceofjava.com/2014/09/oops-oops-concepts-are-rules-which-are.html

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

    ReplyDelete
  23. Hey there,
    First, thanks for great article. We built Limk as related posts widget for Blogger.
    Launched early in this year and the platform served over 500 million recommendations with hundreds of happy publishers.

    Key advantages of Limk:
    – Limk related posts widget is using the direct internal URLs, no redirection urls. Good for SEO juice.
    – Mobile ready, looks great on mobile phones and tablets
    – Stats panel gives all the data you need.
    – Optional monetization is available for publishers.

    Bloggers can give it a shot (it's free by the way):
    https://app.limk.com/auth/signup?utm_source=register

    Would love to help anyone to try our platform: ozer@limk.com

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top