Cara Membuat Popular Post Bergerak Ke Bawah

Dari judulnya ajah pasti sudah tau bukan dengan penggunaan tutorial yang satu ini. yakni supaya Postingan yang populer atau yang sering di kunjungi bisa lebih menghemat tempat. karena akan bergerak ke bawah. sobat bisa melihat contohnya di blog saya ini.

Niehh saya kasi caranya : silahkann disikaat...(wkwkkw) Luu kira sikat WC apaa...wkwkw

1. Login Diblog Sobat
2. Lalu masuk ke menu Tata letak.
3. lalu Klik Tambahkan Gadget, lalu sobat pilih Entri Populer 

 

 

Note : jika udah ada entri populernya diblog sobat, abaikan aja langkah ke 3,,langsung tancap langkah ke 4

4. Kemudian Pilih kembali Tambahkan Gadget, dan sekarang kita pilih HTML/JavaScript
5. Kemudian Copas ( Copy Paste ) kode di bawah ini

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

6. Kalau sudah di Copas , Sobat Pilih Simpan dan lihat hasilnya

Semoga berhasil ya ,,,
jangan lupa komentar dibawah oke...

BAGIKAN ARTIKEL : Facebook Twitter Google+ Linkedin