Add Related Posts Widget in Blogger / Blogspot Blogs

Topics: Blogger Tricks, Blogger Widgets, Customize, Tutorials

Related posts widget appear just below your blogger posts and allow your visitors to navigate through similar posts from your blog. This is also a method to get more page views and keep your visitor on your site for a longer period of time. Remember that this plugin shows the related posts only, it uses some simple algorithm to pull out similar posts from your blog. If you are comfortable with HTML editing, you can add any attractive style to the related posts plugin by editing the CSS code. So, this blogger hack is loaded with performance and style.

How to install Related Posts Blogger Widget To Your Blogspot Blog :

We can add related posts plugin to your blogger blog in two methods. Let me guide you with those two methods one by one. But remember to take a backup of your existing template before editing and adding related posts widget. (How to take online backup of Blogger blogs?)

First Method :

Log in to your blogger Dashboard.
Navigate to your blog’s Layout >> Edit HTML
Expand your widget by clicking on Expand widget templates
Find the following code in your template. (Press Ctrl+F to make a search)

<p><data:post.body/></p>

Now paste the following code just below the above code.

<b:if cond=’data:blog.pageType == “item”‘>
<div class=’similiar’>
<!– *****************http://blogger.com*****Jan,2007****************** –>
<!– *****************Related Articles by Labels – Take Two****************** –>

<!–

1. Now, users don’t need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it’s no more.
–>

<div class=’widget-content’>
<h3>Related Posts by Categories</h3>
<div id=’data2007′/><br/>
<div id=’SolidBlogger’>
Related Posts Widget by <u><a href=’http://solidblogger.com’>SolidBlogger</a></u>
</div>
<script type=’text/javascript’>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 5;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values=’data:posts’ var=’post’>
<b:loop values=’data:post.labels’ var=’label’>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Check out the below screenshot for the correct implementation of the code.

Save your template to see that you have just added the related posts plugin to your blogger blog.
You are done.

Second Method :

Unlike the above manual method, second method allows you to add related posts widget with a single click. Follow the below steps.

Click on the below button.

Select the blog in which you want to install this widget.
Give a proper title to this widget. You may want to name it as “Related Posts“.
Click on Add Widget to get this widget added to your blogger blog’s sidebar.
You can change this widget’s location by placing it just below the blog post‘s widget. Now it will be displayed in Blog post >> Comments >> Related Posts order.
Now if you want to add this just below the blog post and above comments, follow the below steps.
Navigate to Layout >> Edit HTML >> Expand Widget Templates and search for the below code.

<div class='post-footer-line post-footer-line-3'/>
...
</div>

Add the following code just below the above code in your template.

<div id='related_posts'/>

Now the whole code should look like the below screenshot :

Save your template at this point.

Now again search for </body> tag in your template. You can also scroll down to end of your template, it’s located there.
Add the following codes just above that </body> tag.

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

Save your template and you are done.

These are the methods to add Related posts blogger widget on your blogspot blog. You can follow either the first or the second method to get the related posts showing just below your blogger posts.

Also Read : How to Add Google Analytics Code To Your Blogger Blog

40 thoughts on “Add Related Posts Widget in Blogger / Blogspot Blogs”

Ian Edson A. Magpant on April 20, 2009 at 2:27 pm said:

Thank you for this widget. However, is there a way that we can limit the number of related posts to only a certain number (e.g. Five). The thing is, if you have many related labels on your post, it takes to long to load.

Reply
Bapun on April 20, 2009 at 3:29 pm said:

@ Ian : Yes, you can configure no of related post. Simply edit the following code in your template with your values and you are done.

<blackquote>maxNumberOfPostsPerLabel = 100;

maxNumberOfLabels = 3;

NOTE : Earlier code in this post was showing 100 related posts It's edited now to show 5 posts from each label and 3 labels maximum.

Reply
riya on April 26, 2009 at 10:11 pm said:

i am getting this error

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

XML error message: Open quote is expected for attribute "{1}" associated with an element type "cond".

Reply
Bapun on April 27, 2009 at 11:16 am said:

@ Riya : Can you tell me if you followed the first or second method, so that I can guide you further.

Reply
Bewyn on April 30, 2009 at 11:53 pm said:

ya i did the above procedure but when in searched the code its not found pls help me

Reply
AgorsGrerge on May 2, 2009 at 12:13 pm said:

Thanks. i love this site Keep posting such lovely articles.

Reply
Bapun on May 2, 2009 at 8:34 pm said:

Bewyn : I'm not getting you! What you couldn't find? The code is above, simply copy it and paste in your template. That's it. Be specific with your problem, so that I can help you further.

Reply
Izzy on May 29, 2009 at 4:53 am said:

These seemed to be a very good breakdown, but I can't seem to get it working. Is there anyway that I could get some help? It is saying that the code is incorrect

Reply
Izzy on May 29, 2009 at 4:55 am said:

Oh, I'm getting the same error as riya. and I used method 1

Reply
iva on June 3, 2009 at 11:19 pm said:

thank you so much. It worked perfectly well!

Reply
iva on June 3, 2009 at 11:55 pm said:

hi,

i have successfully added the widget on my website (http://goodlorax.blogspot.com); but when I tried to put it on my other blog (http://kivaa.blogspot.com/), using method #2, I encounter a little problem.

I couldn't find the

; because I only have .

I already paste it below as ur instruction, but doesn't seem to work .. I tried to change the <p class to <div class (I don't know what it means), but didn't work also.

