Computer & CSS Tricks: 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 &gt; Edit HTML and check the "Expand Widget Templates" checkbox.

Step 2: Now find </head>

Step 3: Replace </head> with the below code

<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;
}
#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;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

</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

<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 != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

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

11 comments:

Ariful Islam ShaonJuly 7, 2010 at 5:39 AM
Thanks for your post. it's so charming for me :)
AnonymousApril 13, 2011 at 12:36 PM
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..
emdadApril 13, 2011 at 2:50 PM
@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
UnknownSeptember 29, 2011 at 8:38 AM
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.
emdadSeptember 29, 2011 at 10:15 AM
@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.
UnknownSeptember 29, 2011 at 11:28 AM
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.
emdadekhSeptember 29, 2011 at 11:38 AM
@Surabhi Surendra

If you have no problem I can help you to solve this problem through teamviewer live.
UnknownSeptember 29, 2011 at 11:51 AM
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?
emdadekhSeptember 29, 2011 at 11:56 AM
@Surabhi Surendra Yeah it will be helpful for me if you do that. I will send you back the code with details.

Thanks
UnknownSeptember 29, 2011 at 11:58 AM
Whats your email id?
emdadekhSeptember 29, 2011 at 12:02 PM
@Surabhi Surendra you can send me your file at freelancer@homecomputerservice.co.uk

Thanks

Let us know, what you think about this blog