07 Oktober 2010

Modif komentar New blogger template designer

add_css
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:
#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}
Setelah menuliskan css di Add custom CSS, kemudian :
1.    Apply to blog
2.    Back to blogger

Lihat perbedaannya:
Komentar New blogger sebelum modifikasi:

sebelum_modif

Komentar New blogger setelah modifikasi:

setelah_modif


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.

3 komentar:

  1. kalau aq mah pernah juga menggunakan template desainan blogger tp setelah saya pelajari code2nya ternyata rumit bgt, jdnya males pakai

    BalasHapus
  2. @ Rizky2009 betul sekali mas masih terlalu asing, tapi lama-lama kl dah terbiasa dengan design blogger baru jadi asyik untuk dimodifikasi

    BalasHapus

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.