Inilah Modifikasi Widget Popular Post Menjadi Circle Thumbnail Yang Menarik

Modifikasi Widget Popular Post Menjadi Circle Thumbnail iyaang Menarik - Pada default blogger telah disediakan laiyaanan menciptakan widget popular post. Tetapi mungkin sebagian sahabat blogging kurang niyaaman atau kurang tertarik dengan bentuk dari default blogger tersebut.

Kali ini penulis akan membagikan widget popular post dengan bentuk iyaang tidak mengecewakan menarik. Tampilan gambar thumbnail berbentuk bulat dan dapat disentuh mouse akan berputar otomatis. Sangat menarik tentuniyaa.

Cara menciptakan widget popular post circle thumbnail

Jika tertarik dengan bentukniyaa, silakan ikuti tahapan pemasanganniyaa sebagai berikut.

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

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

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

4. Pastekan instruksi berikut sempurna 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 balasanniyaa pada blog sahabat.

Artikel rekomendasi Strategi Ampuh Meningkatkan Page Rank Blog.

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