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=”https://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=”https://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=”https://www.bloggerstop.net”>Blogger Widgets </a></span>

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

213 thoughts on “Popular Posts Widgets For Blogger – New and Working

  1. 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 !

  2. 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)

  3. 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…

  4. 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.

  5. 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

  6. 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.

  7. There is no – #side-wrapper {

    but #side-wrapper { is available.

    #sidebar-wrapper {
    width:455px;
    float:left;
    margin-left:10px;

    How do I add color and If I want to add image background…then ?

  8. To add background color, add this code below width line

    background: #e6e6e6;

    background image will not look good for the complete sidebar, although you can add images to particular widgets

    and that 455 is the width (pixels), if you want you can increase or decrease it !

  9. Hi pido

    It totally depends on you or the blogger, whether he/she wants to display the most commented or the most viewed posts as the popular posts.
    If you think the most commented are the better ones, then you can add this one.

    And if you think, most viewed are better posts, then you can visit this page:
    http://www.FEEDJIT.com

  10. No,not that feedjit..im mean this another popular post that ive seen in blogsome, it depends on the views rather than the comments..which do you think is better?Im really confuse..

  11. Well as i have said, this depends totally on the blogger.

    For ex.
    Suppose by both methods we get an output of 10 posts. So just try both of them.
    Then out of these two results, check which one shows more of those posts, which actually you want to show to most of your visitors, and select that widget.

  12. Hi Ankit
    As you have asked for that pink colored widget, so i’ll explain exactly how to make that one, you can then use the same tips to make a widget with many variations…

    Initially imagine that widget in 3 parts.
    TOP – Image1
    Middle – Popular Posts
    BOTTOM – Image2

    The image you gave me :
    WIDGET SCREENSHOT

    So Image1 will be:
    IMAGE2

    And Image2 will be:
    IMAGE2

    So TOP and BOTTOM are now ready.
    MIDDLE part is the widget, which has a PINK background, so to add pink color as background, add this code:

    <div style="background:#FD2094; padding:5px 8px 5px 8px;">
    POPULAR POSTS WIDGET CODE HERE
    </div>

  13. Well as i have said, i have given you the basic idea, it can be used for anything, you have to apply the same tips to make any customized widget.

    As you are saying that it’s a simple link list, so in place of the POPULAR POSTS WIDGET, you have to use this code:


    <div style="background:#FD2094; padding:5px 8px 5px 8px;">
    <ul> <li>
    <a href="link1">Text1</a>
    <a href="link2">Text2</a>
    <a href="link3">Text3</a>
    <a href="link4">Text4</a>
    </li> </ul>
    </div>

    So finally code is;

    IMAGE1
    CODE – For link list (with background pink color)
    IMAGE2

  14. Actually there are more than one ways to do that, but i will describe the easiest one for you…
    [this method will work only for HTML/JavaScript widgets]…

    As u know, there’s no need to write anything in the (Title), while adding a new HTML/JavaScript widget,
    so u can simply start the body(content) of the widget, with an image as the header, and then paste the content of the widget.

    So…
    leave the Title – empty.
    And in the content write like this:

    <img src="Header-IMAGE"/>
    CONTENT of the WIDGET

  15. For heading, find something like this

    #sidebar h2, OR
    #sidebar1 h2, OR
    #sidebar2 h2,

    and in font of these, you will find these brackets: {
    ###
    ###
    ###
    }

    Now one of those ###, will be “background

    So in front of that, you can change the color, by changing the hex-HTML color code.

    or u can use any image (width should be exactly equal to that of the sidebar-width)

    and the code will be:

    background : url(http://i263.photobucket.com/xxxxxxxxxxxxxxxxx.gif) no-repeat ;

  16. 1) The position where we add stripe-ads, I want to add 3-4 Navigation Buttons and search box.

    2) I want my blog post area should be covered in a box.

  17. Dude all the three codes are working perfectly fine, you can see the third code live on my blog (bottom 3rd widget)

    Use exactly this code, in your widget:

    <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=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2Ftotalcollectiontest.blogspot.com&num=10&quot; type="text/javascript"></script>
    <span style="font-size: 80%">Widget by <a href="https://www.bloggerstop.net">Blogger Widgets </a></span>

  18. Hi Ankit…..sorry forget about those comments,
    anyways, for showing your posts inside a post, you have to add a border around the posts, you can do that by first searching for something like this in your template:
    #main-wrapper {
    ***
    ***
    ***
    ***
    }

    In one of the ***, it will be
    border: 0px solid #000; (or something similar/ OR IT may be completely absent)

    so in case it’s not there, then add it yourself or modify it, if it’s already there, like this:

    border: 0px solid #000;

    To replace the stripe ads with any other content, you I’ll have to see the template !

  19. I am getting 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: The element type “img” must be terminated by the matching end-tag “”.

  20. I want to change footer background and want to add some image background…and as u added black background on both sides..I too want to add on my blog.

  21. this a widget based on comment rite..?

    is there a most viewed widget based on todays read articles?

    ive been searching it for over 3 weeks, and havent found the working one.

    can u help me…

    thanx in advanced

  22. Hi Ankit,
    I was out of town for the weekend, but yesterday night I have replied to almost all the pending queries on the blog, if by any chance any query is left un-answered, then please remind me in that page itself, by writing a follow-up comment…

    Regards
    Sai

  23. Excellent script, but I have one question. It works good for english blogs, but for example for czech not. It canยดt display some letters in the list of popular posts and it looks strange. It is caused by the source of post title – from link. Czech special letters are missing in the link, f.e. http://www.automanie.eu/2008/02/enevsk-pedpremira-nov-superb-na-silnici.html. Right is “ลฝenevskรก pล™edpremiรฉra: Novรฝ Superb na silnici”. Does anyone have some idea to solve this problem?

  24. I guess, it’s set up just the way I wanted it … now!
    thank you so much!

    cud u pls help me with a few other things… pls…
    1. the label clouds.. ๐Ÿ™

    2. in my template.. (cellar heat) it doesn’t show the pictures of the people who leave comments.. can that be turned on somehoe??
    n if yes.. how?

    3. how do I change the font colour for the widgets above the post section..
    like the no. of followers are shown in black?.. which isn’t visible
    4. and similarly for the star ratings and ‘how do you find the post’ (checkmar) widget, which I turned on through blogger in draft… they merge with the background color and are not really visible..

    oops!.. luks like m leaving too long a wish list!!! ๐Ÿ˜‰
    so t1 time.. is it 4 u too @ Noida?
    al d bst wid those nonsense xams! ๐Ÿ˜‰

  25. Ohk…lets c,

    1. Regarding labels cloud, although the problem you are facing is not a rare one, but I think better than me, Amanda from BloggerBuster can answer you, as she is the creator of this widget…

    2. To show images along with comments, you can read this article:
    Display commentators profile image in Blogger

    3. To change the font color of that specific message, do this:
    go to "Layout" -> "Edit HTML", then click on "Expand widget templates",
    now find this in the code:
    <data:followersFooterMessage/>

    And then add this bolded code to it:
    <font color='red'><data:followersFooterMessage/></font>

    4. Although I dont know how to change the text color, but if you want then u can give a background color to it, by doing this,
    find
    <td ><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>

    And add this bolded code to it:

    <td bgcolor=”gray”><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>

    And ya T1 is coming in 3 days :(…..and I am unable to shut down this PC ๐Ÿ™‚
    good luck to u too, for the xams ๐Ÿ™‚

  26. This is very useful and this one is actually working! I tried several most popular widget but all of them is either Invalid or error. This one definitely help me. Thanks!

  27. Hi capitalrider, Alit and agentmango,

    I am really happy and glad that it worked for all of you…good luck to you and your blogs,
    keep visiting this blog for more such widgets and hacks !

    Regards
    Sai

  28. This widget works (almost) perfectly.

    Out of a list of 5 popular posts, one of my blog titles has been replaced with the first sentence of the post. The other 4 titles appear correctly.

    Thoughts?

  29. Hi there,

    Thanks for the great code. One problem: the widget on my blog is displaying the url address as well as the post title. You can see what I mean here:

    http://www.liverpool-kop.com/

    Bottom right hand corner.

    I want it to just display the post titles/comment numbers. No url!

    Any ideas?

    Thanks a bunch ๐Ÿ™‚

    Jaimie

  30. Hi Divya,

    I’ve done exactly as you have mentioned here, but for some reason only the footer URL is displayed and not any of the posts… what is going wrong?

    can you help?

    thanks

  31. tanx for this widget,its help me so much but….
    ooo plzz help me, it not fully work for me, doesnt look nice at all, mine appear like this :

    1. http://neorul87.blogspot.com/2008/07/curiousity (64 comments)
    2. http://neorul87.blogspot.com/2009/03/cuba sebut ini (46 comments)
    3. http://neorul87.blogspot.com/2009/01/neopets yang huduh (43 comments)
    4. http://neorul87.blogspot.com/2009/05/kek coklat limpahan untuk ibu (41 comments)
    5. http://neorul87.blogspot.com/2008/12/aku pregnant (37 comments)

    plz help me, i want to get rid the url, but the title would be just nice.

    =( help..

  32. hi-I need your assistance.I am looking for selective widget that will be showed in pages i define according to lavel.say this particular widget will be showed in pages of posts for 'software' level

  33. again-how can i limit the no of post for a level in per page.i have 20 post to software level.by clicking on level'software'all the 20 post displayed in one page

  34. Hi Lisa,

    Plz do not remove the widget until I check it on your blog….BTW I think for the visitors no. of comments is not so necessary, so why don't you simply show the widget without any numbers and only titles?

  35. This is the only widget that I have found that works on Blogger. Thanks!

    One problem, though – The titles of my post are running together with the number of comments. There are no spaces between words. Any idea how to fix that?

  36. Hi Scott,

    The popular posts according to your server logs, are those which receive maximum traffic on that day, but here the widget considers those posts as popular which have max. number of comments….If you want to show the posts of your blog which receive max traffic then you use the widget from here:
    http://feedjit.com/joinjs/

    I hope that solves your query ๐Ÿ˜‰

    Regards
    Sai

  37. Hi, the second code has a problem.
    The titles of my post are running together with the number of comments. There are no spaces between words. Any idea how to fix that?

  38. @apol

    Add the first
    <script>



    </script> tags

    between these two bolded lines, like this:

    <span style="color:red;">
    <script>



    </script>
    </span>

    change color from red to any other as per your wish…

  39. Hmmm, try this, in your template, change this to

    #footer p a{color:#CCCCCC}
    #footer p a:hover{}

    to this:

    #footer p a{color:#FFD700}
    #footer p a:hover{color:#FFD180}

    and also this
    <Variable name="footerlinkcolor" description="Footer Link Color"
    type="color" default="#CCCCCC">

    to this
    <Variable name="footerlinkcolor" description="Footer Link Color"
    type="color" default="#FFD700">

  40. Hey common, you don't have to change the template…it's weekend lets work on it more ๐Ÿ™‚

    Actually the bottom widgets in your blog are added separately, so lets try this:
    Find this code:
    </head>

    and immediately BEFORE/above it paste this code:

    <style type="text/css">
    #footer-column-container {
    clear:both;
    color:#FFD700;
    }
    </style>

    save the template…and chk the blog..tel me if it wrks or not…

  41. thanks,

    i've added the codes, the color of the texts changed as i expected but the color of the links like the title of the posts remain the same…

    ?????????thanks…………

  42. Okay gud…we are on the right track..
    this is the final modification you need to do:

    presently you have this code in your template:
    <style type="text/css">
    #footer-column-container {
    clear:both;
    color:#FFD700;
    }
    </style>

    so add some more code to it, like this:

    <style type="text/css">
    #footer-column-container {
    clear:both;
    color:#FFD700;
    }
    a {
    color: #FFD700;
    text-decoration: none;
    }
    a:hover {
    color: FFD180;
    text-decoration: underline;
    }

    </style>

  43. it works well until yesterday..
    but today the popular post widget is not working at all
    it just appearing 'Get this widget' or other link that is not useful.
    i see the same way at yours
    how could it be?

  44. Yup the problem is in my notice, thank you guys.. many widgets(not just the popular posts ones) are not working based on Yahoo pipes…no other option…jus wait n see !

  45. not exactly….they are somewhat like open source projects, you can freely copy (clone) a pipe-project. But presently if you try any of those pipe projects for a blogger blog, then the results are not coming.

    Presently the most probable reason I could see is this:

  46. *Update:

    The problem doesn't seems to be from the Yahoo! side.
    Rather there's some error in the feedlink itself, that means may be something at Blogger is being updated or getting repaired.

  47. Dear sai,

    my popular posts looks like this
    1. http://www.manojentertainment.co.cc/2009/06/sims 3 full pc
    2. http://www.manojentertainment.co.cc/2009/05/fifa 9 highly compressed
    3. http://www.manojentertainment.co.cc/2009/05/ayan sruthilayam dvd rip original dvd
    4. http://www.manojentertainment.co.cc/2009/07/wndows vista gamers edition 2009
    5. http://www.manojentertainment.co.cc/2009/07/harry potter and half blood prince-2009
    6. http://www.manojentertainment.co.cc/2008/12/blog post
    7. http://www.manojentertainment.co.cc/2009/01/large image collections
    8. http://www.manojentertainment.co.cc/2009/05/mrbean
    9. http://www.manojentertainment.co.cc/2009/05/counterstrike
    10. http://www.manojentertainment.co.cc/2009/06/siva manasula sakthi excellent quality

    but it is not nice.. i want to display only the title of the post. plz help me..

    waiting for your reply..
    manoj.0790@gmail.com

  48. *Update

    Widget style #2 is also working, the problem is only with #3. I will wait a few days and in case the troubleshooting is not done by yahoo, then I'll update the code for widget style #3.

  49. hello there,
    1st,really thanks for these great posts,
    I already saw your reply to a similar "problem" that I have,with the posts I have titled in Arabic (it shows "blogpost") and honestly I like this one much better than the feedjit widget I've been using,isn't there anyway you can find a way around it?
    regards.

  50. Great work on these, especially with keeping on top of yahoo to make sure they always work. It's a thankless job, but we all appreciate it!

  51. Sai Ram Divya,

    Previously i had used widget style 3, it was working until any issues were traced. But now i am facing a strange new problem after i added 1st widget, the actual number of comments are not showing up, thus resulting into wrong popular posts information being displayed. In one of my blogs, actual comments are shown up instead of post titles. Please do help me out.

  52. Yeah I am aware of this problem, and I have replied to your previous query along with this one here.
    PS: I couldn't get your point: In one of my blogs, actual comments are shown up instead of post titles.

  53. Find this in the code above:

    style="text-transform: capitalize;"

    and change it like this:

    style="text-transform: capitalize;font-style:italic;font-weight:bold;font-family:"Times New Roman",Georgia,Serif;"

    This will change the font in to italics, bold and the above metnioned font family will be applied. You can add/remove more css attributes to the above code, just as I did.

  54. hey there
    i represent the world united bloggers
    and i found in your blog the joy of love and the hope of peace
    we are more than 270 bloggers represent more than 80 countries
    blogging for peace and love
    and i chose you to join us ..
    send us a mail with your name , country , blog url to
    sharm@sharmlifeblog.com with title ( join WUB )
    so that we can add you and send the invitation to you

    sharm
    chief of WUB
    worldub.blogspot.com

    (N.B: THIS IS NOT A SPAM COMMENT )

  55. Thanks again Divya, for such a wonderful widget, I has few questions, but when I went thru your article and the comments of your readers, everything has been answered ๐Ÿ™‚

    Lina.

  56. Do you know of any widget that does this same function but instead of listing the posts in order of most commentes lists the posts in order of the ones that recieved more reactions?

  57. Hi Divya,
    Thanks a lot for this widget. I was looking for it for quite some time. I am also using random posts widget made by you and am happy with the results.

    However there is a slight problem. This widget is not displaying any posts on my blog !! Please visit my blog http://www.knowledgehub.co.in to check for your self. What could be the reason for this ?

  58. The other two are giving the complete url instead of title, which makes the blog messy. And also I don't want to show number of comments, just need the post titles to be displayed. I am removing the widget from my sidebar as of now. If you could think of some solution I'll be grateful.

  59. @Blue moon
    and Rachel

    Please try all three widgets, I don't exactly remember which one, but one is currently down and other two are working fine.

  60. I just want to know if the script would include the counting of anonymous comments. I noticed that the numbers that appears in the widget do not coincide with the number of comments in my blogger dashboard.

  61. First two ARE NOW working…they may stop working for a few hours if Yahoo-Servers go down, but don't worry till now there hasn't been any big problem with these widgets…I'll soon update the third widget code too…

  62. Hi Divya,

    yes all three codes are working fine now.
    its showing only commented post, NOT most viewed posts. also i want to show picture of every post. can you please advise?

  63. Hello, I've added this widget but have some problems with it. For example, my most commented post, which has 42 comments is not included in my list. i also have another post with 35 comments that is not on the list. Could you tell me why? Thanks.

  64. Hi. Your tutorial is very interesting. I got a little problem about the popular post.
    Would you help me, please?
    Sentence for his post is not popular in my blog comes up.
    Please visit my blog at merahmarunluck.blogspot.com so you can see it and give a little of all this problem solving.
    Thank you ..

  65. Hi. Your tutorial is very interesting. But, I've got a little problem about the popular post.
    Would you help me, please?
    Sentence for his popular post is not comes up in my blog.
    Please visit my blog at merahmarunluck.blogspot.com so you can see it and give a little of all this problem solving.
    Thank you ..

  66. Is that any way to get our blogger popular post on our pages instead on widget I want to show my most popular articles by view on my pages with more number eg. 50 or 100 most view articles thanks.

  67. Hi, Cool stuff. Another Question: I want my most poular blogger posts displayed on a blogger page. I know i can have those managed with labels, so that there's a page with all blogposts with that label. But how can I adopt the sidebar gadget to deliver content on a page? Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *