Cara Membuat Side Bar Artikel Populer Bergerak

Artikel terpopuler adalah artikel yang biasanya memiliki jumlah pembaca paling banyak. Sebenarnya dari Blogger sendiri sudah menyediakan fasilitas ini. Tapi mungkin terlalu standar dan tanpa efek khusus, sehingga banyak kurang puas untuk menggunakannya. Oleh karena itu kali ini saya akan memberikan tutorial mengenai cara membuat widget popular post (artikel terpopuler) yang dapat bergerak.
Emang apa gunanya dari widget ini? Widget ini sangat membantu pengunjung dalam menentukan artikel yang mungkin ingin dibaca selanjutnya. Dengan melihat jumlah pembacanya membuat pengunjung penasaran ingin membacanya juga.

Langsung aja ke pembahasannya,
Langkah-langkah yang harus dilakukan dalam membuat artikel populer yang dapat bergerak:

• Login ke akun Blog anda.
• Pilih menu "Tata letak".
• Kemudian Pilih "Tambahkan Gadget", dan tambahkan gadget "Entri Populer" (jika anda sudah menambahkan widget ini sebelumnya, lewati tahap ini).

• Masih pada menu Tata letak >> Tambahkan Gadget >> Sekarang tambahkan widget "HTML/Javascript".

• Jika sudah isikan kontennya dengan kode dibawah ini,

<style type="text/css" media="screen">
#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:280px;
}
#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="https://pesan-bocah-alus.googlecode.com/files/artikelpopular.js" type="text/javascript"></script>

Keterangan:
Untuk kode yang berwarna biru bisa anda hapus, jika anda sudah menggunakan Jquery pada Blog anda sebelumnya.

• Jika sudah klik "Simpan".
• Letakan widget "HTML/Javascript" dibawah widget "Entri Populer".

• Sekarang lihat yang terjadi pada Blog anda.

Semoga bermanfaat.
Sumber : http://bocah-alus.blogspot.com