Membuat Search Box Elegan Seperti Apple ( CSS )

Cara Membuat Search box di blog dengan elegan seperti apple dengan menggunakan css dan html, tips cara membuat search box di blog ini akan memperindah blog anda sehingga terlihat lebih profesional

Lihat Demonya Disini

Berikut Caranya :
1. Login Ke Blogger
2. Masukan Kode Di bawah Ini di atas ]]></b:skin

Masukkan Kode CSS Ini
#search { } #search input[type="text"] { background: url(http://www.bloggermint.com/demos/css3searchbox/search-white.png) no-repeat 10px 6px #fcfcfc; border: 1px solid #d1d1d1; font: bold 12px Arial,Helvetica,Sans-serif; color: #bebebe; width: 150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #search input[type="text"]:focus { width: 200px; }

3. Berikut Kode HTML nya Silahkan Masuk Ke tata letak dan simpan sesuka anda dimana

Masukkan Kode HTML Ini
<form method="get" action="/search" id="search"> <input name="q" type="text" size="40" placeholder="Search..." /> </form>

4. Silahkan Anda Sesuai kan dengan mengubah kode warna sesuai dengan template anda
Selamat mencoba dan jangan lupa berikan komentar anda