Share Caraku - Cara membuat Slide Post Populer pada Blog

By Organik Share

2/14/2016

Share Caraku - Sobat blogger, pada kesempatan kali ini saya akan share artikel mengenai Cara membuat Slide Post Populer pada Blog Bila sobat blogger bertanya-tanya apa itu Post populer, berikut saya jelaskan tentang entri populer.

Post Populer adalah artikel blog Anda yang paling sering di baca oleh pengunjung blog sobat. Dengan adanya Post 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.

Sekian Artikel dari saya, semoga artikel ini dapat berguna dan bermanfaat buat sobat blogger. Tunggu info artikel lain dari saya. Jika ada yang kurang jelas silahkan bertanya pada kolom komentar. Happy Blogging

Share :

Facebook Twitter Google+ Lintasme