Add Related Posts To Every Blogger Post

After  a long time research on “How To Add Related Posts To Every Blogger Post” I make a best and easy way to add related post widget in each and every post of blogger. During my creation of first blogger template I passed a lot of difficult phases to complete this Pro Magazine Blogger Template. I want to share my experience about how to use blogger. I search a lot of sites for add related posts and recent post etc. Some blogs are having good information but some given information without research, they only copy paste each other code to their blog. Now I tell you whatever in my blog about blogger it is practically use by me and its very very easy to use without any error. So start first step to add related posts widget below blogger post.

First Step:

1. Log in into Blogger
2. Click Layout
3. Click Edit HTML Tab
4. Click Download Full Template.
5. Click on Expand Widget Templates checkbox.

6. Search for the ]]></b:skin> code.
7. Copy and Paste the following code right above ]]></b:skin>

#related-posts {
}
#related-posts h3 {
font-family:arial,verdana;
margin-top:15px;
padding-bottom:3px;
letter-spacing:-0.006em;
}

8. Now find this code in template <data:post.body/>

<div class=’post-body entry-content’>
<data:post.body/>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

9. Copy and paste this code right under the <data:post.body/>

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’related-posts’>
<h3>Related Posts :</h3>
<b:loop values=’data:post.labels’ var=’label’><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script src=’http://theblogtemplates.com/scripts/mv_Related_posts_hack.js’ type=’text/javascript’/>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=4&quot;’ type=’text/javascript’/></b:if></b:loop>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>

10. Click On Save Template and see result.
11. Checkout the live demo in action Click Here

The above steps are for those who use the classic template and does not use read more feature. If you use a template that has been Read More Hack. You should follow these steps.

First Step:

1. Log in into Blogger
2. Click Layout
3. Click Edit HTML Tab
4. Click Download Full Template.
5. Click on Expand Widget Templates checkbox.

6. Search for the ]]></b:skin> code.
7. Copy and Paste the following code right above ]]></b:skin> This step for those who do not enter this code before.

#related-posts {
}
#related-posts h3 {
font-family:arial,verdana;
margin-top:15px;
padding-bottom:3px;
letter-spacing:-0.006em;
}

8. Now find this code in template <data:post.body/>

<b:if cond=’data:blog.pageType == “item”‘>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>

<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href=’data:post.url’><strong>Read more…</strong></a></p>
</b:if>

9. Copy and paste this code right under the <data:post.body/>

<div id=’related-posts’>
<h3>Related Posts :</h3>
<b:loop values=’data:post.labels’ var=’label’><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script src=’http://theblogtemplates.com/scripts/mv_Related_posts_hack.js’ type=’text/javascript’/>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=4&quot;’ type=’text/javascript’/></b:if></b:loop>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>

10. Click on Save Template
11. Visit Live Demo Click Here