Related Posts Widget for Blogger / Blogspot

Now here is wonderful hack for displaying links to related posts beneath each of your blog posts. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Steps for Implementation:

Go to Layout >Edit HTML in your Blogger Dashboard.

Back up your existing Template before making any changes!

Make sure to check the "Expand Widget Templates" box

Search for the </head> tag.

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/AVvXsEgUICN96HA18NHu50Ao65Hs_vUniDgaR2eTw9YsHUj6T4BVQpwFPy6WPwUYj9J6mQz0sLDCtaa4eXdeO95s3HyiyRRl4xk1m9iFWpIAM7imvWZYrtrDBkKZvUIdtg9-mVa4dG_78OSkF6E/") 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>

or

<data:post.body>

  

Now 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're done!

Customization

• 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.

 It will Look Like this max-results=5

Stay Connected With All The Updates of Your favorite Topic, News, Tips & Tricks, Latest Gadgets, Latest Price, Latest Templates, Widgets, Blogging Tips and Many More Cool Stuff like this. Just enter your E-mail Below. 

You can also find us on various other Networking sites like Facebook, Twitter, Google Buzz etc.

To Get SMS Updates on the Move Click Here.

      

Enter Your E-mail Address