Displaying Related Posts below each post on your blog are so importance.
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.
Thumbnail and the Tittle have been resized, so you can display more posts.
Related Post 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.
Live Demo - You can see this Gadget below all posts on my 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 code
</head>Step 3. Copy And Paste The Following Code Directly Above / Before
</head><!--Start Related Posts Script -->
<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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjB0Edu_pzyXpVhnpBQpgoMdcldb0-Il4o_aP9UxeyJvvwmCrTGkd1YXdiS3OIgEAF7hLf_0UN2DMhsr00hMYrc-aUaKR-zHf1YI-TrkNSOuIQLTLGhFDj6B5pXD8tmY_x0RxhOXO7QTDn/s1600/No+Image.jpg";
var maxresults=10;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post End-->
Note - Change
maxresults=10 in red above to the number of posts you want displayed.
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
<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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><br/><a href='http://masihpopuler.blogspot.com/2013/01/how-to-add-new-blogger-related-posts-to.html' target='_blank'><font color='#ccc' size='small'>Best Blogger Gadgets</font></a><div style='clear:both'/>
</b:if>
<!-- end related posts-->
Step 6. Now Save Templates
