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