Adding "Related Posts" Hack To Blogger Blogs

Few days ago, I came across a really nice post that explained to me how I could add a related posts hack to my blog. The related posts hack is a really nice and useful hack that lists a bunch of links to your other posts after each post. As you can see, there is a list of links to my other posts below this post that are related to blogging. In this post, I will show you how to modify you blog HTML code to enable the hack!

Different types of related posts hacks

Wordpress some really nice extra features and plugins and one of them is the related posts plugin. However, there is nothing like it at Blogger. But bloggers have found different ways to fix the problem. There are several different types of related posts hack that you can add to your blog. One of the most commone ones is the hack that lists the related posts by categorizing thema according to the labels. However, it looks really mess. The second way is the one that I am currently using on this blog. The hack considers your labels for the post and then list related posts links without categorizing them.

How to add related posts hacks

Before we begin to play around with the related posts hack, I would suggest that you save your template.

1. Go to your blog's HTML code and paste the code listed below just above <"/html> (delete the space after <) and then save your template.
   
   
   <style><br /><br />#related-posts {<br />float : left;<br />width : 540px;<br />margin-top:20px;<br />margin-left : 5px;<br />margin-bottom:20px;<br />font : 11px Verdana;<br />margin-bottom:10px;<br />}<br />#related-posts .widget {<br />list-style-type : none;<br />margin : 5px 0 5px 0;<br />padding : 0;<br />}<br />#related-posts .widget h2, #related-posts h2 {<br />color : #940f04;<br />font-size : 20px;<br />font-weight : normal;<br />margin : 5px 7px 0;<br />padding : 0 0 5px;<br />}<br />#related-posts a {<br />color : #054474;<br />font-size : 11px;<br />text-decoration : none;<br />}<br />#related-posts a:hover {<br />color : #054474;<br />text-decoration : none;<br />}<br />#related-posts ul {<br />border : medium none;<br />margin : 10px;<br />padding : 0;<br />}<br />#related-posts ul li {<br />display : block;<br />background : url("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif") no-repeat 0 0;<br />margin : 0;<br />padding-top : 0;<br />padding-right : 0;<br />padding-bottom : 1px;<br />padding-left : 16px;<br />margin-bottom : 5px;<br />line-height : 2em;<br />border-bottom:1px dotted #cccccc;<br />}<br /><br /></style><br /><script src="'http://technotrixdebajyoti.googlepages.com/RelatedPostsByRealtrix.co.cc.js'" type="'text/javascript'/">


2. Then Expand Widget Template and paste the code listed below just below <"p><"data:post.body/><"/p>. (Delete the space after <)
   
   

<span style=" color: rgb(0, 102, 102);"><b:if cond="'data:blog.pageType"><br /><div id="related-posts"><br /><span><b>Related Posts : </b></span><span style="color:'#FFFFFF';"><b:loop values="'data:post.labels'" var="'label'"><data:label.name/><b:if cond="'data:label.isLast">,</b:if><b:if cond="'data:blog.pageType"></span><span style=" color: rgb(0, 102, 102);"><br /><br /></span><span style="color: rgb(0, 0, 0); "><span style="color: rgb(0, 102, 102);"><script src="'" alt="json-in-script&callback=" results="5" type="'text/javascript'/"></b:if></b:loop></span><span style="color: rgb(0, 102, 102);"> </span></span></span><span style="color: rgb(0, 102, 102); "><br /><script type="'text/javascript'"> removeRelatedDuplicates(); printRelatedLabels();</span><span style=" color: rgb(0, 102, 102);"><br /></span> <span style="color: rgb(0, 102, 102); "></script><br /></div></b:if></span></span>

That's it! Save your template and you are done!

Benefits of using related posts hack

This great hack has several benefits.

1. Drive traffic to your inner pages - your visitors will now be able to find more content on your blog easily after reading your posts. This will also help you drive traffic to your old posts.
2. Internal linking - It is very important to add links to your old posts in your news posts to improve your ranking (PageRank). However, it can be a painful task to add links every time you write a new post. With this hack, you won't have to worry about that!
3. Professional look - This hack gives your blog a professional and clean look by making navigation easier for your readers.

I hope you liked this post and the hack. It's a very easy hack and I am sure all of you can benefit from it. However, remember that it does not work perfectly with some templates. But it works fine with the most!

Posted by Dan at SEO for Blogging.
If you liked this post, then please subscribe to my RSS Feed or subscribe via email. Thanks.

-----------------------
Some useful links:
Our position on California's No on 8 campaign - Google Blog
Google Toolbar 5 now available for Firefox 5 - Google Blog
Is it right to search your own site? - Inside Adsense
New in lab: right-side Labels and Chat - Gmail Blog