Modifikasi Popular Post Dengan CSS

Setelah kita membahas tentang bagaimana Membuat Facebook Slide Box Widget jQuery Effect untuk selanjutnya Kolom Tutorial™ akan membahas tentang cara Modifikasi Popular Post Dengan CSS. Cara ini sangat sederhana, Untuk Demonya bisa sobat lihat Popular Post pada Blog Kolom Tutorial™
Cara Penerapannya : 
1. Seperti biasa sobat login dulu ke akun Blogger sobat
2. Klik Tata Letak 
3. Klik Add Widget
4. Klik Entri Populer
5. Ingat Aturannya usahakan seperti gambar dibawah :
6.   Klik Simpan
7.   Kemudian klik "Template" Klik "Edit HTML"
8.   Jangan Lupa Cetang "Expand Template Widget"
9.   Cari Kode ]]></b:skin> Gunakan Ctrl+F untuk mempercepat pencarian
10. Kopi Paste Kode CSS Dibawah ini Tepat diatas kode  ]]></b:skin> 
/*--- Customize Popular Posts Widget Design By http://joens-tutorial.blogspot.com --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #fff url(http://4.bp.blogspot.com/-gxSkj3ksC5s/UQoIDLfvdhI/AAAAAAAABCE/UI-u3vflwyI/s1600/Icon-2.png) no-repeat scroll 5px 10px;
list-style-type: none;
margin: 0 0 5px 0px;
padding: 5px 5px 5px 33px !important;
border: 1px dashed #2230F1;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.popular-posts ul li:hover {
background: url(http://1.bp.blogspot.com/-JG_pPoZuCb4/UQoIC4G7jEI/AAAAAAAABCA/DM5XS11L-2c/s1600/Icon-1.png) no-repeat 2px;
border: 2px solid #2230F1;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

11. Klik Save and Enjoy...............!!!!

9 Responses to "Modifikasi Popular Post Dengan CSS"

Terimakasih banyak atas kunjungannya, salam silatuhami M. Alex Joenaedi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Visit Kabar Sehat