Bismillah, Alhamdulillah

Skip to Content

New Popular Post for Blogger With Animation

August 10th, 2011

Bismillah, Alhamdulillah. Long time ago I made Popular post for blogger using Json But now blogger made popular post from Blogger Stats . Now I made Popular Post for Blogger with animation. This widget I made from my Recent Post with animation using simple spy.
Popular Post with Animation for Abu Farhan


Demo

This script very easy to install, you only have to put the script to the new Gadget

  • Login to Blogger Dashboard and navigate to Design – Page Elements
  • Click “Add Gadget” and Choose “Popular Posts”, Customize the gadget with more than 4 popular post will show–> “Display Up to” … Posts

    (If you already have this gadget skip this step)
  • After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
  • Put all script bellow to the “Content” of HTML/Javascript Gadget
  • Done- your popular post now with animation

Explanation of Popular Post with Animation

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

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
    
}

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




#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

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

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
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>

Don’t Copy This Post because this Original from my Blog (www.abu-farhan.com)
Please read Copyright of All post at the Footer.


Categories: Content Slider, Popular Post for Blogger, Widget

Tags: , , ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

74 Responses to “New Popular Post for Blogger With Animation”

  1. dario says:

    Hello can I explain step by step where is this code and paste it where you got it because I am a novice in these matters.
    Sorry for my english

  2. Flor says:

    Great idea, but the background is not working well. Blogger have made changes and somethings do not work well anymore. Any tip? Please see what happen here
    http://boas-maneiras.blogspot.com.br/

    Best wishes

  3. Julia says:

    Hello I love this widget. But it does not work. Please look. Sorry for my English. thanks

  4. Sang Biru says:

    Hi, now its working on my blog…may i have your permission to share your widget on my blog for my malaysian fellow, since some of theme have a trouble to finding a perfect widget for their own blog (newbie blogger). I volunteer to help them & traslate into my language. In return i will put your blog domain on my blog to promote yours. Of course i will tell them this widget are belong to you (not mine). I hope my shared idea will bring a good for both of us. Tq.

  5. Tarek Jamil says:

    Alhamdulillah, jaja kallah. It’s working. Thank you.

  6. obat says:

    Alhamdulillah…
    Manfaat.. Jazakilah khair..

  7. adesh says:

    awesome..after few customization ..its fitting nicely in my blog..
    http://www.divinehealth.co.cc

  8. xdisciple says:

    I followed the instructions and it isn’t working for me. The only problem is no animation…

  9. jiko says:

    PLEASE HELP MY POSTS ARE NOT ANIMATED?????????????HELPPPPP

  10. Nick Kalb says:

    Hello just wanted to give you a quick heads up. The words in your article seem to be running off the screen in Opera. I’m not sure if this is a format issue or something to do with internet browser compatibility but I thought I’d post to let you know. The design and style look great though! Hope you get the problem resolved soon. Many thanks

  11. souno says:

    Very nice and amazing and can we change the effects?

  12. hello, this post is amazing, i would like to read more about it, because think that this information is very interesting.
    mietwohnungen

  13. Wonderful post however , I was wanting to know if you could write a litte more on this topic? Id be very grateful if you could elaborate a little bit more. Thank you!

  14. HanaPipers says:

    :)

  15. Aldis says:

    thanks very much..
    i like it.. it’s great tips..

  16. dbestlists says:

    Hi Abu Farhan,
    Your an amazing tricks our review in “Best Popular Post for Blogger” http://www.dbestlists.com/featured/best-popular-post-for-blogger/.

    I hope next time you can often publish your tricks again and I review too in dbestlists.com :)

  17. Quiz says:

    i liked the slide very much
    thankx a lot

    is there any way i can show off my customized posts in the widget

    right now the poplar 10 come in the slide
    i want to show my selected 10 posts
    is it possible?

  18. Mas hasil jerih payahnya saya posting ulang di blog saya, tapi ada sumber content aslinya lagi… bolehkan mas??? ini postingannya mas http://international.hanifagrafika.com/2011/12/make-new-popular-post-for-blogger-with.html

  19. Soraorentee says:

    Transmute fleet the slice so it commitment lend abide up where you appetite search of it and eccentric on the gas the wire to power the bulb. This ascendancy impeach mounting the note on some unreliable of wood or earnest and then drilling a qualifications sanction of the lamp to wreathe the wire. If you do not paucity to omnibus a period seeking the well-mannered of a wire or cannot omnibus it, you can stilly concoct the lamp and influenced the wire brim down on the misstate of it from the socket to the plug.
    Lampie
    Mount the lamp socket near to your lamp. Regularly it starvation mount to your lamp on advancement of a osculate discomfited threaded pipe. You crucial hypothecate this miniature irish briar to your lamp in some sop; most to days drilling a slash and gluing or screwing the look at into the lamp. They also rep universal threaded pipes blanket of undeterred near lamps that can be hustle set up from climb to dim the lamp and vocal for on both ends with a tightening bolt.

  20. Bakers earn the majority of their income in the morning, they earn most of their dough at yeast by a leaven o’clock.

  21. Saif Afridi says:

    salam. i think i have found this blog a bit late.
    wonderful collections of blogger widgets. i was looking for such kind of stuff.
    admin
    Urdu Poetry Log Blog

  22. Assalamu alaikum wr. wb.
    Mas Abu Farhan, I already did everything in this tutorial, but my popular post not animated. Since my blog brand new and i have only two popular post, may be it caused the widget not work properly.
    Please if can modified this form to horizontal slider, i will appreciate it. Because i need to put in gadget on top under nav bar. By the way great job.

  23. Nining says:

    thanks infonya , tapi aku masih bingung , mengapa di new popular di blog aku nggak ada gambarnya ?? mohon bantuaannya :)

  24. allaboutww says:

    mas farhan….
    saya sudah mengikuti cara di atas, tp kok tidak bisa gerak ya? muncul cuman 4 dan tidak bisa gerak?

  25. Jeel Patel says:

    I applied on my blog. I am really happy with this. Thank you very much admin.

  26. Haekal says:

    Assalamualaikum, maaf saya mau tanya nih, kok pada saat saya memasangkan script ini memang berhasil, namun tetapi tidak bergerak, mengapa ya.. ? mohon beritahu apa masalahnya. Lihat pada : http://www.haekalblog.co.cc. Terima kasih Wasalam..

  27. gofree says:

    Can you make this into grid? I tried one from other site, but not not. With your code always work.

  28. quiz says:

    how to increase number of posts to 10…..i mean..the widget shows shows only 4 slides.i want 10…plz hlep abu farhan

  29. Great review! This is truly the type of article that needs to be shared around the web. Sad on the search engines for not positioning this post higher!

  30. Beben Koben says:

    we…ee…eee…gue telat nih melongok ke mari…xixixi
    saya pasang di blog saya, semua gak ada yg diem, dah bergerak-gerak semua..heoiehioehoihe

    mancap bos \m/

  31. Rausan says:

    hmm, nice look. i think i must put this widget on my second blog.

  32. aldi says:

    Assalamu’alaikum.

    mau tanya gan…
    itu kan kalo populer entry.
    kalo cuma mau nampilin beberapa entry yang kita pilih gimana?

    mohon pencerahannya…

    minal aidin wal faidin…

    Wassalamu’alaikum.

  33. Dear Brother Abu farhan…

    Assalaamu alaikum wa rahmathullah ….

    here i like to share this post to my mother toungue ‘malayalam’ …with credits to you and this site ..

    hope you will give permission to me through this comment box..

    thanks ..:)
    jazaakallah khairan ..:)

  34. me says:

    sory Mr. Abu.
    dari mana saya mendapat html/java script?
    apa saya harus mendownloadnya dulu?

  35. Derosteller says:

    Terima kasih master,,,saya mencari kesana kesini tapi tidak ketemu dan ketemunya disini…Oh iya apakah saya diperbolehkan untuk merubah bagian CSS nya???

  36. anil says:

    Sir This Gadget great look !

    Now it showing only recentposts , as showing on my website gumpul.com home page,

    and i would like to show selected lable feed posts like

    http://www.gumpul.com/2011/08/img_17.html

    but it should slide as your gadget how to please?

  37. invesmo says:

    Wow.
    Really cool Mr AbuFarhan, really I like all your post, always interesting, Jazak allaho Khairan
    Hopping you Good Ramadan Full of Health and funny times.
    Salam Alaicom warahmato allah wa barakatoho.

  38. tushar says:

    hi abu how can i customise more thing like text size ande specialy thumb image size ???

  39. […] 20th, 2011 Bismillah, Alhamdulillah. Last time I made Popular post for blogger with animation. Now I made Popular Post for Blogger with 3D Cube animation. This widget I made from Image Cube. […]

  40. Aziz says:

    Thanks Alot Bro This Tip Is Really Help Full To Me

  41. ocim says:

    Well these are very powerful widget for making attractive your Popular Post Gadget. Seriously amazing tips.

  42. bang jasmin says:

    assalamu ‘alaikum bung abu,…dari kemaren dicobain…tapi ga berfungsi..slidenya gak jalan?
    hehehe…makasih

    • Abu Farhan says:

      Wa’alaikumsalam
      di blog kamu sudah ada dua jquery, kalau ditambah ini makin error lagi. jquery cukup satu utk satu blog, kalau byk memperlambat dan bikin error

  43. Raindra says:

    wah bagus nih kang oh iya saya copas hasil akang yang Easiest Way to Make Tabbed Sidebar for Blogger tapi saya memberikan dari mana hasil copas saya ga-apakan alamatnya http://weblogzaumazalfiah.blogspot.com/2011/07/cara-membuat-tab-view-di-blogspot.html

  44. Thanks top mr.choen :D

  45. cimunmoses says:

    thanks mr. Abu….

  46. Vlad says:

    Sorry, I found what was the issue: I had to add more than 4 posts in the popular posts gadget.
    All the best

  47. Vlad says:

    Hello, thank you very much for your nice advices !
    Unfortunately on that script I have no animation, does anyone occur the same problem ?
    Best regards

  48. Abu Farhan says:

    Everything can modify, recent post is more easy, but using json is not SEO

  49. Haekal MF says:

    Maksudnya apaya ? saya tidak mengerti. Dan saya tidak pernah merubah kode dari aslinya, dan saya selalu menghargai karya oranglain. Tolong bantu saya, karena saya sudah menuruti perintah diatas, namun selalu gagal. adakal solusi ?

  50. dofmercy says:

    Also I had the same problem with text title is partly obscured..how to make all the text visible and make it start rotating again.Thank you in advance

Leave a Reply


one + one =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen