How To Add Related Posts Widget To Blogger with Thumbnails ? Manually

Every Blogger Want To Get a more Traffic To Your Blog But They Can't Do It. I Research On that "Add Related Post Widgets" is Very Good way to Increase Page Views. Because When Visitor Read Your Post in the last he See Related Post May 5 (According to You). In These Five Post There is Some Useful Post For Visitor So He Clicked On It.

Many Blogger Use LinkWithin Service To Add Related Post Widget that Sometimes Not Show in Some Templates. So I Recommended You to Add Related Post Widget Manually. It is Best Way To Add This Widget.

Lets Start Go To Your Blogger Dashboard > Template > Edit HTML

Now Its Time To Edit and Add Code into Your Template. Press CTRL+F and Search For This Code </head> and Manually Add the Below Code Just Above it.

<!--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:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;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;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

Now After This Again Press CTRL+F and Search For This Below Code
<div class='post-footer'> 

NOTE : There are Two or Three Same Code Like this So When You Find First Just Leave it When You Find Second Stop and Paste the Below Code Above it and Save Your Template.

<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
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://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3o0b5Zd-MOy386pYOg8jC9woZr5vlQ2-XqcClytXcgPPUJggUSkDWFJC_k3XCyJHAxMSjYj5d1uX3kSYe_y7tqxe1J7SL50e-z-pOPCXIuXUJdwdv7TW9mJyDldEqG_XAAAI9hgwajS_3/s1600/best+blogger+tips.png'/></a>

</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

According To Me This is the best way to add "Related Post Widget" Instead of Using Services Like Linkwithin that Redirect Your Post With Their Own Link.

The Main Post Credits Goes To Help Blogger.