Every blogger is interested to produce the content along with its related content to stay the viewers in their blog or website. Some of the blogger templates automatically gives the Related posts. But some templates does't give you this facility. In such situation we need to add or change the existed template to get the Related posts manually.
Step 2: Find the following code in the template
Step 3: Just copy and paste the following code above/below </head> tag
The following are the 3 methods to add Related posts into your each blogger post.
Step 1: Login to Blogger account >> Template >> Edit HTML
METHOD I
Step 1: Login to Blogger account >> Template >> Edit HTML
Step 2: Find the following code in the template
</head>
Step 3: Just copy and paste the following code above/below </head> tag
<!--Related Posts with thumbnails code begin-->
<b:if cond='data:blog.pageType == "item"'>
<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:2px 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: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:100px; height: 40px;}
#related-posts .related_img:hover{border:2px 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' />
</b:if> <!--remove it to display Related posts in both home page and posts-->
<!--Related Posts with thumbnails code End-->
Step 4: Find the below code.
Step 5: Paste following code just above <div class='post-footer'> tag
Step 6: Now Save the template, you will get the related posts widget and enjoy posting.....
<div class='post-footer'>
Step 5: Paste following code just above <div class='post-footer'> tag
<!-- 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>
<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:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Step 6: Now Save the template, you will get the related posts widget and enjoy posting.....
>> METHOD II
>> METHOD III
ConversionConversion EmoticonEmoticon