Pada malam ini saya akan mengajarkan cara mempercantik tampilan menu Popular Post pada blog dengan sedikit sentuhan CSS, biasanya setiap pengunjung blog selalu melihat postingan terbaru diblog sobat, karena saya sarankan untuk memodifikasinya. Mungkin sobat sudah penasaran kali, saya akan berikan screenshoot'a sebagai berikut :
Oke tanpa basa-basi lagi langsung kita olah TKP, cekidoott :D
- Login ke blog masing-masing
- Masuk ke menu Template dan edit HTMLnya
- Kemudian cari kode kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
.popular-posts ul{padding-left:0px;}.popular-posts ul li {list-style-type: none;margin: 0px 0px 5px;padding: 5px 5px 5px 20px !important;border: 1px solid #dddddd;border-radius: 30px 0 30px 0; -moz-border-radius: 30px 0 30px 0; -webkit-border-radius: 30px 0 30px 0; -o-border-radius: 30px 0 30px 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}.popular-posts ul li:hover {border:1px solid #666666; box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5); border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0;}.popular-posts ul li a:hover {text-decoration:none;}
- Kemudian simpan templatenya dan lihat hasilnya :D
Note : Jika sebelumnya pernah menggunakan kode lain untuk mempercantik tampilan Popular Post, saya sarankan untuk menghapusnya agar script kodenya tidak bentrok/beradu :DSelamat mencoba, semoga berhasil...:D
No comments:
Post a Comment