Cara Membuat tampilan popular post lebih ramping

Posted by Serba Serbi Bisa Posted on June 12, 2016

Popular Post adalah sebuah widget yang disediakan oleh blogger untuk mepercantik blog dan bisa meningkatkan page view sebuah blog dengan memasang widget ini bisa meningkatkan pengunjung blog untuk mengklik post kita sehingga page view blog jadi bertambah

jika tidak tertarik dengan widget post popular bawaan blog yang bisa menyita page blog semakin luas atau semakin penuh dan sempit, nah untuk merampingkan widget ini ada caranya, jadi jangan khawatir dengan tampilan widget bawaan blogger yang kurang enak di lihat

pengaturan nya tidak serumit apa yang kita pikirkan hanya dengan penambahan kode di CSS.

Cara membuat tampilan Popular Post lebih ramping ini akan dibahas di blog ini

ini contoh post popular

• Login Blogger dan Masuk ke pengaturan Tata Letak - Tambahkan Widget - Pilih Entri Populer

• Centang thumbnail gambar dan klik Simpan

• Setelah widget di tambahkan sekarang mengatur tampilan widget Popular post agar menjadi Ramping di blog

caranya adalah copy kode CSS berikut dan tambhahkan ke CSS blog anda

/* Merampingkan Widget popular post by kangobboy.blogspot.com  */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
font:normal normal 11px/1.4 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
color:#666666;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 10%;
width:35px;
height:35px;
float:left;
}
.PopularPosts ul li {
background-color:#f3f3f3;
margin:1% .5em -5% 0;
padding:.5em 1.5em .5em .5em;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight;
font-size:120%;
color:inherit;
text-decoration:none;
}

• Masuk Dasboard Blogger pilih Template dan Klik Sesuaikan

• Pilih Tingkat Lanjutan dan Tambahkan CSS Letakan kode script yang di paling bawah

NB:
Untuk mengganti warna background rubah kode yang berwarna merah dengan kode warna kesukaan
.PopularPosts ul li {  background-color:#f3f3f3; << ganti kode warna merah dengan kode kesukaan
  margin:1% .5em -5% 0;  padding:.5em 1.5em .5em .5em;   position:relative;

Untuk mencari kode warna anda kesini www.color-hex.com

• kemudian Terapkan ke Blog anda jika sudah selasai dan tampilan widget Popular post anda sekarang jadi ramping

Demikian Cara membuat tampilan Popular Post lebih ramping Semofa bermanfaat

Jangan Lupa tinggalkan jejak anda dengan berkomentar