How to add related posts widget with thumbnails in Blogger ?

Adding related posts widget with thumbnails in blogger help your website reader to see at a glance of your related post, without moving the existing blog post. You can easily add this related posts with thumbnails in your blogger.

Related posts widget with thumbnails in blogger

To add this related post with thumbnails follow this :

Step 1: First login to your blogger account and navigate to Design/Layout > Edit HTML and check the "Expand Widget Templates" checkbox.

Step 2: Now find </head>

Step 3: Replace </head> with the below 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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>


Step 4: Now find the below code

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

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

Step 5: Put the given code below after the above one

<!-- Related Posts with Thumbnails Code by emdadblog 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-->


Note
: You can adjust the maximum number of related posts being displayed by editing this line in the code :

var maxresultes=5;

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

var relatedposttitle="Related Posts"

Step 6: Now save the template

12 comments:

  1. Thanks for your post. it's so charming for me :)

    ReplyDelete
  2. It's really excellent tips but how to make Related post text left side of my blog? when i used this tips Related post text is right side appears on my blog and how to change color of Related post text? pls help me .. thanks..

    ReplyDelete
  3. @Anonymous

    Thanks for your asking. To change related post text in left side just simply change the

    float:center; to float:left;

    and to change the text color simply change

    color:black; to color:yourcolor;

    in first part of coding

    ReplyDelete
  4. I followed the above steps and the template was saved but nothing shows on my blog. Do I need to give link of my blog somewhere in the code?

    Please suggest.

    ReplyDelete
  5. @Surabhi Surendra

    You don't need to add your blog url. Could you tell me what did you do actually and it will be helpful for me to solve this problem.

    ReplyDelete
  6. I looked for head and replaced it with your code. Then I looked for div class='post-footer-line post-footer-line-1' and pasted your code below it.

    But I found div class='post-footer-line post-footer-line-1' at two places.

    Actually, at both the places.. nearest code is the same and I am not good at coding so I cant tell you whats the difference between the two places where this code is written.

    But I tried to paste your second piece of code at both the places still no result. Please suggest.

    ReplyDelete
  7. @Surabhi Surendra

    If you have no problem I can help you to solve this problem through teamviewer live.

    ReplyDelete
  8. I live in Andamans.. and net is very poor here. Thus I cant download teamviewer. Is there any other way?

    Shall I send you the entire code on notepad on your email?

    ReplyDelete
  9. @Surabhi Surendra Yeah it will be helpful for me if you do that. I will send you back the code with details.

    Thanks

    ReplyDelete
  10. @Surabhi Surendra you can send me your file at freelancer@homecomputerservice.co.uk

    Thanks

    ReplyDelete

Let us know, what you think about this blog