Cara Membuat Populer Post Beranimasi

Heemmmm Akhirnya bisa postingan lagi ne... setelah postingan terakhir kemaren Model Mouse Berbentuk Ferrari Merah kali ini saya akan berbagi tentang Cara Membuat Populer Post Beranimasi. owh ya sebelumnya postinagn ini saya persembahkan bagi anda yang belum tau atau masuk kategori newbie. bila sudah mengerti yang kayak gitun, Silahkan lewat hehehehe.
Gambar dibawah ini sekilas demo dari postingan kali ini.

Bagaimana dengan gambar diatas, sudah jelas kan? bila masih kurang jelas bisa lihat blog demonya DISINI
Cara ini sangat mudah tinggal masukkan Script di bawah ke dalam "Gadget" Blogger
Masuk ke Blogger Dashboard dan Pilih Design - Page Elements
Klik "Add Gadget" dan pilih "Popular Posts" jumlah popular postingan harus lebih banyak dari 4 (Jika sudah ada gadget ini jangan masukan lagi)
Sampai disini Anda sudah mempunyai Populer post tapi belum bisa beranimasi.
karena anda sudah mempunyai Popular Post Gadget kemudian klik "Add Gadget" lagi dan pilih "HTML/Javascript"
Letakan semua script di bawah ke dalam "Content" dari HTML/Javascript Gadget
Selesai, semua otomatis menjadi Popular post mempunyai animasi

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

Nah Populer Post Beranimasi sudah selesai tinggal lihat hasilnya
Jika sudah kelihatan hasilnya jangan lupa komentarnya ya hehehe (Ngarep...)