Clean Add Related Posts Widget To Blogger With Thumbnails

Clean Add Related Posts Widget To Blogger With Thumbnails 

Displaying related posts is a smart way for keeping your site visitors around and with thumbnails it is even smarter!This widgets is one of most popular way to increase to show related post to blogger.After you will add this widget it will start above comment section.The related articles are chosen from other posts in that same category/label/tag.Related post widget help you to show visitor your past and previous stories.It also help to increase page and make readers engaged on reading your blog post.

Features

• Responsive Design
• Fast Loading And SEO Friendly.
• Shows Post of  same category/label/tag.
• Blog Post Title with Thumbnail.
• Easy to Install.

Related Widget

• LinkWithin Related Posts Widget With Thumbnail For Blogger
• Recommended For You Slide out/Popup Related Post Widget For Blogger

Steps adding 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/AVvXsEgzLxG3yctLC7i3APXatLDp1JgeZHB3i6eg9XZY_qrrePkHAm-cMk6WSCZyDF0YXkPdO9w-UAnCew5a5PjjvcGWdSKwesEmWZUgYTYhU7kdZNqn5PF_oYz-SzcJUgq_eUakKRJBdeyhonaS/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:
- to change the default picture, replace the URL in blue with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code: ( Skip 1st found - code will be paste after 2nd search )

    <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/AVvXsEgu9jAS76vCfVsERfVreXl1TGvZ8x58OIwrVuJDEQTy88A9Wco-BBxzW2No4Wsb10C4RE85aLjwNWIM2Vu05rUfSB3G1Z6sUOdoqwQIDyAdup_7unt1Qwscgr4a39y4OsQM8VZ0RIkdo7du/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 violet.

Step 7. Save the Template

Hurry Previous Code Modified With Above Now its Tested by S2free Team Working 100% Fine.

Enjoy :)

Clean Add Related Posts Widget To Blogger With Thumbnails
Last Reviewed by S2Free Blog Team on June 10 2013
Rating: 4.5