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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ReEbl1Yics-t8lO_ehUFJW7Vuq_baPuqp4j41mO-GDaGLCynqMS03SenVIlkla9jrX31ZwUgpvLKibuhCf2Px4LweOWwdwF3lOl8Mv1NAyE6X-HLQLOhlw_SdinoPwnO3yrRcDPTjLHn/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJnMpupvWX_-O4RjX_O6ODZho3se3QTMr8Rl-dPPD84aoBn74PLz9o9BSkfrCOiKu4Y1V2R0yV_goepyoSWEQ82NjLwlmckEJlyyNnbVU6WlVXfcNoT-6xBRwk1oQ_xhsDHer4p8ImdNx/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...............!!!!

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post