Menambahkan Slide Pada Entri Populer Default Blogger

Dalam kesempatan yang sempit ini, Kang Onk akan share cara menambahkan slide pada entri populer (populer view) bawaan dari blogger. Fungsi ini sama dengan tutorial disini dan ini hanya saja tutorial kali ini lebih simple dan menarik (menurut Kang Onk, red). Bahkan cara pembuatannya juga sangat gampang segampang membalikkan tangan.

Dalam postingan kali ini mungkin sangat menarik perhatian pengunjung blog anda karena tampilannya sangat cantik.... hehehehe.

Langsung saja pada langkah berikut:

• Masuk ke akun Blogger Anda;


• Pilih Rancangan;


• Klik tab Tambahkan Elemen;


• Pilih Entri Populer, pada display up to pilih angka 4;


• Lalu Simpan;


• Lalu Tambahkan Elemen;


• Pilih HTML/JavaScript


• Copy paste kode dibawah kedalam HTML tersebut;


• Lalu Simpan, selesai.

<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;

height:310px;

}
#PopularPosts1 ul {
width:310px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}
#PopularPosts1 li {
width:295px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIraEZFSi1VKcPKg8b_srCHTO47dsj8kgJ_hg8aZ5u2dWXX2rpRT4mRkCvb_E2PKFPdu6_yB_fymOyB73S5wukcHs-C2vSxhG-l-5SXZCMuhXPjlZczW499wTc2oWzFKMqfgSFQOikbXA/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
font-size:1em;
margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;

color:#7CA2C4;

font:bold 12px verdana;

height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:1px solid #CCCCCC;
}
#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Verdana, Arial;
font-size:11px;
color:#FFFFFF;
padding:0px 0px 0px 0px;
margin:0px 0px 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"></script>

Penempatan gadget/widget yang baru ditambahkan bisa diliat dibawah ini

• Orange:Tinggi pada widget.


• Biru: Warna dan font link judul.


• Merah : merupakan border dari image postingan anda.


• Kuning : ringkasan postingan anda.

Silakan modifikasi sesuai keinginan anda,
Selamat mencoba dan semoga berhasil