How To Put A Related Posts With Images Gadget Under Your Blog Posts

One of the most popular related posts gadgets for Blogger users is the related posts with thumbnails provided by linkwithin.The easy installation and clean look of the gadget makes it an easy choice for most bloggers.However the linkwithin gadget does not suit everyone and does not work with every template for example the template I'm currently using will not display that gadget properly.If your having similar issues with the linkwithin gadget don't worry, in this post i will show you how to use an almost identical gadget that is coded to work well for all blogger templates.

Note - We have recently published a new improved version : New Related Posts With Thumbnails Blogger.


If your not familiar with the related posts with thumbnails gadgets lets look at how it works, whats displayed and were it appears.The gadget will be located below all your posts and will list a number of posts (The number is specified by you) that are related to the post it appears under.In order to display related posts the gadget uses the labels used in each post and lists posts using the same labels.Along with the post title this gadget displays a thumbnail (Small version of an image you used in the post) and a short description of the post although this is optional.


 

How To Add The Recent Posts With Thumbnails To Your Blog


Step 1. In your dashboard click 'Layout' > 'Edit Html' > Tick the 'expand widget templates' box

Step 2. In your templates Html find the following piece of code :
(Click Ctrl and F for a search bar to help find the code - More Info)

</head>

Step 3. Place the following code Directly Above/Before </head>

<script src='http://www.sigmirror.com/files/49136_fib7l/relatedpost.txt' type='text/javascript'/>

<!--http://mysecrets2012.blogspot.com/-->
<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>
<!--http://mysecrets2012.blogspot.com/-->

Step 4. Find the following piece of code in your blogs html :

<data:post.body/>

If <data:post.body/> appears in your template twice use the second occurrence.

Step 5. Place the following piece of code Directly Below / Under <data:post.body/>

<!-- http://mysecrets2012.blogspot.com/-->
<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><a href='http://www.spiceupyourblog.com' target='_blank'><small>Get This Gadget</small></a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;Related Posts&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- http://mysecrets2012.blogspot.com/-->

Note : You can change the amount of related posts to be displayed by changing the maxresults=6 as highlighted above in red.
You can change the title above the gadget by changing the text Related Posts highlighted in red above.

Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.
If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow - when you comment here it helps Your Blogs Google rank !

This is a nice gadget that will keep people on your blog looking through your archive, a vital factor in building a following for your blog.