Cara Mempercantik Komentar Blogger

Silahkan lihat beberapa contoh berikut:

Menggunakan background warna:

Menggunakan background image/ gambar:

Nah jika tertarik mencoba memodifikasi formulir komentar seperti beberapa contoh diatas silahkan ikuti tutorial berikut:

1. Setelah sig in pada account blogger sobat- pada dasbor- Klik Tata Letak- Edit HTML
2. Centang kotak kecil disamping kalimat "Expand Template Widget" di sudut kanan atas.
3. Cari kode seperti dibawah ini (Tips: - Tekan Ctrl + f untuk memudahkan pencarian)

<div class='comment-form'>

4.Ganti dengan kode berikut:

<div id='ib-form'>

5. Tambahkan kode CSS berikut diatas ]]></b:skin>

#ib-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCB2JnHjg9-EAXqj2Wc15R1TPBxkFmSxLz94xuZi5eATHGLs4UycVDehtDxkOIA7XsXytpug0f_k4-2bQJT2k1QvF0bkPBarDuSRSAL6KJ8Lf8jMIRC4jIrxgT2-2-uE4TRlQMSpir-jtv/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:95%;height:250px;}
#ib-form iframe:hover{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ25Y68dCOyWKPxE7-ccZaap12LLwCLOFO8OIqn-Q0chomJmf_jUkYemqVZ6nNpsFOOP_3ZRrWuOZ7aYmt_4Gi_HTLP2i1u3Z2rg8gXtFCWklxAh331NzbZ0jP4EVKDfIYvaMT-JXHsQcC/s400/plz-do-not-spam2.gif) no-repeat bottom right;
border:7px solid #7EB2AC;}
#ib-form a{
color:#7EB2AC;}

Sedikit penjelasan tentang bagian-bagian penting pada kode CSS di atas untuk membantu sobat menyesuaikan tampilan formulir komentar sesuai dengan keinginan sobat:

Ada tiga bidang penting, yaitu:
#ib-form iframe
#ib-form iframe: hover
#ib-form a

Berikut adalah rincian untuk setiap bagian dari kode CSS diatas
1. Kustomisasi Untuk Mode Aktif

#ib-form iframe
Bagian ini adalah tampilan formulir komentar blogger ketika mouse atau crusor tidak berada diatasnya.
* # FFFFFF: Ini adalah warna latar belakang. Sobat dapat mengubahnya dengan menggunakan bantuan tabel kode warna disini

* Url: Ini adalah URL untuk gambar latar belakang. Pada kode diatas saya gunakan image bayi, silahkan ganti dengan image sobat

* Border 7px solid # C7C7C7: Border dengan garis penuh setebal 7px, kalau ingin garis border putus-putus ganti solid dengan kata dotted, kode warna silahkan pakai bantuan tabel kode warna disini.

* padding: jarak antara border dan teks

* font:normal 12pt "ms sans serif", Arial; jenis huruf dan ukuran besar huruf teks "komentar sebagai"

* width:95%;height:250px; Lebar dan tinggi formulir komentar

2. Kustomisasi Untuk Mouse Hover Mode
Sekarang mari kita membahas properti CSS untuk tampilan form ketika kursor mouse melayang di atasnya, atau ketika crusor menyentuh formulir komentar
#ib-form iframe: hover
Hal ini hampir sama untuk penjelasan latar belakang dan batas seperti yang kita bahas sebelumnya. Pengaturan kedua sifat CSS akan berpengaruh hanya gambar kedua yang muncul pada mouse.


3. Kustomisasi Untuk Link Warna
#ib-form a

Bagian ini mendefinisikan warna dari kedua link -> "Sign out" dan "Berlangganan melalui email". Link-link ini muncul di sudut kanan bawah setiap Formulir Komentar Blogger.
warna: ini menentukan warna link. Mengatur warna link sebagai kontras dengan warna latar belakang.

Oke selesai ngedit jangan lupa simpan template. Eits... jangan lupa juga komentarnya!?

Original Post