Widget Popular Post Blogger [II]

   Pasti tidak asing lagi kan dengan widget yang satu ini. Ya, seperti yang saya tulis pada post sebelumnya tentang widget popular post, widget kali ini secara umum sama, tetapi memiliki perbedaan sedikit yaitu widget yang satu ini dilengkapi dengan thumbnail gambar. Berikut screenshotnya.

sumber gambar : dokumen pribadi

   Dapat dilihat pada screenshot di atas, terdapat judul post pada pasing - masing kotak dan snippet berupa kalimat "test message", selain itu juga terdapat thumbnail gambar pada "Post 5" karena memang terdapat gambar pada post tersebut. Sedangkan untuk post yang lainnya tidak terdapat gambar, sehingga secara default tidak muncul di widget tersebut.

Untuk membuat widget popular post ini, tahap pertama adalah menambahkan widgetnya ke blog Anda.

1. Silakan Login Blogger --> Tata Letak. Untuk menampilkan Tata Letak silakan klik tanda panah ke bawah seperti di bawah ini.

sumber gambar : dokumen pribadi

2. Setelah masuk tata letak, pilih Tambahkan Gadget dimana Anda ingin menambahkannnya.

sumber gambar : dokumen pribadi

3. Lalu pilih Entri Populer, seperti pada screenshot di bawah ini.

sumber gambar : dokumen pribadi

4. Pada halaman baru yang muncul, sesuaikan pengaturan sesuai yang Anda inginkan, lalu klik Simpan.

sumber gambar : dokumen pribadi

Tahap kedua adalah menambahkan CSS.

1. Klik tab Template --> lalu pilih Edit HTML.

sumber gambar : dokumen pribadi

2. Setelah muncul kotak yang berisikan kode - kode HTML di dalamnya, klik di sembarang tempat dalam kotak tersebut, lalu tekan Ctrl + F, masukkan kode ]]></b:skin> pada kotak yang muncul di pojok kanan atas frame kode  tersebut (untuk melakukan search).

3. Setelah Anda menemukan kode tersebut, masukkan kode berikut ini tepat di atasnya.

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFFFFF;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
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;
}
<a href="http://www.nurwahidin.com/">nurwahidin</a>
.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);
}

Catatan : kode yang ditandai HIJAU di atas adalah kode warna HTML, jika Anda ingin mengganti silakan diganti sesuai keinginan Anda. Jika Anda tidak tahu kode HTML untuk warna tertentu silakan buka Colorhexa.

4. Lalu klik Simpan Template.

Silakan buka blog Anda untuk mengecek apakah kode tersebut berfungsi atau tidak.

Semoga bermanfaat. :-)