Breaking News

Related Posts Widget for Blogger with Thumbnails


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

 

Add The new Blogger Related Posts To Your Blog

Just visit Linkwithin
or
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)
</head>


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




<!--Start Related Posts Script From http://www.music2radio.blogspot.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/AVvXsEhyX8Ys6nLOpv4uBPzkbfqXu1a6wNExZgKiCHDidyoZrFZHDk31IiObIP_Xdzkgy4oIkefLEA5sOtU-UjqAri2ee_ThpmVqju2w-HL0TpLmfDxJ8CahMSdo0it6JX1WGeIoGBGaSDdD7GcH/s1600/No+Image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://spiceupyourblogextras.googlecode.com/files/RelatedPoststhumb3.txt' type='text/javascript'/>
</b:if>
<!--End Related Post From http://www.music2radio.blogspot.com-->




Note - Change maxresults=5 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.


 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)
<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-->
<a href='http://www.bestbloggertemplates.net'><img alt='Best Blogger Templates' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCYebaQueKSt2zaADAjtIHVewL34nGNv6M9EtVduR98QVT86d03G2ZDw2BtbvstmXXbsSCtR4RGKpY8bbUfjz_XXlNS20rXeblW2h672icgJk6CjRxxBFUCVe37CDg7N-WuqNTM9BMzg77/s1600/best+blogger+tips.png'/></a><a href='http://www.music2radio.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCYebaQueKSt2zaADAjtIHVewL34nGNv6M9EtVduR98QVT86d03G2ZDw2BtbvstmXXbsSCtR4RGKpY8bbUfjz_XXlNS20rXeblW2h672icgJk6CjRxxBFUCVe37CDg7N-WuqNTM9BMzg77/s1600/best+blogger+tips.png'/></a><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://music2radio.blogspot.com/2011/11/related-posts-widget-for-blogger-with.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.

If you face any problem in this post please let me know your problem. To inform your problem you can leave a comment below. And if you like my post please click the Facebook like button or spread this post by clicking the Twitter, Facebook etc. icons below. Because, it will be a great support for me.

No comments