Add Rotating Slides Of Popular Posts Widget To Blogger

popular posts sliderMy brother Abu-farhan has created an amazing script that transforms the popular posts widget provided by blogger into a a vertical content slider  that updates automatically. His script really impressed me and I thought of sharing this great slideshow widget with all of you. It is extremely easy to install this widget on blogger. You only need to paste the code inside a HTML/Javascript widget. This new script works on all major browsers and can easily be customized. I have further edited the code to give it a little better color theme. No thumbnail images will appear if you have not added any image in your posts. Posts which are viewed most will be picked by blogger stats widget and displayed through this new gadget.


Live Demo

Adding Popular Posts Rotating Slides Widget

  1. Go To Blogger > Design
  2. Click add a gadget
  3. Choose Popular Posts Widget provided by blogger
  4. Keep post number greater than 4
  5. Save your widget
  6. Now select an HTML/Javascript widget
  7. Paste the following slide code inside it,

<style type="text/css" media="screen">

#PopularPosts1 {
padding:0px 0px;


#PopularPosts1 ul {
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;

#PopularPosts1 li {
padding: 5px 5px;
margin:0px 0px 5px 0px;
overflow: hidden;
background:#fff url( repeat-x;
border:1px solid #ddd;

#PopularPosts1 li .item-title {

#PopularPosts1 li .item-title a {
font:bold 12px verdana;

margin:0px 0px;
padding:0px 0px 2px 0px;

#PopularPosts1 li img {
border:2px solid #7CA2C4;

#PopularPosts1 li .item-snippet {
font-family:Tahoma,Arial,verdana, sans-serif;
padding:0px 0px;
margin:0px 0px;

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    text-decoration: none;

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;

#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;

.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;

