HOW TO ADD AUTOMATED RELATED POSTS TO BLOGGER

Here we are going to see how to create Related post widgets in HTML format.STEPS TO CONFIGURE 'RELATED POSTS' WIDGET ON YOUR BLOG

STEP 1: Go to dashboard==> Template==>Edit HTML (See the picture below)

STEP 2: Click anywhere on the open box containing HTML codes, hit Ctrl + F on your keyboard. This will bring out a search bar.

STEP 3: Input the code </head> and press  Enter on your keyboard to search.

STEP 4: Place the following code above the </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:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#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;-webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#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-->

 Note: You can change the height of the Thumbnail by adjusting the 100px

 Remove the the codes in Violet if you want the Related Widget to also appear on the Home Page

 Also adjust the color and sizes on the one in blue above.

STEP 5: Find the code  <div class='post-footer'> 

 Above it copy and past the following code below

<!-- 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/AVvXsEh60f6Kxj3QLPjePxZ1RrnoHgtfgeQ0N_pGjBWiZVuNilB6ZneqKt-_bjpv22SxmuQGHSF1fw0CaTmxP4jOKt6usMqL9GMuF82AdcGsDKTeDGjD3tHl6JwIx-Kkcyfbu0R0_Swjh_s5VjyU/s1600/best+blogger+tips.png'/></a>

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

NOTE: Maxresults=5 are the maximum number of posts  you want to display, so you can change that
            Remove the the codes in Violet if you want the Related Widget to also appear on the Home Page

This should do the job, but if you didnt still see the Related Posts then do the following:

Search for </b:includable> [Search with the same Cntrl +F] . Place the following code above it

<b:includable id='postQuickEdit' var='post'>

That's all.
Save the template.