Related Posts Widget for Blogger (Blogspot)

Valid until 31 January 2015 (unless noted)

After we learn about how to add save as PDF button, now we will learn about how to add related posts on blogger. Many thanks for Fatihsyuhud and SnapHow.Com author, blogger experts who willing to share experiences and provide a tutorial to create a related posts widget for blogger / blogspot users. I found it is easy to implement in my blog, I have tried this method and it works well :)

Related posts widget is important for your blog. Actually, its main objective is to provide your visitors an easy navigation when they open your web page and want to find more interesting articles in your blog. If they find some interesting links (in your related posts), they will visit to other pages within your blog, thus it will increase their "time on site". It will also increase your pages CTR (Clicks Through Ratio), means more page impression for adsense.

In this tutorial we will learn how to install related posts below the post content, just follow to this steps:

1. Log in to your blogger account
2. Go to Layout Section - Edit HTML (download your template before make some changes)
3. Click Expand Template Widget
4. Find (Ctrl-F) this code

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

5. Copy this code <div id='related_posts'/> and paste it after this code

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

6. So, the result will be look like this :

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div id='related_posts'/>

<div class='post-footer'>

7. Copy this code

<script src='http://www.google.com/jsapi'></script>
<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>

8. Paste it before </body>
9. Save your template and see the result.

If everything goes smooth, the result will be look like this:



You can see that the default settings will show default title "Related Posts" and it shows maximum 10 related posts. You can customize the title and set the total related post whatever you like.


Customizing Title and Number of Posts

Change the original code (in point 7),

<script src='http://www.google.com/jsapi'></script>
<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>

with this code :

<script src='http://www.google.com/jsapi'></script>
<script type="text/javascript">window.brps_options = { "title": "<h2>Related Articles!</h2>" "max_results": 5 }</script>
<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>

You can change the title (marked with red color) and change the number of related posts (marked with green color)

Save your template and see the result... Enjoy your related posts blogger widget, happy blogging :)