New Blogger Related Posts With Thumbnails Below All Posts

We all know the importance of Displaying Related Posts below each post on your blog.Displaying a list of Related Posts not only keeps readers on your blog clicking through your archive but they are also crawled by search engines.But to get readers clicking through the related posts you need them to be eye catching and that's where the related posts with thumbnails works so well.The related posts with thumbnails lists a selected number of posts and also grabs an image from each posts to display.The gadget we have in this post is similar to the popular Link Within Related posts but with some great extra features and options.

I have re sized the thumbnail and title so you can display more posts.Link Within Limits you to 5 posts with this gadget you can show as many as you like.This related posts gadget displays related posts using the labels, so it will list posts with the same labels as the posts it is below.You can add some extra customizations to this gadget and i will list them below the tutorial.

Screenshot  



Live Demo - You can see this gadget below all posts on this blog.

Add The new Blogger Related Posts To Your Blog

Step 1. In your Blogger Dashboard Click > Design > Edit Html > Tick The Expand Widget Templates Box







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

</head>

Step 3. Copy And Paste The Following Code Directly Above / Before </head>

<!--Start Related Posts Script From http://www.spiceupyourblog.com-->
<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 type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgseKoCjZfvacNASs5QjOfb4iU3TSnZbPdSK86vYmdpq-C46fWLybFCFfLm7KpoOHIttGjVNnJPpAIWu4w9croYVJHCgMI5cA4ng2GjItqvt_wuJA7fL9IsxRUUWZfhUbx272CgOP33vjqT/s1600/No+Image.jpg&quot;;

var maxresults=7;

var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post From http://www.spiceupyourblog.com-->

Note - Change maxresults=7 in red above to the number of posts you want displayed.If the script can not find enough posts with the same label it will display as many as it finds.If you are comfortable making changes you can change the colors using a Hex Color Chart.

 Note 2 - You can change the title above the gadget, it is currently Related Posts.Simply Change the text In blue above.

Step 4. Now Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

<div class='post-footer'>

Note - If you cant find that find and use <data:post.body/>

Step 5. Copy And Paste The Following Code Directly Below Under <div class='post-footer'>

<!-- start related posts-->
<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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><br/><a href='http://www.spiceupyourblog.com/2010/12/related-posts-thumbnails-below-posts.html' target='_blank'><font color='#ccc' size='small'>Best Blogger Gadgets</font></a><div style='clear:both'/>
</b:if> 
<!-- end related posts-->

Everything in the right place ? Cool save your template and check out your Blogger Related Posts With Thumbnails.Make sure to check out more of our Blogger Gadgets and Design Tips.

Leave Your Comments, Views And Questions Below.