Cara Membuat Tampilan Slide pada Entri Populer di Blogspot

Hallo sobat blogger semuanya salam hangat dari saya.

Kali ini saya ingin sedikit berbagi Tips agar tampilan Entri Populer anda lebih menarik yaitu berbentuk slide atau bisa berjalan kebawah dengan sendirinya. Entri Populer adalah postingan dimana postingan tersebut paling banyak di baca dan di tayangkan. Pastinya sobat blogger mempunyai banyak postingan seringga postingan tersebut melorot kebawah. Nah disini saya akan berbagi trick nya agar Entri Populer anda bisa lebih menarik di pandang dan tidak melorot.

Langkah yang pertama adalah dengan membuat / menambah gedget Entri Populer dari blogger.

Cara Membuat Tampilan Slide pada Entri Populer di Blogspot

Masuk ke akun blog sobat.
Pilih Tata Letak =>> Add Gedget
Pilih Entri Populer

Pengaturannya harus sama dengan gambar di atas
Kemudian Simpan.

Langkah yang kedua adalah dengan memasukan kode Javascript kedalam Blog.

Pilih Tata Letak, kemudian Pilih Add Gedget.
Pilih HTML/Javascript.
Kemudian Masukan kode dibawah ini ke dalam 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 >