September 3, 2011

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(http://4.bp.blogspot.com/-AexFsTTa33c/TmFNoxg9zSI/AAAAAAAAE6I/7K8bPKYBr8Q/s400/popular%2Bposts.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(http://4.bp.blogspot.com/-AexFsTTa33c/TmFNoxg9zSI/AAAAAAAAE6I/7K8bPKYBr8Q/s400/popular%2Bposts.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 »

59 comments : Post Yours! Read Comment Policy ▼
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. 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

    ReplyDelete
  14. http://abuaqifstudio.blogspot.com/

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

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

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

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

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

    ReplyDelete
  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

    ReplyDelete
  19. Very beautify Blogg, please keep close posting

    ReplyDelete
  20. Members (682)follow balik gan

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

    my blog:
    http://skyblueway.blogspot.com/

    ReplyDelete
  22. hey friends its not working in my blog http://mithilaworld.blogspot.in/ it is here "all time hits"

    ReplyDelete
  23. thanx man..
    do look at my site www.c0mputertech.in and suggest me somethings..!!

    ReplyDelete
  24. thanks for share
    http://try-this-one.blogspot.com/

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

    ReplyDelete
  26. Can you help me ?? the border and the image have some margin on my blog (http://www.faktanik.blogspot.com).. Why ?? Plz help me .. Thanks a lot..

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

    fandroidz.co.nr

    ReplyDelete
  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 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
  29. For Blogger Users. I have a beautiful Different/Multi Colored Popular Post With Hover Effect Widget In Blogger.

    Come and visit my site: http://www.lifebeyondlimits.info/

    Thank you so much.

    -jayryan09-

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

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

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

    http://suspendeddamnation.blogspot.com/

    ReplyDelete
  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

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

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

    ReplyDelete
  36. why can not rotate

    demo : jogj-MP3.BLOGSPOT.COM

    ReplyDelete
  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. www.mycareermanager.blogspot.com

    What do you suggest?

    Sharon C.

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

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

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

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

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

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

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

    ReplyDelete
  45. good widget, and working fine, thanks

    ReplyDelete
  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

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

    ReplyDelete
  48. http://www.viettin24h.com/: Thủ thuật tổng hợp

    ReplyDelete
  49. Thanks for the post!
    But unfortunately, this is NOT ROTATING!
    Any HELP please?
    I used it at http://techaarc.blogspot.in/

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

    ReplyDelete
  51. 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
  52. Dear brother, I am also using it for a long time in my blog www.bangladeshinmyeyes.blogspot.com but I want to rotate it from left to right.

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!