Popular Posts Widgets For Blogger – New and Working

The previous widget for showing Popular posts (most commented), has been stopped working, so here’s a new code for the widget.

Steps to follow:

Log in to Blogger
Go to Layout -> Add a Gadget -> HTML/JavaScript

Now copy and paste this code in to the widget:

Widget Style #1

<script type=”text/javascript”>
function pipeCallback(obj) {
document.write(‘<ul style=”text-transform: capitalize;”>’);
var i;
for (i = 0; i < obj.count ; i++)
{
var href = “‘” + obj.value.items[i].link + “‘”;
var item = “<li>” + “<a href=” + href + “>” + obj.value.items[i].title + “</a> </li>”;
document.write(item);
}
document.write(‘</ul>’);
}
</script>
<script src=”http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=28a6afad7c6ba1288c1b738277e42385&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_HERE_WITHOUT_http://&num=10” type=”text/javascript”></script>
<a href=”http://bloggerstop.net” target=”_blank”><span style=”font-size: xx-small;”>Popular Posts Widget</span></a>

NOTE: REPLACE everything in RED color in the code above with your blog’s address without typing http://

The above code displays 10 posts, you can change it by editing the number being displayed in blue !

The above widget code, displays the links/titles like this:

Post one (18)
Post two (14) etc.

If you want to display them like this:

Post one (18 comments)
Post two (14 comments),

then use this code :

Widget Style #2

<script type=”text/javascript”>
function pipeCallback(obj) {
document.write(‘<ol style=”text-transform: capitalize;”>’);
var i;
for (i = 0; i < obj.count ; i++)
{
var href = “‘” + obj.value.items[i].link + “‘”;
var item = “<li>” + “<a href=” + href + “>” + obj.value.items[i].title + “</a> </li>”;
document.write(item);
}
document.write(‘</ol>’);
}
</script>
<script src=”http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ML4p0UfW3RGgS7iN1JzWFw&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_http://&num=10″ type=”text/javascript”></script>
<span style=”font-size: 80%”>Widget by <a href=”http://www.bloggerstop.net”>Blogger Widgets </a></span>

And in case, you want to display the popular posts without the number of comments (as requested by Ben), use this code:

Widget Style #3

<script type=”text/javascript”>
function pipeCallback(obj) {
document.write(‘<ol style=”text-transform: capitalize;”>’);
var i;
for (i = 0; i < obj.count ; i++)
{
var href = “‘” + obj.value.items[i].link + “‘”;
var item = “<li>” + “<a href=” + href + “>” + obj.value.items[i].title + “</a> </li>”;
document.write(item);
}
document.write(‘</ol>’);
}
</script>
<script src=”http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=097d1b822fc6f356d8376802a911036b&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_http://&num=10″ type=”text/javascript”></script>
<span style=”font-size: 80%”>Widget by <a href=”http://www.bloggerstop.net”>Blogger Widgets </a></span>

P.S. : Please do not remove the footer link…

Leave a Reply

213 Comments on "Popular Posts Widgets For Blogger – New and Working"

Notify of
avatar
Sort by:   newest | oldest | most voted
RonTuron
Guest

ok.. ill try this one.. tnx sai…

View Comment
Divya Sai
Guest

welcome, I wud be happy it works perfectly for you 🙂

View Comment
duyduy
Guest

Thanks for the widget.
It works perfectly on my blog.

View Comment
janelle
Guest

it’s good that there are a lot of hacks/widget for blogger now 😀

i’ll try this soon ^_^ thanks for sharing this.

View Comment
Ben
Guest

Love it, but is there any way to get it to display without the number?

View Comment
Divya Sai
Guest

Hi Ben
Yes it is certainly possible to hide the number of comments, see the updated post now (third widget ) and thanks to you that now there’s a new variation in this widget for everyone !

View Comment
AB
Guest

Is it possible to hide the sequence no.
1
2
3

View Comment
Divya Sai
Guest

Hello AB

Yes you can remove the numbers/bullets;

In the code line:
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";

You have to DELETE "<li>" +
(in the beginning)

and REPLACE <li> with <br />
(at the end)

View Comment
AB
Guest

Thanks !!

One more query:

How can I add Codes in blogger posts…simply adding the code gives an error…what is the solution ?

View Comment
Divya Sai
Guest

Hi AB

It’s quite easy, you can read it here:

How to show HTML code in Blogger

View Comment
AB
Guest

But, how do u add code in boxes ?

View Comment
Admin
Guest

Hello AB
welcome back

if u are talking about popular posts widget, then what is the need of any additional code ?

If you are talking about multi tabbed widgetm then you can see my previous comment, follow that same method…

View Comment
AB
Guest

Thanks for your reply !!

Actually,I am taking about boxes in which you place codes (Quote boxes). It is very neat and clean, visitor can easily identify from where the code starts and easily copies that code.

One more query : I want to know how can I convert image into script.

If I want to add picture into my blog and I don’t want to add using Add picture option. What I want is, to add it using Html/javascript.

View Comment
Divya Sai
Guest

Ohk…
for those boxes, you have to type like this:

<blockquote>YOUR CODE/TEXT HERE</blockquote>

And if you want to customize, that box more – adding color, picture etc. wait for a coming post of mine 🙂

To add a picture
You have use this code
<img src="http://YOUR_IMAGE_DIRECT_LINK_HERE.jpg&quot; />

I think this post will be helpful to you:

Embed pictures in blogger

View Comment
AB
Guest

Thanks…Got your point !!

See my blog: http://www.exclusivearena.blogspot.com

You will see :

In the right side bar,where I added “Validated Earn Money”..that is wide area.

And below,where I added Subscription, Categories and all…that is the area which is divided into 2 parts …that of above wide area.

eg: Format is like

Wider Area

Small Small (Wider Area divided into 2 parts)

“What I want”

To Add like:

Wider Area

Small Small (Area)

Wider Area

View Comment
Divya Sai
Guest

okay..download your template, and mail it to me at

bloggerstop.net@gmail.com

and do make any changes till I tell you where to add a few lines of code…

View Comment
AB
Guest

Check your Inbox !!

View Comment
AB
Guest

See my blog for results…all mess up…how to backup widgets ?

View Comment
AB
Guest

Now,I changed my setting to default one.

How do I add separator between blog post area and sidebar (Vertical) ?

View Comment
Divya Sai
Guest

You have to search for this:
#side-wrapper {
in the template
then below that you’ll see
border, in fromt of that ,make it 1px or 2px
and also you can change the background color from white(#fff) to gray or any other color.

you can also change the width from there.

View Comment
wpDiscuz