Widget Search Blogger Ala Apple

Beautiful CSS3 Search Form

Apakah sahabat pernah berkunjung ke webnya Apple, coba perhatikan desain menu navigasinya bagian paling ujung sebelah kanan, disitu terdapat form pencarian yang cukup keren. Ketika Sahabat pengen memasukkan keyword atau kata kunci untuk pencarian maka secara otomastis  form pencarian akan melebar kesamping kanan dan kiri. Unik kan...

Bagi Sahabat yang tertarik dan ingin memasangnya di blog sahabat, ikuti langkah-langkah dibawah ini:

1. Login akun blogger Sahabat. Pilih menu Rancangan - Edit HTML
2. Cari taq ]]></b:skin> dan simpan kode css dibawah ini diatasnya.

#search {
}
#search input[type="text"] {
background: url(https://lh4.googleusercontent.com/-SBuAPGg_eJw/
Ts0EGS0F7lI/AAAAAAAAABQ/3gzoJ_ArAEs/s15/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. Simpan template. Setelah itu letakkan kode search form berikut ini pada template Sahabat.

<form method="get" action="/search" id="search">

  <input name="q" type="text" size="40" placeholder="Search..." />

</form>

Kode search form ini juga bisa Sahabat tambahkan ke dalam Gadget lalu plih HTML/JavaScript simpan dan letakkan Widgetnya sesuai selera Sahabat.

Search form blogger versi Apple ini akan terlihat sempurna jika menggunakan browser Mozilla Firefox dan Opera atau menggunakan browser lainnya yang mendukung penggunakan CSS3.

 Lihat Demonya

Sumber : http://www.bloggerblur.com/