Any advice? Anyway I tried using your #1 method but didn't work also ..

Heeeeeeeellppp !!

Thank you so much

Reply
kumar on June 11, 2009 at 9:08 pm said:

its showing only 25 posts. im having 100 related posts how to show them ??

Reply
Paisa Vasool on June 27, 2009 at 6:09 am said:

Thanks a lot this really helped me. I initially had linkedwithin and it was making the pages look a little off. Now with this it looks nice and neat.

Reply
Learn-blogging-tips on June 28, 2009 at 10:18 pm said:

I do really liked your blog that looks very simple and neat…

Keep doing it.

Thanks for sharing with us.

Reply
Thoufeeq on July 19, 2009 at 3:49 am said:

When I search for this line , it is not in my template code.

Reply
Bapun on July 20, 2009 at 12:18 am said:

@ Thoufeeq : Expand the template first and then search for the code.

Reply
rex on July 28, 2009 at 9:33 pm said:

It did not work for my blog….get error sign…

Reply
Bapun on July 29, 2009 at 12:34 am said:

@ Rex : What's the error message? I can assist you further if you provide me the details.

Reply
winlin on August 6, 2009 at 6:39 am said:

Very nice thank you

Reply
imran on September 9, 2009 at 4:06 pm said:

thanxx dude

Reply
Naser on October 4, 2009 at 2:42 am said:

hello i have crystal blue template. This code does not work for my template please give a code starting with <p class.

Reply
winlin on October 19, 2009 at 6:50 am said:

hii solidblogger,

thanks for this nice blog I really appreciate your great work .

The new issue about this "related post widget,

the programmer start blocking all blogs, that have illegal content, http://thebrps.blogspot.com/

The author of BRPS may be blocking your blogs from

* Copyright infringement (If your blogs have links to any illegal downloads, directly or indirectly, upload by youself or not, please DO NOT use BRPS. Otherwise, your blogs will be BLOCKED for sure),

* Hate against a protected group,

* Adult or pornographic images,

* Promotion of dangerous and illegal activity,

* Content facilitating phishing or account hijacking,

* Impersonated user identity, or

* Abuse this service.

and it will appear this message instead of showing related posts

Related Posts :

This blog is blocked from using Blogger Related Posts Service. If you are the blog owner and believe this blocking is a mistake, please contact the author of BRPS.

Reply
Awais on November 5, 2009 at 4:37 am said:

1st method is not working because i already add read more coding to the blog

Reply
danielle on December 24, 2009 at 8:17 am said:

Is there a way to specify the post by name you want displayed? Example: I only want posts with the word 'Giveaways' to display in the sidebar?

Reply
Bapun on December 30, 2009 at 10:38 pm said:

@ Danielle : I don't think there is any such service to filter words and show the resulting posts. You may add a specific label (such as : Giveaway) to such posts and then display the posts under that label in the sidebar.

Reply
Jatt on December 31, 2009 at 6:09 pm said:

This code does not work for me..

I'm getting this error message..

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

XML error message: Open quote is expected for attribute "{1}" associated with an element type "cond".

I followed the 1st method..

Do this error because i already add read more code to my blog?

Please help me?

Reply
Bapun on December 31, 2009 at 10:12 pm said:

@ Jatt : You could have done something wrong during implementation as it has noting to do with the "read more" hack. Send me your template so that I can look into that. Use "Contact Us" form.

Reply
ceejay on January 4, 2010 at 9:44 pm said:

thanks a lot, i was having problem locating the first method.
i mean i don't think there is this code in my template
< data. post:body….
in my template…
where can i locate it.. should in case i want to use the code some time.
thanks again.

Reply
webgeeks on April 26, 2010 at 4:23 am said:

it is working for me thanks

Reply
moli on May 8, 2010 at 2:10 pm said:

I tried the first method. It worked great. Just I would like to place the related posts on the right side bar. How would I do that?

Reply
- Bapun on May 8, 2010 at 2:17 pm said:
  
  Moli, you just need to add the related posts code to the right sidebar and that's it.
  
  Reply
Brian M. Connole @ i on May 20, 2010 at 6:00 am said:

For some reason when I tried the second method nothing showed up. Could you help, I would like to use this widget.

Thanks,

Brian M. Connole

Reply
- Bapun on May 20, 2010 at 5:19 pm said:
  
  Brian, the second step is quite easy and works well. Have you followed all steps correctly?
  
  Reply
ISHAQUE on May 29, 2010 at 7:01 am said:

Its not showing for me too, i have tried the 2nd step.

thanx

Reply
Lindsay on June 21, 2010 at 6:01 pm said:

I followed method #2 and this message appears below my blog posts:

Could not find the possible script tags, you can only include BRPS client brps.js script once.

Can you help me out? Thanks!

Lindsay

PS–I tried method 1 but got the error message commented on above–"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

XML error message: Open quote is expected for attribute “{1}” associated with an element type “cond”."

Reply
Kenan Sevindik on July 2, 2010 at 5:10 am said:

thanks a lot, method 1 worked for me too…

Reply
PaulsHealthBlo.com on July 21, 2010 at 4:40 am said:

The “Related Posts” titled showed up, but nothing else did. No related posts links at all. I used method number two.

I wonder if this widget is compatible with Josh Peterson’s “Simple” Blogger template.

Thanks,

Paul

Reply