How To Add Related Posts Widget With Thumbnails to Blogger/Blogspot

Now here is a wonderful pol for displaying concomitant posts beneath apiece of your blog posts, along with thumbnails. The accompanying articles are chosen from other posts in that equal category/label/tag. With this edit more of your readers will rest on your place for person periods of moment when they see kin posts of powerfulness.

Related post with thumbnails

 

How To Add Related Posts Widget to Blogger/Blogspot

  • Go To Blogger Dashboard >> Template >>Edit HTML;
  • Check the “Expand widgets template” box;
  • Step 3. Search (CTRL + F) for this piece of code:
</head>

Copy and paste the below code just before/above </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/
UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg
&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://docs.google.com/file/d/
0B7Q3JxFQN9Y2SlNOWS1BMUtRUGM/edit' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

 Note:

– to change the default picture, replace the URL in pink with your own
– for displaying more than 5 posts, replace 5 value from “var maxresults=5;”
– remove the code in blue if you want the related posts to be displayed in homepage too

Now find the following code:

<div class='post-footer'>

  And just above it, copy and paste the below code:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href="http://bloggers-hero.blogspot.com/"><img alt='Blogger Tips and Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Note:

– change the 6 value from max-results=6 with the number of posts you want to be displayed.
– If you want the related posts to be displayed on homepage too, remove the code in blue.

 

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!

Comments

  1. G SRINIVAS says:

    Nice Widget for bloggers….Increase the page visits
    Indyarockshub

Speak Your Mind

*


*