Method to Set Related Posts Widget in Your Site or Blogger

An easy way to make your visitors stay long in the area is to add related posts at the end of each post in your blog. This increases the number of page views and who knows, it may increase the page ranking of your blog one day. There are many websites that provide widgets to display the "Related Posts" at the end of each page.

This message is the easiest method to implement the above objectives by inserting a piece of code in the template. The code was personally confirmed, and you can see the end of my blog post for an example. It works fine with both IE and Mozilla Firefox, because I see many people complaining that some HTML tags work well in Mozilla, but not with IE.

Now here is wonderful hack for displaying links to related posts beneath each of your blog posts.

Tips or Steps to Add Related Posts Widget to Your Blog or Site.

• 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/AVvXsEhP3JQQZAN82hTa_lXVKzOyj4PJGCDHJn5_TQqisRS6x9qdK8zCLgjA2spIC5K6wZ8ttLyAMk-lkTtNqDEWz_uy6jieh1BYbBMSY9-UedL3K6TugYjb2WqjYPojpw7fY1_yVL833t6cZ_o/") 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/>

• 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 != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' 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!

Other Changes

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/8/9/10...) and change the number "7/8/9/10....." to any desired number.


Preview of Related Posts Links:

View More: http://widgetsforfree.blogspot.com\