Rabu, 05 Januari 2011

Cara modifikasi kotak komentar


Modifikasi kotak komentar ini pasti akan membuat blog lebih keren lagi yups tentu harus di sesuaikan juga agar kotak komentarnya terlihat lebih indah dan keren nah sebagai contoh hasil modifikasi komentar coba lihat gambar di bawah ini.

modifikasi formulir komentar blogger

Itulah hasil modifikasi kotak komentar yang saya maksud pasti kerenkan hehehe ( padahal biasa aja ).

1. Log in ke blog anda
2. Klik Rancangan / Layout / Template
3. Klik Edit html
4. Centang expand template widget
5. Untuk berjaga jaga anda download template lengkap

kemudian cari kode seperti ini, untuk lebih cepat anda tekan ( CTRL + F )

<div class='comment-form'>

Setelah ketemu anda hapus kode tersebut dan ganti dengan kode di bawah ini

<div id='ib-form'>

Lalu anda cari kode ]]></b:skin>

Setelah ketemu anda tambah kan kode di bawah ini di atas kode ]]></b:skin>

#ib-form iframe {
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYz1Ovg4jNlZw4MfUHCAq92LuCz5gey-8A010FES_YYTv_T4IdzAUhKs_kLHoySv5zOhuytcErZNrKUrbZTU83w0CNVep3sFsyN9TrGjmxJhaCT4XZSUr7qZn7ca053gsrxHV62YJZH5HZ/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: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEill5kluEfZtZtJEuUG9yEBfOZXS-t80sKviPohyphenhyphenQn-cETw1ojQQ2sLhAF2DbOafCDTU_Rv5L9_8qwpuzIj1BdkvitBunnGPXv67-llpp_1qX7hgwZUuIwIiHkL3aFw8-Bx2Nu0X5k5WkZg/s400/plz-do-not-spam2.gif) no-repeat bottom right;
    border: 7px solid #7EB2AC
    }

#ib-form a {
    color: #7EB2AC
    }


Pengaturan kode css


#ib-form iframe : Bagian ini adalah tampilan formulir komentar blogger ketika mouse atau crusor tidak berada diatasnya.
#FFFFFF : Ini adalah warna latar belakang / background nya.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEill5kluEfZtZtJEuUG9yEBfOZXS-t80sKviPohyphenhyphenQn-cETw1ojQQ2sLhAF2DbOafCDTU_Rv5L9_8qwpuzIj1BdkvitBunnGPXv67-llpp_1qX7hgwZUuIwIiHkL3aFw8-Bx2Nu0X5k5WkZg/s400/plz-do-not-spam2.gif

Itu Adalah Link gambar anda sebagai tema atau latar belakang nya, anda bisa ganti dengan URL gambar anda

Border 7px solid # C7C7C7 : Adalah Border dengan garis penuh setebal 7px.
#C7C7C7 : adalah kode warna nya silhkan anda ganti sesuai warna yang anda inginkan,
padding : adalah jarak antara border dan teks
font:normal 12pt "ms sans serif", Arial; : adalah jenis huruf dan ukuran besar huruf teks
width:95%; : kode lebar
height:250px; : kode tinggi

Sumber : Indahnya Berbagi