Membuat Modifikasi Background Kolom Komentar Blog

Hanya dengan menambahkan sedikit kode CSS ke dalam template blog maka tampilan kolom kotak komentar blog anda akan terlihat menjadi lebih menarik, seperti halnya jika menggunakan model custom.

Untuk langkah awal adalah setelan “Lokasi Komentar” diterapkan dalam setelan ‘Tersemat’. Sehingga jika saat ini Anda belum menggunakan setelan ‘Tersemat’ untuk ‘Lokasi Komentar’, maka ubah terlebih dahulu setelannya dengan cara klik menu ‘Setelan’ > ‘Pos dan Komentar’ > “Lokasi Komentar” (pilih ‘Tersemat’), seperti pada gambar di bawah ini :

Langkah berikutnya adalah buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ centang "Expand Template Widget". Kemudian (gunakan Ctrl+F) cari kode ]]></b:skin> dan sisipkan kode berikut ini tepat di atasnya.

/*-------------------------------------------------------------- Modifikasi Kolom Komentar Blogspot Oleh: Andes Junkies Blog: http://mas-andes.blogspot.com/ --------------------------------------------------------------*/ .comments { padding: 4px; background: #1c1c1c; border: 1px solid #33FF00; -moz-border-radius: 5px 5px 5px 5px; } .comments-content .comment-thread { padding: 4px; background: #1c1c1c; border: 1px solid #33FF00; } .comments .comments-content .comment { margin-bottom: 0px; padding-bottom: 0px; } .comments .comments-content .comment:first-child { padding-top: 0px; } .comments .avatar-image-container { height: 36px; padding-left: 4px; background: #1c1c1c; border: 1px solid #33FF00; -moz-border-radius: 3px 3px 3px 3px; } .comments .comment-block { padding-top: 4px; padding-bottom: 8px; padding-left: 4px; padding-right: 4px; background: #1c1c1c; border: 1px solid #33FF00; -moz-border-radius: 3px 3px 3px 3px; } .comments .comments-content .inline-thread { border: 1px solid #33FF00; -moz-border-radius: 3px 3px 3px 3px; } .comments .comments-content .comment-replies { margin-left: 48px; } .comments .comment .comment-actions a { margin-right: 4px; padding: 2px; background: #1c1c1c; border: 1px solid #33FF00; -moz-border-radius: 3px 3px 3px 3px; } .comments .continue a { padding: 2px; background: #1c1c1c; border: 1px solid #33FF00; } .comments .comments-content .datetime { float: right; margin-right: 4px; } .comments .comments-content .icon.blog-author { float: right; margin-right: 3px; } .comment-form { max-width: 100%; width: 100%; }

Langkah terakhir adalah Simpan Template.

Jika Anda ingin mengubah warna garis dan warna latar, maka Anda tinggal mengganti kode warnanya :

background: #1c1c1c;
border: 1px solid #33FF00;

Ganti yang berwarna biru dengan warna yang sesuai keinginan anda, lihat Tool Kode Warna.