Cara Modifikasi Widget Popular Post Dengan Sircle Image

Lumayan pusing untuk menentukan judul yang tepat untuk artikel kali ini akhirnya setelah lumayan berpikir panjang akhirnya artikel kali ini saya beri judul Cara Membuat Widget Popular Post Dengan Sircle Image".

Salah satu widget yang disediakan oleh blogger ialah widget popular post yang mana widget tersebut masih dapat sobat mudifikasi tampilannya agar lebih menarik dengan merubah tampilah image atau thumbnailnya berbentuk lingkaran atau sircle.

Untuk lebih jelasnya liat gambar di bawah ini.

Cara modifikasinya adalah sebagai berikut.

1. Login ke blogger atau klik disini»
2. Pilih Template » Edit Html » Lanjutkan.
3. Jangan lupa centang Expand Template Widget.
4. Cari code ]]></b:skin> kemudian copy paste code di bawah ini dan letakkan di atas code ]]></b:skin>

.popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:left;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;font-family: Arial Tahoma, Verdana;!important;font-weight:550; border: 1px solid #ccc; 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. Simpan dan lihat hasilnya.

Semoga tutorial kali ini bermanfaat dan jangan lupa untuk meninggalkan komentar demi kemajuan blog ini. Terimakasih :)