Cara Membuat Artikel Populer dengan Animasi Turun di Blogger Keren

Hay sahabat Mazinu? Sebelumnya mazinu maw tanya,, gimana keadaan kalian?? semoga baik-baik saja ya! Oke,, Kalian pasti ingi tahu caranya membuat Popular Post dengan animasi turun satu persatu begitu bukan?? ya.. mazinu setuju banget jika kalian menginginkan widget seperti itu,, karena akan membuat tampilan blog kita terlihat menarik bukan?? :) tapi mazinu tidak ingin memakai karena menuh-menuhin tempat blog "Untuk Sahabat" hehehe,, tapi berhubung saya orang yang baik,, niihh langsung saja mazinu kasih tahu caranya : silahkan disimak...!

Cara Membuat Artikel Populer dengan Animasi Turun

• Login dulu ke Blogger kalian.
• Masuk ke dashboard.
• Pilih Tata Letak => Tambahkan Gadget
• Lalu Pilih HTML/JavaScript.
• Masukkan Script dibawah ini 

<style type="text/css" media="screen">


#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:500px;
   
}


#PopularPosts1 ul {
width:300px;
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://camporbawor.googlecode.com/files/popularpost2.js" type="text/javascript"></script>

• Ingat : Tidak usah diberi judul,, oke??
• Kemudian untuk langkah selanjutnya :
• Masuk ke dashboard kalian lagi.
• Pilih Tata Letak => Tambahkan Gadget
• Lalu pilih Entri Populer / Popular Post,,,
  
• Simpan dan Lihat hasilnya,,
• Kalau punya mazinu Hasilnya seperti ini : 

• Tapi saya hapus aja, karena saya gak begitu minat,, yaa sekedar coba-coba saja awalnya,,!! truss mazinu postingkan buat sahabat2 mazinu aja,, hehehehe,,
• Yang masih bingung silahkan Komentar!