Modifikasi Widget Popular Post Menjadi Circle Thumbnail Yang Menarik

Modifikasi Widget Popular Post Menjadi Circle Thumbnail yang Menarik - Pada default blogger telah disediakan layanan menciptakan 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 tidak mengecewakan menarik. Tampilan gambar thumbnail berbentuk bulat dan dapat disentuh mouse akan berputar otomatis. Sangat menarik tentunya.

Cara menciptakan 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 sajian template, klik HTML. Cari kode ]]></b:skin> dengan santunan 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 karenanya 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.

Tweet

Subscribe to receive free email updates: