Mengedit Popular Post Blogger dengan CSS3

Popular post adalah sebuah widget yang menampilkan beberapa post yang paling banyak dikunjungi atau dibaca berdasarkan hari, minggu, bulan, atau selama-lamanya menurut perhitungan google analytic. Widget popular post sangat berguna bagi blog karena dapat menambah jumlah page views dan mempermudah pengunjung dalam mengexplorasi blog anda. Widget popular post tersedia diblogger secara gratis, tetapi desainnya itu sangat sederhana. Eits tetapi ada banyak cara untuk kita memperbagusnya, salah satunya dengan menambah sebuah kode css. Sekarang yang akan saya tunjukan adalah bagaimana memperbagus widget popular post ini. Jika anda tertarik ikuti step-step selanjutnya dan nanti hasilnya akan seperti gambar dipinggir. Tetapi sebelumnya baca dulu dong postingan yang berhubungan dengan popular post :

- Memperindah Popular Posts dengan Nomor Urut Otomatis {2 style}

- Cara Membuat Scroll pada Popular Post

- Cara menghemat area blog dengan Multi Tab Widget

Customize Popular Posts Widget With Css3

Langkah Pertama, tambahkan popular post di blog anda (jika belum memasangnya). Ikuti step berikut:

• Masuk ke Blogger
• Selanjutnya masuk ke Layout
• Lalu Add A Gadget
• Pilih Popular Posts dari daftar gadget dan setting seperti gambar dibawah ini atau terserah anda.
• Save

Langkah Kedua,  memasukan kode CSS ke dalam template anda :

• Pergi ke Templates 
• Masuk ke Edit Html
• Temukan kode ]]></b:skin> (gunakan fungsi CTRL+F)
• Copy Kode Dibawah Dan Paste diatas ]]></b:skin>.

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKHmeTaKwbbLadxoDjPHTi8gUKVS9u-maNzQ-a4rdrji32XyiE88gA-DJxRo267SXmlC9SpME7K68eA__ZeVEg5a1fWJQPTQLrH00gKzcqa91wqZjlBp1QjLQainYAYmqXA_HaQBKZhh4/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:2px solid #6BB5FF;

  background:#FFFFFF;

}

.popular-posts ul

  li a:hover {

  text-decoration:none;

  color:#78B6F4;

}

.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);

}

Keterangan :
→ Mengganti hover background (efek warna jika disentuh) #FFFFFF.
→ Untuk Mengubah Warna Link dari Judul, Ganti #78B6F4.
→ Yang berwarna / berlatar biru muda adalah url gambar icon pinggir (icon list). 
→ Save Template dan lihat .. blog agan semakin keren aja :D