Edit Widget Artikel Populer Dengan CSS Untuk Blogger

Tweet

D-Copy Blog | Seperti pada postingan sebelumnya yaitu mengedit artikel populer tanpa CSS kali ini widget artikel populer official blogger akan diedit dengan efek CSS yang pastinya membuat widget ini akan terlihat lebih keren.

Langkah :

1. Buka akun Blogger Anda
2. Masuk ke menu Layout > Add Gadget > Popular Post (jika Anda belum menggunakan widget artikel populer), lalu buat dengan pilihan seperti pada gambar dibawah ini :

    3.  Lalu Save

    4.  Masuk ke menu edit HTML, jangan lupa centang Expand Template Widget

    5.  Cari kode dibawah ini :

]]></b:skin>

    6.  Pastekan kode dibawah ini, diatas pada kode diatas :

<style>
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg27lBUXDgeHE5j5VefXOlfTMFzCGBwD0q9wVj02dTpUBFqgZHTYTsl7KMvw0EqypmAxjnEK1SEdfnVMMFpeqn8s8pAeUZiwthxXF8BDJhYNuXKjxiW9Ri80-YmhOysR_29OSJ3CyKttmQ/s1600/rb+cancel+icon...jpg) no-repeat scroll 5px 10px;
list-style-type: none;
margin: 0 0 5px 0px;
padding: 5px 5px 5px 33px !important;
border: 1px dashed #dddddd;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.popular-posts ul li:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZedWqjtTvQ3IfW8I9Ff0cn4RlfgyNm73BGn9v7nRj4yxv9Oz8yvAjHVYOPyG5KQAlIDVMktF94fHgZIZI5aingkZdN3_qEoseWy8aqlvuECVB1phGxp8O3vwsIQ7xwyWBj8kIoSmS1E/s1600/rb+mark+icon...jpg) no-repeat 2px;
border: 2px solid #b60000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
</style>

    7.  Save Template Anda.

Semog bermanfaat, terima kasih.
Sumber Artikel : http://www.realcombiz.com/2012/10/customize-blogger-official-popular.html