Widget Search Box Blogger Ala Apple

Apa kalian 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...

untuk kalian yang tertarik dan ingin memasangnya di blog, ikuti langkah-langkah dibawah ini:

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

#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 dibawah ini pada template kalian.

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

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

</form>

Atau kode search form ini juga bisa kalian letakan ke dalam Gadget dengan menggunakan gadget HTML/JavaScript, kemudian 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.

Note : artikel ini di kutip dari rohis-facebook dengan perubahan seperlunya.