Cara Merubah Widget Popular Post Dengan Sircle Image

Cara Merubah Widget Popular Post Dengan Sircle ImageMungkin sobat agak bosan dengan penampilan entri populer yang begitu-begitu saja, 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.
1. Login ke akun Blogger sobat..
 
2. Pilih Template
3. Edit HTML
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 Bermanfaat...and happy blogging!

Previous
Next Post »

6 komentar

Write komentar
June 3, 2013 at 6:28 PM delete

Keren Bro :D

# http://gerardo-yeah.blogspot.com

Reply
avatar
rizky redd
AUTHOR
October 12, 2013 at 6:51 PM delete

keren gan


#http://rizky-redd-cloud.blogspot.com/

Reply
avatar
December 24, 2013 at 8:59 AM delete

nice, tapi bukan ini yang aku cari

#http://5-oktober.blogspot.com

Reply
avatar
Henry Dwi.s
AUTHOR
December 28, 2013 at 10:42 PM delete

oke bro silakan cari artikel yang lain semoga ketemu apa yg sobat cari :D

Reply
avatar

=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]

• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]

• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]

• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]

• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
======================================================= EmoticonEmoticon