Cara Membuat Post Popular Dengan Animasi

Seberapa perlukah kita memasang Popular Post di Blog kita?

Dengan kita memasang widget ini sangat bagus untuk menampilkan beberapa artikel di Blog kita  yang sering dikunjungi,sehingga para pengunjung pun dapat mudah mengetahui beberapa artikel yang sedang ramai di Blog kita. Tentunya dengan kita membuat sebuah artikel yang menarik,berguna / bermanfaat bagi orang lain,unik,sesuatu yang baru dll,saya rasa dan tidak ragu lagi akan menjadi salah satu postingan yang akan banyak dikunjungi.

Selain dengan hal yang diatas,secara tidak langsung kita sudah memamerkan hasil karya tulisan kita yang terbaik di Blog kita. Maka,satu saran saya yang saya pun sangat sulit membuatnya,buatlah artikel yang menarik,mudah dimengerti,unik apa lagi sangat bermanfaat bagi semua orang dll. 

Tentunya cara yang akan kita gunakan ini sangatlah mudah,kita hanya tinggal Copy-Paste script kedalam HTML/Javascript.

Cara Membuat Post Popular dengan Animasi :

• Login ke Blogger.
• Masuk ke Dashboard Blogger.
• Pilih menu Elements.
• Klik Add Gadget.
• Ditahap ini kita harus membuat gadget Popular Post terlebih dahulu dengan cara pilih "Popular Post" (gadget bawaan dari Blogger) dan jumlah popular postingan harus lebih banyak dari 4,maka kalian setting terlebih dahulu jumlah Popular Post yang akan kalian tampilkan nantinya. Lihat gambar dibawah ini. Apabila sebelumnya kalian sudah pernah membuat di point ini kalian lewati saja.

 Lalu setting jumlah postingannya seperti gambar dibawah ini :

• Setelah kita mempunyai gadget Popular Post bawaan dari Blogger selanjutnya kita klik Add Gadget lagi.
• Dan yang dipilih adalah HTML/Javascript.
• Lalu Copy - Paste kode dibawah ini kedalamnya :

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

• Selanjutnya klik Save / Simpan.
• Selesai,maka secara otomatis Post Popular dengan animasi akan tampil dengan sendirinya.

Maka hasilnya akan seperti yang ada di halaman depan (home) Blog Alandiny ini atau seperti gambar dibawah ini :

Mudah kan?

..Selamat Mencoba..