Modifikasi Widget Popular Post Menjadi Circle Thumbnail yang Menarik

Modifikasi Widget Popular Post Menjadi Circle Thumbnail yang Menarik - Pada default blogger telah disediakan layanan membuat widget popular post. Tetapi mungkin sebagian sahabat blogging kurang nyaman atau kurang tertarik dengan bentuk dari default blogger tersebut.

Kali ini penulis akan membagikan widget popular post dengan bentuk yang lumayan menarik. Tampilan gambar thumbnail berbentuk lingkaran dan bisa disentuh mouse akan berputar otomatis. Sangat menarik tentunya.

Cara membuat widget popular post circle thumbnail

Jika tertarik dengan bentuknya, silakan ikuti tahapan pemasangannya sebagai berikut.

1. Terlebih dahulu buat widget popular post. Silakan baca Cara Membuat Widget Popular Post pada Blog.

2. Edit widgetnya dengan memberi centang pada thumbnail dan biarkan kosong pada snippet. Lalu Save.

3. Kemudian menuju menu template, klik HTML. Cari kode ]]></b:skin> dengan bantuan Ctrl+F.

4. Pastekan kode berikut tepat di atas kode ]]></b:skin>.

.popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border: 1px solid #58ACFA; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .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);height:70px;width:70px;}.popular-posts .item-thumbnail img:hover { -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);-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);}

Save template. Lalu lihat hasilnya pada blog sahabat.

Artikel rekomendasi Strategi Ampuh Meningkatkan Page Rank Blog.

Demikian tutorial cara memodifikasi widget popular post menjadi circle thumbnail yang menarik. Semoga bermanfaat dan selamat mencoba.