Modifikasi Populer Posts Default Blogger

Untuk tidak memberatkan pemasangan widget pada blogger salah satunya adalah memanfaatkan widget-widget bawaan blogger (default). Sebab widget tersebut tidak menggunakan javascript yang bisa berpengaruh pada loading blog.

Seperti halnya pada tutorial kali ini akan dibahas tentang cara memodifikasi populer posts yang disediakan oleh blogger tanpa harus mengotak-atik javascript pada blog.

1. Menambahkan Default Populer Posts pada Widget

Saatnya anda memasang modifikasi Populer Posts pada widget blog anda dengan langkah seperti ini.

• Login Blogger dengan akun anda;
• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget);
• Pilih Populer Posts Blogger;
• Simpan Gadget.

ini ditunjukkan pada gambar berikut :

2. Menambahkan kode CSS pada Template

untuk memodifikasi tampilan Populer Posts Default Blogger, anda harus meng-copy paste kode CSS berikut sebelum tag  ]]></b:skin>

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpaV4HFdq360YRkrU-Lw2paUjidQVjPxQpTfhJ-dRlA82uSCJ5jVGnDnD_wrsjQ16gITkXvnI4O9fc42WYDbmRMilqZEWj8DLwTJGl9UY7lBQTvHy2bAxPefWDKG3pEJRM0OVbeY71SKA/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ECECEC;
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;
}

Catatan :

• Untuk mengganti image bullet anda silakan ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpaV4HFdq360YRkrU-Lw2paUjidQVjPxQpTfhJ-dRlA82uSCJ5jVGnDnD_wrsjQ16gITkXvnI4O9fc42WYDbmRMilqZEWj8DLwTJGl9UY7lBQTvHy2bAxPefWDKG3pEJRM0OVbeY71SKA/s400/261.gif
• #ECECEC merupakan background yang bisa anda ganti sendiri.
• Untuk mengganti border-nya bisa anda lihat ini #6BB5FF

Semoga ini bermanfaat bagi anda semua.

Source : Kang Fathur