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.
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
<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.
69 Responses to “New Popular Post for Blogger With Animation”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
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
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
Hello I love this widget. But it does not work. Please look. Sorry for my English. thanks
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.
Alhamdulillah, jaja kallah. It’s working. Thank you.
Kaga Mutar Gan
Alhamdulillah…
Manfaat.. Jazakilah khair..
awesome..after few customization ..its fitting nicely in my blog..
http://www.divinehealth.co.cc
I followed the instructions and it isn’t working for me. The only problem is no animation…
PLEASE HELP MY POSTS ARE NOT ANIMATED?????????????HELPPPPP
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
Very nice and amazing and can we change the effects?
hello, this post is amazing, i would like to read more about it, because think that this information is very interesting.
mietwohnungen
Wonderful post however , I was wanting to know if you could write a litte more on this topic? I’d be very grateful if you could elaborate a little bit more. Thank you!
:)
thanks very much..
i like it.. it’s great tips..
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 :)
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?
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
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.
Bakers earn the majority of their income in the morning, they earn most of their dough at yeast by a leaven o’clock.
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
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.
thanks infonya , tapi aku masih bingung , mengapa di new popular di blog aku nggak ada gambarnya ?? mohon bantuaannya :)
mas farhan….
saya sudah mengikuti cara di atas, tp kok tidak bisa gerak ya? muncul cuman 4 dan tidak bisa gerak?
I applied on my blog. I am really happy with this. Thank you very much admin.
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..
Wa’alaikumsalam
Nggak mungkin gerak karena jumla popular posts nya cuma 4 harus lebih dari 4
Caranya bagaimana ya ?
Saya sudah menampilkan postnya lebih dari 4 tapi tetap saja ? bagaimana ya ? mungkin saya bisa mengirimkan email dan password blog saya ke email anda untuk dirubah Hot Article nya. Saya mohon…
Can you make this into grid? I tried one from other site, but not not. With your code always work.
how to increase number of posts to 10…..i mean..the widget shows shows only 4 slides.i want 10…plz hlep abu farhan
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!
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/
hmm, nice look. i think i must put this widget on my second blog.
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.
Wa’alaikumsalam, ini hanya modifikasi popular post dr blogger jadi tidak bsa pilih2. Ini otomatis menampilakn entry yg populer
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 ..:)
wa’alaikumsalam wa rohmatullahi wabarokatuh
ok
very thanks …
jazaakallah khairan …:)
assalaamu alaikum ..it is not working …!!!!!
pls check this blog
http://chipism.blogspot.com/
sory Mr. Abu.
dari mana saya mendapat html/java script?
apa saya harus mendownloadnya dulu?
ada di “add gadget” cari saja “HTML/Javascript”
Terima kasih master,,,saya mencari kesana kesini tapi tidak ketemu dan ketemunya disini…Oh iya apakah saya diperbolehkan untuk merubah bagian CSS nya???
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?
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.
wa’alaikumsalam warohmatullahi wabarokatuh
waiyyakum
hi abu how can i customise more thing like text size ande specialy thumb image size ???
you can change text size using css style.
for image size I’ll make new script to change the size of image.
[...] 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. [...]
superb boss
Thanks Alot Bro This Tip Is Really Help Full To Me
Well these are very powerful widget for making attractive your Popular Post Gadget. Seriously amazing tips.
assalamu ‘alaikum bung abu,…dari kemaren dicobain…tapi ga berfungsi..slidenya gak jalan?
hehehe…makasih
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
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
ok ga apa
nice post e
Thanks top mr.choen :D
thanks mr. Abu….
Sorry, I found what was the issue: I had to add more than 4 posts in the popular posts gadget.
All the best
Thanks, I have to write in my post about it
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
Everything can modify, recent post is more easy, but using json is not SEO
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 ?
Afwan
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