Related Posts Widget for blogger blogspot

by Garish wasil on May 7, 2009

In this post I am going to explain you an easy way to add a related post widget in blogger or blogspot.

related posts widget for blogspot 150x150 Related Posts Widget for blogger blogspot

Why to add a related post widget in a blog ?

Related Posts are of great use for a blog.as it keeps visitors for longer time on your blog. This is because after reading your post, they will be surely in search of more such content or related to that. So they will use the Related Posts links which will be there in your blog, under every posts, if you add this widget. Moreover If your visitor finds a no. of posts, under the topic they were looking for, then there are full chances that they will become your blog’s subscriber & an all time reader.

How related Posts widget works ?

Related Posts widget works by listing all posts which are under the same label, as your current post is. Like if you have a post on ‘how to add meta tags in blogger’ & you have added label ‘blogspot hacks’ ; then all your posts with the label ‘blogspot hacks’ will be displayed under the Related Posts link under that post.

How to add Related Posts Widget in blogger ?

Now direct to the topic. Follow the following steps to add this widget :

1. Login to blogger.com.

2. Go to Layout —> Edit HTML

3. Backup your entire template.

4. Check the Expand Widget Template

5. Look for the following code :

head>

6. Just Before it paste the following lines :





<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>

</b:if>

7.  Replace the highlighted “Related Posts” with whatever title you like to give to your widget within double quotes.

8. Now find the following :

<div class='post-footer-line post-footer-line-1'>

9. Now after it, paste the following :



<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>

<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=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.techpit.co.cc/2009/05/related-posts-widget-for-blogger-blogspot.html'>

<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>

</b:if>

10.  If you want to display more or less than 5 related posts then change the no. in the following in the above code accordingly :

var maxresults=5;

11
. You are done now.

Troubleshoots

1. If you don’t find the code in step 8 try finding the following :

<p class='post-footer-line post-footer-line-1'>

& continue as above.

2. If you want  to display related posts on every page, just remove the 4 lines starting with

Hope you liked the post.

Article By

+Garish Wasil is a 19 years old young Passionate Blogger from India and founder of Vast9 where I share Blogging tips and online marketing strategies that has helped me to make a passive income online. Make sure to Join Vast9 on facebook and follow Vast9 on twitter.

{ 2 comments… read them below or add one }

Tork October 4, 2011 at 11:22 am

unfortunately this doesnt work for me :(

Reply

Garish wasil October 5, 2011 at 1:17 pm

What error, you are getting ?

Reply

Cancel reply

Leave a Comment

Previous post:

Next post: