Blogger new template designer telah memberikan kemudahan bagi kita dalam memodifikasi penampilan blog. Memang kode yang ditamplikan didalamnya berbeda dengan kode html lama yang sudah biasa kita obrak-abrik.
Barangkali sudah menjadi cirri khas blogger dalam memberikan layanan tidaklah 100% dapat kita telan begitu saja. Salah satu contohnya yaitu fitur komentar di bawah posting masih terlihat kaku dan tidak enak dilihat. Karena itu kita dituntut untuk berpikir bagaimana agar penampilan blog menjadi asyik untuk dilihat. Dengan sedikit sentuhan background dan border saja pada komentar blogger maka dapat mengatasi kekesalan jika melihat kotak komentar blogspot.
Ada satu fasilitas pada menu template designer yang dapat dipergunakan dalam memodifikasi penampilan blog termasuk tampilan komentar yaitu menu Add Css.
Untuk menuju menu Add Css maka langkah yang harus ditempuh adalah :
1. login blogger
2. design
3. template designer
4. advanced
5. Add CSS (letaknya paling bawah)
6. tambahkan kode css pada kotak isian Add custom CSS.
CSS untuk Modif komentar New blogger:
1. login blogger
2. design
3. template designer
4. advanced
5. Add CSS (letaknya paling bawah)
6. tambahkan kode css pada kotak isian Add custom CSS.
CSS untuk Modif komentar New blogger:
#comments{width:551px; padding:15px 15px 0px 15px; border:1px solid #ddd; background:#f6f5f5; font-family:verdana,sans-serif; margin-bottom:10px}
#comments h4{font-family:arial,sans-serif; margin:1em 0; line-height:1.4em; color:#000000; font-size:16px; padding-left:0px}
#comments-block{ margin:1em 0 1.5em; line-height:1.6em}
#comments-block .comment-author{ margin:.5em 0 0 0; font-weight:bold; padding:1px}
#comments-block .comment-body{ margin:0; padding:5px}
#comments-block .comment-footer{ margin:-.25em 0 2em; line-height:1.4em; font-style:italic; font-size:0.8em; border-bottom:2px dotted #ddd; padding-bottom:25px}
#comments-block .comment-body p{ margin:0 0 .75em}
.deleted-comment{ font-style:italic; color:gray}
.comment-form{margin:25px 0px 0px 0px; max-width:555px !important; width:555px !important}
.avatar-image-container img{background:url(http://sites.google.com/site/brugholic/avatara.png); width:35px; height:35px}
#comments h4{font-family:arial,sans-serif; margin:1em 0; line-height:1.4em; color:#000000; font-size:16px; padding-left:0px}
#comments-block{ margin:1em 0 1.5em; line-height:1.6em}
#comments-block .comment-author{ margin:.5em 0 0 0; font-weight:bold; padding:1px}
#comments-block .comment-body{ margin:0; padding:5px}
#comments-block .comment-footer{ margin:-.25em 0 2em; line-height:1.4em; font-style:italic; font-size:0.8em; border-bottom:2px dotted #ddd; padding-bottom:25px}
#comments-block .comment-body p{ margin:0 0 .75em}
.deleted-comment{ font-style:italic; color:gray}
.comment-form{margin:25px 0px 0px 0px; max-width:555px !important; width:555px !important}
.avatar-image-container img{background:url(http://sites.google.com/site/brugholic/avatara.png); width:35px; height:35px}
Setelah menuliskan css di Add custom CSS, kemudian :
1. Apply to blog
2. Back to blogger
2. Back to blogger
Lihat perbedaannya:
Komentar New blogger sebelum modifikasi:
Komentar New blogger setelah modifikasi:
Demikianlah cara menambahkan css untuk Modif komentar New blogger
Catatan:
Tips ini sudah diujicoba dan berhasil pada template Awesome Inc, buatan Tina Chen, untuk template yang lain belum saya coba.
Kamu bisa kunjungi posting terdahulu tentang tampilan komentar lainnya :