Friday, May 31, 2013

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!

Related Posts

Cara Merubah Widget Popular Post Dengan Sircle Image
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

7 komentar

Tulis komentar
avatar
June 3, 2013 at 6:28 PM

Keren Bro :D

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

Reply
avatar
October 12, 2013 at 6:51 PM

keren gan


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

Reply
avatar
December 24, 2013 at 8:59 AM

nice, tapi bukan ini yang aku cari

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

Reply
avatar
December 28, 2013 at 10:42 PM

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

Reply
avatar
February 10, 2019 at 1:54 PM

Agen Togel Online Terbaik & Terlengkap!
Tersedia Pasaran Hongkong - Sydney - Singapore
Potongan Diskon 2D = 30% | 3D = 59% | 4D = 66%
Dapatkan Keuntungan Dalam Menebak Angka Hingga Ratusan Juta Setiap Hari..
Yuk Gabung Bersama Bolavita Di Website www. bolavita .fun
Untuk Info, Bisa Hubungi Customer Service Kami ( SIAP MELAYANI 24 JAM ) :
BBM: BOLAVITA
WA: +628122222995

Reply

=======================================================
• 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]
=======================================================