Cara Membuat Background Teks Komentar: Tutorial BloGGeR Modifikasi blog

Arahkan cursor di atas gambar di bawah ini!

Menambahkan sebuah backgound image pada teks komentar masuk akan memberi penampilan yang lebih menarik dibandingkan apabila komentar ditampilkan apa adanya. Sampeyan bisa lihat contohnya dengan KLIK gambar di atas. Background image tersebut memberi kesan teks komentar seakan tampil sebagai sebuah dialog (seperti dialog di gambar komik tuh, mbul!) dan sekaligus berfungsi sebagai kolom pemisah setiap komentar masuk. Supaya sisi background membentuk garis dengan efek bayangan, background warna pada keseluruhan kolom komentar kita ubah warnanya sesuai background image yang digunakan. Pada contoh gambar di atas, background yang digunakan adalah sbb :

1. Background image teks komentar : https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/april-2010/images/gubhugreyot-bgcomment-anima.gif
2. Background color kolom komentar : #c8c5c5

Karena penambahan background image komentar juga disertai kode untuk merubah warna teks komentar, maka untuk mendapatkan keserasian warna dengan halaman blog yang sampeyan pakai, warna teks bisa sampeyan rubah sendiri dengan merubah kode warna yang dipakai di sini.

Cara menambah background image teks komentar :

1. Login ke Blogger (Login to Blogger).
2. Dasbor (Dasboard).
3. KLIK Rancangan (Design).
4. Amankan template! Sampeyan bisa lihat cara mengamankan template di sini.
5. Cari KODE ]]><b:skin>, kemudian copy paste dan simpan KODE di bawah ini di atas ]]><b:skin> :

p.teks-komentar{
       margin:10px 0 0;
       padding:10px 8px 20px 20px;
       background:#fff url('https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/april-2010/images/gubhugreyot-bgcomment-anima.gif') left bottom no-repeat;
       color:#00021c;
}
.comments{
       background:#c8c5c5;
       margin:0.25em 0 0;
       padding:10px 0;
}

Coba cek KODE CSS di template sampeyan. Bila sudah ada KODE (ini hanya contoh, dan biasanya belum ada !) :

.comments{
       background: ...;
       margin: ...;
       ......: ...;
       ......: ...;
} 

, maka cukup masukkan KODE background-nya saja (dari KODE yang di atasnya).
6. KLIK Simpan Template (Save Template).
7. KLIK Expand Template Widget.
8. Cari KODE <data:comment.body/>
9. Di depan kode tersebut terdapat <p> dan di belakangnya ada KODE </p>, sehingga bentuk sebenarnya adalah :

<p><data:comment.body/></p>

10. Hapus dan ganti KODE di atas (point- 9) dengan KODE berikut :

<p class='teks-komentar'><data:comment.body/></p>

11. KLIK Simpan Template (Save Template).
12. Lihat hasilnya dengan membuka blog yang kolom komentarnya sudah terisi.

Catatan/Keterangan :

1. color:#00021c; adalah kode warna teks. Untuk merubah warna, ganti #00021c dengan KODE warna yang lain. Untuk melihat beberapa kode warna yang sudah saya sediakan, silahkan KLIK di sini.
2. Apabila di blog sampeyan blom ada komentar masuk, beri komentar sendiri (sebanyak sampeyan suka. 1000 komentar juga boleh. Biar puas !!!!).
3. Klo udah berhasil silahkan cengingas-cengingis sepuas-puasnya !!! he....he .... Jangan tersinggung! Tersungging saja biar lebih manis !!!???

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » January, 10, 2012

» Happy Blogging - gubhugreyot «