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 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;


}

#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}

#PopularPosts1 li {
 width:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNh5NFmzWPMpT8D94xEYJc7Qyed_rGiyJKKewacxrETUFDHowzzOEPq3bPSzQEH0J33h8-YJSbDtqVZ9VdyVl5adnD32r2hWBNq3d464gPMG0IV_-EoTLOb-UZlEOSH8ciIbt8zUpRxiI/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
   
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;

height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    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;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNh5NFmzWPMpT8D94xEYJc7Qyed_rGiyJKKewacxrETUFDHowzzOEPq3bPSzQEH0J33h8-YJSbDtqVZ9VdyVl5adnD32r2hWBNq3d464gPMG0IV_-EoTLOb-UZlEOSH8ciIbt8zUpRxiI/s400/popular+posts.jpg) repeat-x;

with this,

background:#ffffff;

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

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 »

37 comments

PLEASE NOTE:
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?

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

    ReplyDelete
  3. Thanks for sharing Good One http://www.developerscode.com/

    ReplyDelete
  4. the trick z absolutely fabulous..it working fine..danx brer...dis z my blog http://pingstuff.blogspot.com/...hope u visit this

    ReplyDelete
  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.:)

    @profmaster
    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. :)

    @ELitist
    Always welcomed pal. :)

    ReplyDelete
  6. @Mohammad Mustafa Ahmedzai

    Hello Mohamad,
    Iam using


    http://lastingrose.blogspot.com/


    Blogger Template Style
    Name: Picture Window
    Designer: Josh Peterson
    URL: www.noaesthetic.com
    ----------------------------------------------- */
    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 ?
    Download: eType1.com/f.php

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

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

    @Ana
    always welcomed ana.

    ReplyDelete
  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.
    http://stackoverflow.com/questions/528241/how-do-i-run-different-versions-of-jquery-on-the-same-page

    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 http://technorati.com/blogging/article/how-your-blog-navigation-can-send/

    ReplyDelete
  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 http://jaycutlerbest.blogspot.com/

    ReplyDelete
  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.
    Regards
    Maruf

    ReplyDelete
  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 http://miatastyle.blogspot.com/
    Regards Fabian

    ReplyDelete
  13. 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?

    http://can-you-do-this.blogspot.com/

    ReplyDelete
  14. It is possible to increase the time between the transition?

    ReplyDelete
  15. 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

    ReplyDelete
  16. Very beautify Blogg, please keep close posting

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

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

    fandroidz.co.nr

    ReplyDelete
  19. 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 http://miatastyle.blogspot.com/). 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: www.liveholisticnow.com

    ReplyDelete
  20. 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 :)

    http://suspendeddamnation.blogspot.com/

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

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. its working but its good only for white background...not transparent

    ReplyDelete
  24. NICE, I ACTUALLY THOUGHT IT WAS GOING TO KEEP FLASING OVER WITH DIFFERENT POST BUT THIS AMAZON... TNX

    ReplyDelete
  25. hi my blog is http://stephneverson.blogspot.co.uk/ but its not rotating

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

    ReplyDelete
  27. very nice post.. thankss dear..
    check my site to order free samples for you
    www.orderfreestuff.com

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

    ReplyDelete
  29. I am using it. It very good. my blog: http://khmerfreetime.blogspot.com/.

    ReplyDelete
  30. good widget, and working fine, thanks

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

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

    ReplyDelete
  33. 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: www.techntuts.com

    ReplyDelete
  34. thanks for it and works properly for my blog

    ReplyDelete