Cara Membuat Entri Populer Dengan Efek Slide Pada Blog

Guys apa kabar hari ini, semoga harimu menyenangkan, kali ini saya akan membahas "Cara Membuat Entri Populer Dengan Efek Slide Pada Blog"

1. Log in ke blog anda

 
2. Kemudian pilih tata letak, klik tambahkan Gadget

3. Maka akan muncul (seperti gambar di bawah ini) pilih entri terpopuler

4. Lalu akan muncul (seperti gambar di bawah ini), langsung simpan saja

 
#saat ini kita akan membuat entri terpopuler menjadi efek slide

5. Pilih Tata letak, tambahkan Gadget

  








 
6. Lalu pilih HTML/Javascript

 
7. Salin code di HTML/Javascript

<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:2px;
padding:0px 0px;
height:400px;
}
#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 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:none;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:12px;
    margin-bottom:2px;
}
#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:12px;
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"></scrip >

8. Klik simpan, 
9. Posisikan Entri populer dan kode HTML/Javascript harus berdekatan seperti gambar berikut

 






 


10. Kemudian simpan setelan dan lihat hasilnya

Oke guys sekian terima kasih, nantikan post terbaru saya

SEMOGA BERMANFAAT