How To Add Related Posts Widget To Blogger With Thumbnails

Hello Everyone, welcome back to TricksDroid. You all know what is the benefit of adding related posts at the end of the post. You may have seen the related posts with the thumbnails or pictures on many blog and if you also wish to place the same for your one,this post is made for you. With this trick you can related posts to your blogger blog below every post so that yours visitors will get engaged for hours and increase your blogs pageviews. Here are the steps to follow.

"Also Read: Add Simple Related Posts To Blogger Without Thumbnails"

Steps to add the Related Posts Widget to Blogger/Blogspot:

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML.


Step 2. Check the "Expand widgets template" box.


Step 3. Search (CTRL + F) for this piece of code:

</head>

Step 4. 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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXA44PfZ4rjXEI6zCsoyU0iy8tINfoBCDxMZh5MABV3DaY5Bf_CjSJ7X0P-_feycXbwJWzH6XhTBCmMfGq3bRo6TeKLkjp0mRcUXhHr5-6oiPFMkuNlOcP3guj76L1ir6A1Gqa5HyhHbiF/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Note:

- Remove code in green to display related posts on homepage too.
- For displaying more than 5 posts, replace 5 value from "var maxresults=5;"

Step 5. Now find the following code:

<div class='post-footer'>

Step 6. 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://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi9MpiSGO_LgLkM8fXmpOIflmuRMNi8zOvNAfm3i7uiw7wNdpmskHWBWn7r2K74lVBna4qOMXwJ2mlS2WR2sBGluZda1aU6ihnuJPXu8cTbB-YVQ46_BoJSbxAY-U6Xn4yyYGWlp3fuC0J/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Note:

- Remove code in green to show related posts on homepage too.
- Change the 6 value from max-results=6 with the number of posts you want to be displayed.

Step 7. Save the Template

That's it you have successfully added related posts widget to your bloggers blog. For more such tricks keep visiting TricksDroid.com 
For any help, question or suggestion leave a comment below.

Content Worth A Share ?

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Dig
• LinkedIn

Written by Unknown

Satyam Bora Is 18 Years Old Boy Addicted To Blogging And Technology.He Is A Part Time Blogger And Student Of Civil Engineering. This Guy Is Always Here To Help You :)