Trik Buat Background di Blogger Comment EditorClick here to get more tutorials!

Tak banyak yang dapat kita lakukan di blogger comment editor, namun sekalipun demikian satu atau dua perubahan kecil diharapkan bisa memberi sebuah sentuhan bagi keindahan blog. Blogger comment editor atau boks yang biasa digunakan pengunjung untuk menuliskan komentar tak melulu harus ditampilkan polos seperti saat anda membuat blog di blogger atau seperti saat ini ketika anda belum terpikirkan untuk membuatnya terlihat berbeda dan lebih menarik. Sebuah background color atau background image dapat menciptakan perubahan yang cukup drastis dari blogger comment editor. Trik yang akan kita sertakan dalam posting ini menyertakan dua macam kode css, yang masing-masing menggunakan background color dan background image. Jika anda ingin menggunakan bentuk background image berbeda, silahkan ganti URL background image yang telah disertakan di kode css-2.

D E M O

Anda bisa menggulung halaman ini ke bawah hingga anda temukan comment box. Dalam comment box akan terlihat sebuah blogger comment editor dengan penampilan yang jauh berbeda dari default blogger. Sebuah background image telah ditambahkan ke dalamnya melalui kode css. Warna default teks dan link dalam blogger comment editor ini juga telah dirubah dari warna defaultnya.

Kode CSS background & perubah warna teks comment editor

Kode css-1 untuk penambahan background color, sedang css-2 untuk background image. Background image bisa anda pilih secara bebas dengan membuat sendiri atau mencari di situs penyedia free background images.

Kode css-1 » Comment Editor dg background color:

.comment-form{
        width:_98%;
        max-width:100%;
}
#comment-editor{
        margin:10px auto;
        width:80%; /* pengaturan lebar comment-editor dalam % */
        display:block;
        padding:10px 5px 15px 15px;
        background:#ccc; /* #ccc = background color */
        border:2px solid #eee; /* border */
        border-radius:6px; /* membentuk box dg sisi lengkung */
        color:#FC0; /* warna untuk = Comment as */
        font-family:"Times New Roman", Times, serif; 
        box-shadow:0 0 8px #000; /* box shadow membentuk efek bayangan   */
}
.comment-form a{
 color:#F00; /* warna untuk Sign out, Subscribe by Email */
}

Kode css-2 » Comment Editor dg background image:

.comment-form{
        width:_98%;
        max-width:100%;
}
#comment-editor{
        margin:10px auto;
        width:80%; /* pengaturan lebar comment-editor dalam % */
        display:block;
        padding:10px 5px 15px 15px;
        background:#aaa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdqhz6GvB34UEfbgVlkPrzCK1a4vla-t5feyolboDfNLAsZFarBuu9Kc0rCdVMtFXNxk5lxq7vuVeOjai7bfCjhQ-5MU_VOvJRR8wBwMGcK8EWOY6F4PHQC6j6vF4J6qLh4dzJ6YiWuRo/s600/bg-comment-box-600a.jpg) bottom left; /* background image dapat dirubah dengan mengganti URL background */
        border:2px solid #eee; /* border */
        border-radius:6px; /* membentuk box dg sisi lengkung */
        color:darkblue; /* warna untuk = Comment as */
        font-family:"Times New Roman", Times, serif; 
        box-shadow:0 0 8px #000; /* box shadow membentuk efek bayangan   */
}
.comment-form a{
 color:#F00; /* warna untuk Sign out, Subscribe by Email */
}

1. Login ke Blogger
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode : ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy dan paste-kan kode css sesuai perubahan background box comment editor yang diinginkan di atas kode ]]></b:skin>
   • Simpan Template/Save Template
7. Selesai...
8. Buka blog dan lihat hasilnya di halaman posting pada box komentar.