Cara Merubah Wiget Populer Post Dengan Circle Image Style

Cara Merubah Wiget Populer Post Dengan Circle Image Style - Pada turorial kali ini saya akan share "Cara Merubah Wiget Populer Post Dengan Circle Image Style" Tips ini digunakan untuk mengubah tampilan populer post sehingga lebih indah dan terlihat rapih.

Untuk Demo Lihat Gambar Berikut, Kurang lebihya seperti gambar yang saya pasang

Popular Post Telah selesai diEdit

Buat shobat yang mungkin tertarik mengubah populer post shobat, langsung saja berikut tutorial, Cara Merubah Wiget Populer Post Dengan Circle Image Style:

1. Langkah awal Login ke blogger shobat
2. Klik Rancangan/Template
3. Edit HTML
4. Cari kode  ]]></b:skin> dan Pastekan Kode CSS dibawah 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);}

5. Save Template shobat dan lihat hasilnya.

Demikian saya share Cara Merubah Wiget Populer Post Dengan Circle Image Style, Semoga bermanfaat khususnya buat saya dan umumnya buat shobat semua.