Modifikasi Widget Popular Post Menjadi Lebih keren

Written By PENDIDIDKAN Sunday, September 21, 2014 Add Comment Edit

Modifikasi Widget Popular Post Menjadi Lebih keren - widget Populer post merupakan menampilkan artikel terpopuler anda, baik itu baru maupun sudah lama. Populer post menyediakan widget populer post namun tampilan dasar yang Blogger sediakan hanya memiliki tampilan standar.

Anda pastinya ingin merubah tampilan entri populer post agar terlihat lebih menarik dan cool tentunya, itu merupakan salah satu dasar alasan widget populer post dimodifikasi sekian rupa. Untuk penerapannya sebelumnya anda menerapkan widget populer post dulu, untuk yang sudah terpasang mari kita lanjutkan, tapi untuk yang belum berikut cara pemasangannnya :

L1 - Pemasangan widget populer post
=> Pertama anda login keakun Blogger
=> klik Tata letak
=> add Gatget
=> anda pilih Entri populer

=> Untuk menampilkan gambar anda beri tanda ceklis image Thumbnail
=> Jika anda ingin menampilkan beri ceklis juga pada cuplikan
=> Lalu anda save

L2 - Pemasangan CSS
Selanjutnya yaitu pemasangan CSS, anda klik Template => Edit Template => selanjutnya anda cari kode ]]></b:skin> => Jika sudah anda terapkan kode dibawah ini seblum kode ]]></b:skin> tepatnya diatasnya.

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dcdcdc;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
background:#0083DA;
}
.popular-posts ul li a
{
text-decoration:none;
font:14px Georgia, verdana;
color:#222222;
}
.popular-posts ul li a:hover {
text-decoration:none;
color:#fff;
}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK7d_7VkRmS2-J00BRre87hIs1qnBAUnw2Xc0LVH8uc9Ksy8zAVOHMOfxT8n6aKK0QnKpNScJWhyphenhyphenVGfFYf_MVaoVFiI6LfMrB9RQEssVPTD8V_m0A6tCqNYwBY6gzfszK4p8P3NAVOGgI/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

=> Simpan Template

Demikian Modifikasi Widget Popular Post Menjadi Lebih keren, semoga bermanfaat!