Cara Membuat Popular Post Bergerak

Selamat datang di Tutorial blog Kancil .. nih ada tips atau pun trick yang wajib kalian baca dan praktekan .. insyaallah bermanfaat :)

Cara membuat agar popular post bergerak ke bawah . Cukup mudah ko cara nya .. Cara yang saya terapkan ini hanya degan menambah kode HTML tanpa mengedit template yang cukup ribet pengolahannya. hehe :D

Popular post ini biasanya ditampilkan di sebelah kanan atau kiri atau di bawah sebuah postingan sesuai selera masing-masing. Diantara fariasi widget popular post yang sering ditampilkan adalah dengan memasang kode HTML/Java Scipt agar popular post bisa berjalan kebawah seperti pada blog saya ini. Hal ini tentu akan menambah tampilan blog kita menjadi lebih menarik. 

Berikut ini cara yang harus sobat blogger praktekan :

1. Masuk ke Blog .. tentunya dengan email dan password kalian
2. Pilih Tata Letak
3. Tambah Gadget "Entri Popular" ( Jika gadget entri popular/ popular post sudah di sobat pasang ) langsung saja bro ke tahap selanjut nya
4. Tambah Gadget "HTML java script"
5. Copy kode di bawah ini dan paste pada gadget HTML java scrip tadi

<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="http://bangjefri-code.googlecode.com/files/popularpost.js" type="text/javascript"></script>

Setelah semua nya selesai simpan template dan lihat hasilnya. Jika sudah berhasil jangan lupa berkomentar yah, Demikian cara membuat popular post berjalan untuk menambah tampilan blog anda lebih menarik.