Cara Menciptakan Popular Post Bergerak Ke Bawah

Ok kita lanjut postingan Belajar Blog bersama, kali ini admin mau share Cara Membuat Popular Post Bergerak ke Bawah. Mungkin bagi para blogger menciptakan popular post sudah pada tau dan sudah tidak absurd lagi sebab memang sudah disediakan di sajian tambah widget, namun tampilan yang disediakan/defaultnya masih biasa saja dan tidak bergerak. Nah, pada kesempatan ini admin akan memperlihatkan trik supaya popular post tersebut jadi bergerak kebawah. Yuk mari disimak :

Untuk menggunakannya ikuti langkah berikut ini :

1. Login/masuk ke situs Blogger.com

2. Masuk ke TATA LETAK

3. Tambahkan Gadget Widget (HTML/Javascript) untuk popular post biasanya disidebar

4. Copy Semua Kode ini & paste ke Widget (HTML/Javascript) tersebut

<style type="text/css" media="screen">      #PopularPosts1 {     overflow:hidden;     margin-top:5px;     padding:0px 0px;     height:400px;      }      #PopularPosts1 ul {     width:300px;     overflow:hidden;     list-style-type: none;     padding: 0px 0px;     margin:0px 0px;     }      #PopularPosts1 li {     width:292px;     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> 

Keterangan:

   - Untuk ganti lebar/panjang kolom dapat menganti height dan width yang berbau" itu
   - Untuk ganti warna backround cari yang berbau background, ganti warnanya #fff
     atau dapat mencari background dengan memakai url
   - Selebihnya dicoba sendiri untuk font, border, dsb

5. Ok, sudah beres kini simpan instruksi HTML tadi dan lihat di kanan blog untuk hasilnya