cara mudah membuat popular post bergerak secara otomatis

selamat malam sob,, sekarang saya akan berbagi sedikit ilmu yang saya dapatkan saat blogwalking .
Mungkin buat para blogger pasti pernah melihat popular post bergambar yang bergerak sendiri kebawah saat sedang blogwalking. jika anda ingin membuatnya juga maka akan saya jelaskan sekarang juga.
Fungsi Membuat Popular Posts Bergerak Otomatis yaitu agar pengunjung bisa melihat seluruh
artikel yang populer tanpa memakan banyak tempat diblog. atau hanya untuk memperindah & mempercantik tampilan, agar pengunjung betah berlama-lama di blog kita.
Jika anda tertarik silahkan simak Tutorial dibawah ini:

Cara Membuat Popular Posts Bergerak Sendiri kebawah
1.Log in ke blog
2.Pilih Tata Letak
3.Tambah Gadget
4.Klik tanda + disebelah tulisan Entri Populer

5.Simpan
6.Pilih Tambah Gadget lagi
7.Klik tanda + disebelah tulisan HTML/JavaScript
8.Copy kode dibawah ini dan paste dikotak  HTML/JavaScript

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

#PopularPosts1 {
overflow:hidden;
margin-top:2px;
padding:0px 0px;
height:310px;
border-bottom: 1px solid #eeeeee;
}
#PopularPosts1 ul {
width:280px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:280px;
padding: 5px 5px;
margin:0px 0px 2px 0px;
list-style-type:none;
float:none;
height:75px;
overflow: hidden;
background:none;
}
#PopularPosts1 li .item-title {
    color:#ffffff;
    font-size:12px;
    margin-bottom: 2px;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#fffff;
font-size:12px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:none;
border:0;
}
#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:12px;
color:#ffffff;
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: 0px;
    -moz-border-radius: 0px;
}
.tags span,
.tags a {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}
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>

9.Simpan
10.Geser Widget kode diatas lalu taruh diatas atau dibawah letak widget Popular Posts


11.Simpan Setelan

artikel terkait