Cara memodifikasi Widget Popular Posts Dengan Circle Image Style

Pada Kesempatan Kali ini Saya akan berbagi tentang cara memodifikasi Widget Popular Posts Dengan Circle Image Style. Widget popular posts ini merupakan widget bawaan blogger, modifikasi yang kita buat hanya menambahkan CSS dan tidak akan mempengaruhi kecepatan Looding Blog Anda. Jadi jangan khawatir blog anda akan lemot saat loodingnya, karna itu takkan terjadi, kecuali gangguan dari internetnya/signal modem Anda lagi lemot.

Tak Perlu Penjelasan panjang lebar lagi, Saya akan memberikan Langkah-langkahnya sebagai Berikut!

1. Setelah login ke akun anda pada bagian tata letak>> Tambah gadget>> Tambahkan popular posts bawaan blogger dan konfigurasikan widget dengan mencenteng kotak kecil thumbnail dan biarkan kosong pada kotak kecil snippet. Simpan.
2. Kemudian masuk pada bagian template>> edit HTML >> Cari kode ]]></b:skin>   Supaya memudahkan teman2 dalam mencari kode tersebut maka saat sudah masuk di edit HTML Tekan Ctrl + F maka akan muncul Searh Find, Lalu copy kode ]]></b:skin>   Maka akan muncul dan ini memudahkan teman2.
3. Lalu Salin dan tempelkan kode CSS berikut diatas 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);}

 
Selanjutnya Simpan Template Anda, dan liatlah hasilnya..

Selamat mencoba dan bermamfaat.

Contoh exprimen kecil-kecilan saya

 

SAMPLE BLOGGER

Tweet