Cara Membuat Entri Populer Dengan Efek Slide Pada Blog

Cara Membuat Entri Populer Dengan Efek Slide Pada Blog -

Sobat blogger, pada kesempatan kali ini saya akan share artikel mengenai Cara Membuat Entri Populer dengan Efek Slide Pada Blog. Bila sobat blogger bertanya-tanya apa itu entri populer, berikut saya jelaskan tentang entri populer.

Entri Populer adalah Entri/artikel blog Anda yang paling sering di baca oleh pengunjung blog sobat. Dengan adanya entri populer, sobat blogger bisa mengetahui artikel mana yang sering dibaca dan dikunjungi oleh pengunjung blog.

Daripada panjang lebar menjelaskan apa itu entri populer, lebih baik sobat mencobanya agar lebih memahaminya. Berikut saya jelaskan cara pembuatannya.

 

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

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

 

• Konfigurasikan Entri Populer seperti pada gambar.  

 

• 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 >

• Klik Simpan.Posisi Entri Populer dan Kode HTML/Javascript harus berdekatan seperti pada gambar.

• Kemudian Simpan lagi dan liat hasilnya.

Artikel : Mari Berbagi