Tuesday, June 9, 2009

How to add related posts underneath your posts

related_posts From this tutorial, you will be able to add a related posts widget right under your posts. Having a related posts section for your blog can really be user friendly for your readers and definitely boost the average time on site. Most of the time, readers who find your post interesting will dig in for more, and what’s more user-friendly then a related posts section right under that post.

You will need these file(s) for this tutorial:

js_file related_posts.js
 Made on a Mac!

exclusive for Smashing Magazine rss.png
 Made on a Mac!

exclusive for Smashing Magazine relatedposts.zip

To add related posts underneath your posts:

1. From your Blogger dashboard, navigate to Layouts and then Edit HTML.

2. Add the following javascript link below right after the opening head tag of your blog: <script src='../related_posts.js' type='text/javascript'/>

3. Next, you will need to search for this section code: <data:post.body/> and copy and paste the section code below right after it.

Add style with CSS:

4. Next, you will need to add the CSS section code the footer. To do this, copy and paste the following section code below right before: ]]></b:skin>

Note: Remember to change “../rss.png” to your link location.

5. You should preview your blog first to see if all codes have been implemented correctly. If so, save your template and you’re finished.

No comments:

Post a Comment