CARA MUDAH MEMBUAT SLIDE DOWN POPULAR POST BLOG

Tutorial kali ini saya akan menjelaskan Cara Mudah Membuat Slide Down Popular Post  seperti pada blog saya, seperti gambar dibawah ini

 tentu saja pada gambar tersebut tidak bergerak karena itu hanya gambar.hehe
fungsi slide populer post untuk menghemat ruang pada blog anda selain itu dapat juga digunakan untuk mempercantik halaman blog, caranya mudah anda tidak perlu edit HTML hanya tinggal meng-copy code script dibawah ini dan meletakanya pada widget.
Berikut cara pembuatanya:
Langkah 1: Masuk Blogger, 

Langkah 2: Tata Letak >> Tambah Gadget >> pilih HTML/Java Script >> paste code dibawah ini.

<style type="text/css" media="screen"> #PopularPosts1 { overflow:hidden; margin-top:5px; padding:0px 0px; height:400px; } #PopularPosts1 ul { width:342px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #PopularPosts1 li { width:334px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:80px; overflow: hidden; background:#fff url() 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://bangjefri-code.googlecode.com/files/popularpost.js" type="text/javascript"></script>

Kemudian simpan.

NOTE: Ubah tinggi "Height: 400px" sesuai ukuran yang diinginkan.