a img {
    border: 0;

<script src="" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
<script src="" type="text/javascript"></script>


Keep the two widgets together. One on top of another as shown below,

popular-posts widget


Make Changes To Colors and Fonts

Not all of you uses a white background for your blogs and some of you may wish to have complete control over the appearance of the widget. I am listing below important areas which you can edit to let the widget perfectly blend your template.

  • To Change Widget container height edit height:310px;
  • To change the small rectangles width edit width:310px
  • To change width of the text snippet then edit width:290px;. Keep this width 20px smaller than the rectangles width. For example in this widget I have kept rectangles width=310px; and snippet width=290px;
  • To change link title color and font size edit color:#7CA2C4;
    font:bold 12px verdana;
  • To change thumbnail image's border colour and size edit border:2px solid #7CA2C4
  • To change the snippet text's font size, family and colour then edit the yellow highlighted code

What if your template background colour is black or dark?

In such a case replace the following code,

background:#fff url( repeat-x;

with this,


Replace #ffffff with your background color. Use our color generator tool.

I hope you like this widget and find it useful. Please let me know if you needed any help. Peace brothers. :>

Need Quick Help within 24 Hours? ASK NOW

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

61 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Hell Abu,

    I have your code installed, however the widget doesn't rotate. I guess there is an issue with the different jscript versions, all being used together, your calling 1.6.2 doesn't work when other versions are called before. This is a problem with several scipts available for add on to blogger. Theoretically the latest version should be backward compatible, but it doesn't work. Do you have any solution?

  2. Hey its working. Can you modify it for recent comments also.

  3. Thanks for sharing Good One

  4. the trick z absolutely working fine..danx brer...dis z my blog u visit this

  5. @Lasting Rose
    I guess you are using the classic version of blogger and not the upgraded beta version. This widget works only with Beta blogger and not on classic templates.:)

    Since comments don't use thumbnails so this widget wont look nice with it but still I will see if the code could be altered. :)

    Always welcomed pal. :)

  6. @Mohammad Mustafa Ahmedzai

    Hello Mohamad,
    Iam using

    Blogger Template Style
    Name: Picture Window
    Designer: Josh Peterson
    ----------------------------------------------- */
    I guess it is the Beta
    I had the RECENT POST widget with jquerry 1.3.2 installed and working but now neither widget is working. I guess it is a problem of multiple versions of Jquerry. Do you have any example of a blogger site where both are working ?

  7. It worked perfectly well, thank you very much!!!

  8. @Lasting rose
    Thanks for sharing URL of your blog. As you can clearly see that your blog is already making use of Jquery tools everywhere. For this widget to work perfectly the code must not be conflicted with the presence any other Jquery programmed widget. Usually when jquery is called by multiple elements on a webpage, then 3/4 widgets would function whilst the one would not. If you test the same code on any of your test blog where you dont have so many widgets installed then you will observe clearly that the slides would rotate just perfectly.

    My friendly advice always is : "Show more of text and less of media(videos, audios, graphics, ajax widgets, jquery tools etc)on your blogs for higher Search engine rankings"

    Hope this helps brother.

    always welcomed ana.

  9. Hello Ahamad,

    Many thanks for your reply. As the two scripts I use for Recent posts and Popular posts are written by you, on using Jquerry 1.3.2 and the other using 1.6.2, I was wondering perhaps you could optimise both by using the same version. Alternativey you could modify the function calls as suggested in this article.

    I appreciate your suggestion to minimise the use of scripts in a page but I guess for proper navigation and better visibility scripts like yours are a big advantage. Please see my article

  10. hello dear Mohammad thx for share this usefull widget .i need your help .. i try to install this widget in my blog page its rotate fine height size good but Problem is width size its not show perfect its show slim size not show all info with pic just show pic and some text plz help me out how can use this widget thx in advance
    here is my blog url plz check

  11. Hi Dear, This widget is working but it is shoing only few lines from my post. Is it posible to show about 10-20 lines in the slide show. if yes, could you please tell me how. I am waiting to hear from you.

  12. Thanks a lot!
    A great way to modifie the popular post widget in blogger. I had to do some modifications to the given code so that it matches to my blog-layout and -design. Moreover I chosed a bigger size for the shown posts an let the text float around the thumbnail. Now it just looks perfekt!
    You can see it on my blog
    Regards Fabian

  13. I have been looking for this for quite a while. I have previously used Abu Farhan's Popular Post Accordion, and it was great. I'd like to try this out for a few days, probably switch between the two every now and then.

    Is there anyway to use this for Random Posts? Thanks!

    Please check my site out: HTTP://PINOYBUZZTER.BLOGSPOT.COM


    tried but not working.. not rotating at all..

  15. This comment has been removed by the author.

  16. Hello, I tried to install this code on my blog, however it is not working. The Popular posts is blank without any posts when I install it on my right sidebar >> when I install below the post works great. I think I have to modify some size, however I tried a bunch and couldn't make it work.

    Help plz?

  17. It is possible to increase the time between the transition?

  18. I was looking for something like this and this works very well - thank you!

    I am also wondering if there is a way to slow down the speed of the transition.

    Thanks again

  19. Very beautify Blogg, please keep close posting

  20. Members (682)follow balik gan

  21. this is great! truly great! question: is it possible to make it horizontal? (so i can put it to my header)

    my blog:

  22. hey friends its not working in my blog it is here "all time hits"

  23. thanx man..
    do look at my site and suggest me somethings..!!

  24. thanks for share

  25. Is there a way to wrap the text? I see overflow:hidden

  26. Can you help me ?? the border and the image have some margin on my blog ( Why ?? Plz help me .. Thanks a lot..

  27. thanks for the wonderful script, loved it will wait for any new transitions you introduce. do keep us updated.

  28. I had problems with the text not wrapping but I was able to get it to work by using the modifications posted above by Fabian (site I also disabled snippets in the popular posts widget. I am happy with the way it is currently working! Thank you MyBloggerTricks and Fabian post.
    site is:

  29. For Blogger Users. I have a beautiful Different/Multi Colored Popular Post With Hover Effect Widget In Blogger.

    Come and visit my site:

    Thank you so much.


  30. Adding simple method of slideout floating - facebook,twitter,googlplus,email subscription box to blogger blog.

  31. thanx man..
    do look at my site and suggest me somethings..!! Cara Menjadi Orang Sukses

  32. Very confused on one thing here, maybe someone can help. I have the widget working almost perfectly, accept there is a small bit of white space to the right of the image thumbnail and I cant seem to get rid of it.

    I tried decreasing the padding, the margins, almost everything! It just wont go away...

    Take a look and tell me what I need to fix please :)

  33. what about this popular post slider on to? I don't know how to create it. You may want to add a tutorial for it. Thanks

  34. @Lasting Rose we have the same problem, mine doesnt rotate too..

  35. This comment has been removed by the author.

  36. why can not rotate

    demo : jogj-MP3.BLOGSPOT.COM

  37. Thank you! I'd like to slow down the speed of the post rotator. It is too fast to read, so I installed a marquee behavior code. It's still too fast. Is this part of the hidden code?

    Also, the writing is beyond the margins and I'd like it to fit the margins.

    What do you suggest?

    Sharon C.

  38. its working but its good only for white background...not transparent


  40. hi my blog is but its not rotating

  41. its working perfect, but can i replace popular post gadget with recent posts? what would be the procedure for that?

  42. very nice post.. thankss dear..
    check my site to order free samples for you

  43. Hi Mohammad,
    I want to know if I could use same widget for my "events" or "announcements" menu. How do i go about it?

  44. I am using it. It very good. my blog:

  45. good widget, and working fine, thanks

  46. Well this kind of information is really worth searching for this. It’s good to have these kinds of articles around to keep the information flow steady. Helping those who really can make things right in the future, good work!
    Download free games

  47. can u please give me the popular post widgest which are sliding at the top of by blog

  48. Thủ thuật tổng hợp

  49. it is not fit on my blog please will you help me to improve

  50. Brother, I am using this widget of yours on my blog since 1 year or so.. it worked amazing.. but now suddenly it has stopped rotating.. can u help me pls..

    my blog is:

  51. Dear brother, I am also using it for a long time in my blog but I want to rotate it from left to right.

  52. thanks for it and works properly for my blog

  53. I have had this widget running successfully for quite sometime. Suddenly, about a week or so ago, it stopped scrolling and is stuck in place. Any ideas???

    Also, my Facebook slide out has stopped working as well. Any thoughts as to why these "blogger-trick" widget tweaks stopped working would be greatly appreciated. Thank you!