Create a related Posts Gadget with thumbnails for blogger.

Have you ever wanted to add a gadget to your blog that will keep your readers really busy reading your posts?

Yes, I know you wanted!! That is why you are here and reading this J

OKKK……no problem….we all want our visitors to read as much as content we write. The best way to do this is by adding a relative posts gadget to your blog.

I am showing you a way to create your own gadget to show similar posts after each of your blog posts. And remember…. this will work with Blogger ONLY!!!!


Here we are just adding some codes to our blogger template. So it is very important that we should always backup out template before we do any changes. In case of any mistakes happened by you and went anything wrong, you can just replace your template. So you don’t want to worry too much.

First let’s see how you can backup your blogger template.

So go on and log into your blogger account. Select your blog. Then go to template menu option in your right hand side menu.

After that you will see a button in the upper right corner of your page. (See the image below)

After you click on it, you can use the “Download full template” button to download your template (it will be xml file).

So once you have taken the backup, you can move forward with editing your HTML.

Now click on Edit Html button as shown in the above image.

Then press “ctrl + F” (to open find menu), and type “</head>” (without quote marks) in the “find” field and press enter to locate it in your HTML code.

After that, paste the following piece of code just above the </html> tag you found inside your code.

<!--Related Posts widget for blogger Start-->
<!-- remove --><b:ifcond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
#related-posts a{
border-right: 1px dotted #DDDDDD;
#related-posts a:hover{

<script type='text/javascript'>
var defaultnoimage=&quot;;;

<script src='' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts widget for blogger End-->

Now find for the below piece of code,

“<div class='post-footer'>”

Then paste the below code just above it.

<!-- Related Posts widget for blogger Start-->
<!-- remove --><b:ifcond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:ifcond='data:label.isLast != &quot;true&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + + &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'>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:ifcond='data:blog.url == data:blog.homepageUrl'><b:ifcond='data:post.isFirstPost'>
<!-- Related Posts widget for blogger End-->

If you found more than one “<div class='post-footer'>” in your code, you will have to the paste the above code for each of them.

I hope you will try this out and let me know your comments.

If you need any help for the above, please feel free to send me an email.


Post a Comment