0 Cara Memberi Background dan Bayangan Hover Di Kotak Pengisian Komentar

*Cara Memberi Background Dan Bayangan Hover Di Kotak Pengisian Komentar (Comment Form)*

      Salam sejahtera untuk semuanya, posting kali ini saya akan membuat satu trik lagi, fungsinya untuk mempercantik tampilan kotak komentar kita, pada posting sebelumnya saya sudah membuat posting tentang bagaimana membuat background di kotak komentar dan cara pembuatanya sama. 

      Tutorial ini berhubungan dengan artikel tersebut. Sebenarnya sudah lama sekali saya mencari-cari artikel tentang memberi bayangan hover mouse pada kotak komentar tapi tidak pernah ketemu sampai akhirnya saya berhasil membuatnya sendiri dengan cara yang sama untuk memberi backgound pada kotak komentar hanya CSSnya yang saya rubah.

      Contohnya bisa kamu lihat langsung pada kotak pengisian komentar pada posting ini, warna dasarnya abu-abu dan jika kamu gerakkan mouse di atasnya backgrounya akan menghilang dan di gantikan dengan bayangan abu-abu di luar (sekitar) kotak.

• Untuk mencari struktur HTML dari kotak komentar kamu cari kode berikut

<div class='comment-form'>

•  Nah kalau sudah kamu ganti kode di atas pada template kamu dengan kode berikut

<div id='ib-form'> 

*Sekarang kamu cari kode ]]></b:skin> dan letakkan struktur CSS berikut di atas atau sebelum kode ]]></b:skin>

#ib-form iframe{-moz-box-shadow:inset 6px 10px 50px #000;-webkit-box-shadow:inset 6px 10px 50px #000;box-shadow:inset 6px 10px 50px #000;}
#ib-form iframe:hover{-moz-box-shadow:0 0 40px #F51137;-webkit-box-shadow:0 0 40px #F51137;box-shadow:0 0 40px #F51137}
#ib-form a{
color:#7EB2AC;}

*Keterangan :

#ib-form iframe{-moz-box-shadow:inset 6px 10px 50px #000;-webkit-box-shadow:inset 6px 10px 50px #000;box-shadow:inset 6px 10px 50px #000;}

          *Adalah CSS untuk mewarnai kotak sebelum ada mouse digerakkan di atasnya.

 #ib-form iframe:hover{-moz-box-shadow:0 0 40px #F51137;-webkit-box-shadow:0 0 40px #F51137;box-shadow:0 0 40px #F51137}

          *Adalah CSS untuk mengatur efek hover pada kotak komentar dan teks yang berwarna merah adalah warna dari bayangan hover, silakan kamu ganti sesuka kamu, untuk daftar kode warna HTML bisa kamu lihat disini.

Setelah sudah kamu tinggal menyimpan pengaturan template kamu dan lihat hasilnya.
Selamat mencoba, semoga berhasil.