Cara membuat widget populer post dengan sudut bundar menggunakan CSS3

Dalam kesempatan kali ini taukahbahwa.blogspot.com akan menyajikan berita tentang Cara membuat widget populer post dengan sudut bundar menggunakan CSS3. Semoga dengan berita Cara membuat widget populer post dengan sudut bundar menggunakan CSS3 akan menambah wawasan untuk anda pembaca setia taukahbahwa.blogspot.com

Dalam tutorial kali ini saya akan menjelaskan ke anda bagaimana cara membuat widget populer post dengan sudut bundar menggunakan CSS3. Widget ini berfungsi dengan baik disetiap browser yang anda gunakan. Widget ini menggunakan CSS3 untuk memberikan efek sudut bundar pada setiap postingan populer blog anda. Silahkan ikuti langkah-langkahnya dibawah ini untuk menambahkannya di blog anda, berharap anda menyukainya...:)  
Demonya bisa anda lihat pada gambar diatas.. 

Bagaimana cara menambahkannya di blog?

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih-> Template -> Edit HTML

• Kemudian cari tag/kode ]]></b:skin> 
• Setelah ketemu letakan kode berikut dibawah ini tepat diatas kode ]]></b:skin> 

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
 -moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
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);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;} 

• Simpan template...
• Selanjutnya masuk lagi ke akun blogger anda
• Klik Tata Letak-> Tambahkan Gadget-> Klik entri populer/populer post

• Sekarang konfigurasikan/setting entri populer anda seperti gambar di bawah ini:

 

Jangan centang pada cuplikan/snippet seperti gambar diatas, setingan jumlah postingan bisa anda atur sendiri

• Simpan gadget, selesai..

Semoga bermanfa'at...

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com