Recommended Article for you : get unlimited Freecharge Trick revealed

Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget. This trick is done using simple CSS3 rather than using complex JavaScripts. A great feature of this trick is each Post shown in each Flat UI color, so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is not so good.

Demo shows in bottom right side 
Features of this Widget
  • Flat UI colors used (it will attract users attention)
  • Automatic Post Numbering
  • CSS3 Hover Animation 

Sign in to your Blogger Account and Active Popular Posts Widget

  • First Add Popular post Widget to Blogger
    • Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
    • Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save 
  • Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>
  • Copy the following code and Paste just above it
    <!-- Popular posts multi colored UI theme -->
    #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
    #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
    #PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
    #PopularPosts1 ul li:first-child:after{content:"1"}
    #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
    #PopularPosts1 ul li:first-child + li:after{content:"2"}
    #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
    #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
    #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
    #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
    #PopularPosts1 ul li:first-child:after,
    #PopularPosts1 ul li:first-child + li:after,
    #PopularPosts1 ul li:first-child + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
    #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
    #PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
    #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
    #PopularPosts1 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border:1px solid #fff !important;
    #PopularPosts1 img:hover {
    border-radius: 0 0 0 0;
    -moz-transform: scale(1.2) rotate(-711deg) ;
    -webkit-transform: scale(1.2) rotate(-711deg) ;
    -o-transform: scale(1.2) rotate(-711deg) ;
    -ms-transform: scale(1.2) rotate(-711deg) ;
    transform: scale(1.2) rotate(-711deg) ;
    <!-- popular posts multicolored UI theme -->

    • Click on Preview Template (You can see the template without saving)
    • Save the Template.
    View Your Blog it is ready to attract users. I think this article will help you if so please share and Like us to spread our Blog.
    If any problems with this trick don't hesitate to ask, do comment here...

    Close [x]


    1. thanks, already applied to my blog..

    2. Can you give me code for the two arrow buttons for navigation? thanks for your posts...

      1. Wait for next post.. I am on the work of that post

    3. How to remove the description in this widget?...

      1. Click edit on popular posts widget in Layout and uncheck snippet

    4. Please look onto my site and check for the mistakes...I have only half the number visible and I need to center the text in it...

    5. Hello,
      I copied and pasted as you described above, but my "Popular Post" widget is not working properly.
      Could you please let me know that where it went wrong.


      1. That is because of the template problem, by default most bloggers use ul li tags for unordered lists but your blog used <dd> instead of <li>
        change #PopularPosts1 ul li to #PopularPosts1 ul dd

    6. Great post. I was checking constantly this blog and I’m inspired! Extremely
      useful info specifically the ultimate phase I deal with such information a
      lot. I was looking for this particular information for a long time. Thank you and best

    7. Nice info... Like it... This is what I'm looking for popular post trick. ◦"̮◦τнänκ ({}) чoü◦"̮◦ man....

    8. Thank you so much for sharing! This has been very helpful.

    9. Valsaraj Can You Tell Me How Can I Disable HTML In Comments In Intense Debate Comment System Enabled Site

    10. Nice tuts. working well.

    11. nice working fren, but can you make the circles displayed and small squares. That would be better for me. So plz provide me html code with square images in my email That would be grateful to me... And can you say how to put the code generator widget like yours in blogger.

      1. Nice one

        here is vidoe you can easy understand

    12. Hi. I like your post and I am trying to add that popular post style in my own blog which is for free softwares and games. But its now allowing me to have that kind of popular post style. Can You plz have a quick look on the source code of my blog and can help me in this regard. Regards

    13. This comment has been removed by the author.

    14. That's worked really well. watch my blog..

    15. hello in HTML the code is not past why plz tell me

    16. cool blog bro....nice work
      please can you tell ur blog template name plzzz...i like this template very much.....

    17. cool blog bro....very nice work....
      bro can you please tell me ur blog template name...plzzz..

    18. I did all that you said.Everything is working.But the problem is that the animation doesn't work.It just stand as still...
      Check my blog - -

    19. your blog is very informative.
      Me have a problem in my Blog.
      i m add css code to my blog customize > Advance > Add CSS to add code now click on apply blog button to apply . view blog code is working.
      when i try to add another CSS code with the same steps but previous code already in the code box, i can't add 2nd code to css , so i m decided to eras the standing code in css box to add new code bcoz previous code is also working. so eras code and past new code and apply blog , when the new / 2nd code is working but the 1st / previous code is deleted and no more working ... Please help me i m upset for that.
      my blog URL is .

    20. Admin i should need HTML code which will track unique hits or visitor of my blog.

    21. play free online games , game ban gai , play free online games , play free online games , choi game ban gai , play free online games

    22. This comment has been removed by the author.

    23. Bro and another doubt in the edit html option should all the text be in black clour??? plz reply bro

    24. BRO!!! iam not able to get it plz help me!!!!

    25. i cant find ]]> in my template design....

      plz help...and i want also edit my blog with cool design and add header file as u add...
      then what can i do...
      my blog is

      i am waiting for your positive reply

    26. I don't know where is I should be write me word. Allow me to write it here.
      Your blog is so awesome bro! I love it. :D
      Your articles nice too. If you're not objection please come to my blog Here and give you argument. I'll wait for it.
      And I am too interested to learn by you. My email is available for next your articles bro. Just send it at my email
      Thank you very much much and much...

    27. Dear ADNMIN,i have not such tag in my option like "]]> ' so what i do ? guide me dude

      1. try to put in <style type="text/css"> place code here </style>

    28. Hi! Thanks for your information. I applied this on my blog. How can I change the size of the shape, according to the rank of the views? I blog at :)

    29. my blog shows only two posts and images in a post is not showing in this,, what to do?

    30. HTML is a scripting language which we use to write web pages. Text is marked up with tags which organise and format the way text is displayed on the page.You Can see more in : html and css

    31. HTML is a scripting language which we use to write web pages. Text is marked up with tags which organise and format the way text is displayed on the page.You Can see more in : html and css


    Ask your thoughts to us,We are happy to help you.

    1.Please don't Spam
    2.We strictly recommend to Click on Subscribe to email