Contextual Related Posts is the best extra tool and easiest way to add to your Blogger blog for free. it will help you to get more post view by motivating your visitors to click another article when you are on any post. The Blogger related posts widget for the blogger is displaying similar articles that mostly posted in the same category and it display both thumbnail post and post title.
How to Add Blogger Related Posts Widget
In this below tutorial will guide you to add contextual related posts to your blogger blog.Step 1: Login to your Blogger blogger.com
Step 2: Please direct to your blogger dashboard menu and click Template > Edit HTML.
Step 3: Now you are in the HTML code area of your blog. Now search for the </head> tag and just below it add this CSS code.
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{ float:left;width:auto;margin-bottom: 30px;background:#fff; margin: 0 4px 10px 0; float: left;}
#related-posts a{ border-right: 0px dotted #eaeaea;box-shadow: 0 0 4px rgba(180, 180, 180, 0.55);float: left;position: relative;width: 190px;height: 145px;border-radius: 3px;}
#related-posts a:hover{background: #fbfbfb;}
#related-posts h2{ margin-top: 10px;margin-bottom: 10px;border-bottom: 2px dotted #dedede;padding: 0px;color: #999999;text-transform: uppercase;}
#related-posts .related_img {margin:4px;border:0px solid #f2f2f2;width:181px;height:85px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;margin-bottom: 10px;}
#related-title { color: #222;font-size: 13px;text-align: center;padding: 0 1px;line-height: 18px;text-shadow: 0 2px 2px #fff;height: auto;width: 190px;}
#related-posts .related_img:hover{ border:0px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7;}</style>
<script src='http://demos.blogsupporter.com/demo-script/related-posts-widget.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Step 4: It is time to add the HTML code in your blogger blog to display the related post widget. Now search for <div class='post-footer'> tag, you will see twice then add below HTML code below it.
<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.blogsupporter.com'><img alt='Blog Supporter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJ8i9RiGL9E7kwlzXWGKCsdze3SXptvjOutlnVuMi3BrirW6p2Q_aDbWzsg-ZN5-uIQ1GSnFrPvQJjKBtyUR9diIvFbo293sMsDqGhBQTP545fqqnmtHDe1WehEJ88OnPhYxEqZMwhbvz/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Step 5: Now you are almost done. Just review from the step three and four to make use that your job completely right. The do not forget to press Save Template button.
This is an important notice: this plugin allows for Blogger URL that uses HTTP only. The HTTPS Protocol will not allow using (No work) because it will be displayed at all.
