Monday

How To Add Related Posts Widget to Blogger / Blogspot

Posted By: Arin Dey - 10:20 PM

Share

& Comment

This post will help you to add related posts widget to your blogger posts to display links of related topics/posts below each of your blog posts. This is a nice tip for which a lot of  your site viewers will stay on your site to read some other topics too related to the present topic. This trick will generate interest to the viewers to keep reading your blog.
How To Add Related Posts Widget to Blogger

Note : Assuming you are using new Blogger interface.

Here we go with process:

1. Go to Template > Edit HTML in your Blogger Dashboard.

2. Take a back up of your existing Template before making any changes. 

3. Check the "Expand Widget Templates" box. 

4. Search for the tag.

5. Add the following code just before the 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("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") 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://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>
Now search for <data:post.body/>. In some of the templates this code may look like this
<div class='post-body>
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/>
7. Add the following code just below 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>
8. Now save your Template and we've done.

You can CUSTOMIZE in order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number "5" to any desired number.
max-results=5           
So we have done adding a widget for related posts.

Copyright © 2016. Poketors - Technology BlogThe content of this website is copyrighted and may not be reproduced on other websites. | Email us at : admin@poketors.com.