Its is very easy to show related posts links in your blogger blog. You just have to enter some few xhtml words into your blog provided below and you are done.
Before start the process of editing to your blog anytime please keep in mind to save your blog's 'Full Template Download'. After downloading the blogger blog full template then start to see the magic of relates posts in your blog.
To start this please follow the following steps:
Steps for the Process:
1. Go to Layout >Edit HTML in your Blogger Dashboard.
2. Back up your existing Template before making any changes!
3. Make sure to check the "Expand Widget Templates" box.
4. Search for the </head> tag.
5. Add the following code just before the </head> tag.
<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-82Ajwe5EQaAV7R7Y1wq4a5SKBrWxMt9XrU-yeuHxWM8FWBPxzJgPnoCCAYBRqaMbfhgbaxi6-h1l4v1pCEC6CtzhI89b0A6ECNX57fZ7gbAOlBzkdNWgiwoGflp_V4S9lHddnumbFfc/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://bsaves.com/scripts/Related_posts_hack.js' type='text/javascript'/>
6. Now search for
<data:post.body/>. In some of the templates this code may look like this
<div class='post-body>or
<data:post.body/>. So check out for all the three codes.
7. Add the following code just beneath the code you just searched for.
<b:if cond='data:blog.pageType == "item"'><div id="related-posts"><font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&max-results=5"' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if>
Now save your template and you have done all! To confirm your workings you should see the preview and click on any one post and after opening of this post you can see what you have done.
8. If you like to show more or less then 5 posts links then please do the following step.
Go to your blogger layout. click on edit html link and check on expand your widget, then search after pressing 'ctrl f '. Search for the code 'max-results=5' and change the value of 5 to any number you want and save the template.
