✔ Cara Menciptakan Search Box Dengan Css3

Cara Membuat Search Box Dengan CSS3  Kali ini Akan Mencoba mengasih Script Search Box Dengan CSS3 Sebetul nya Sarch Box ini Ciri Khas Apple.com Style Mungkin Sahabat 

Blogger Sudah Tidak Asing lagi Kalau melihat Gambar Dibawah ini, Tidak hanya pada produk Apple yang ada model search menyerupai ini, dalam situs resminya Apple.com juga memakai search ini, memang search model ini lebih manis alasannya memakai script CSS 3 dan lebih yummy dipandang. 

Cara Memasangnya Pasti Seperti Biasa Seperti CSS yang lain nya Pertama

1. Login ke Blogger >> Rancangan >> Edit HTML

2. Cari isyarat ]]></b:skin>

3. Letakan isyarat dibawah ini sempurna diatas isyarat ]]></b:skin>

#search {
}
#search input[type=&quot;text&quot;] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisuDhntwiEBoVYuZtZJwEdrHriuhL0aEBqyHR1Xw3VrTgirh28baRcoDuCw-1z4RGF0uq_TmglOminR-sd8-pD9dz3y2SGmLtf6epBrMGx1r4N5QsIm4BXETfzpoR8cz4i92ZaGYkL_eMw/s1600/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) 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=&quot;text&quot;]:focus {
width: 200px;
}

#search {
}
#search input[type=&quot;text&quot;] {
background: url(http://www.bloggermint.com/demos/css3searchbox/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) 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=&quot;text&quot;]:focus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisuDhntwiEBoVYuZtZJwEdrHriuhL0aEBqyHR1Xw3VrTgirh28baRcoDuCw-1z4RGF0uq_TmglOminR-sd8-pD9dz3y2SGmLtf6epBrMGx1r4N5QsIm4BXETfzpoR8cz4i92ZaGYkL_eMw/s1600/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

4. Lalu Klik Pratinjau Kalau sudah tidak ada persoalan lagi Tinggal Simpan Tempelats
5. Buka Tata Letak kemudian Tambah Gadget Pilih HTML JAVAScript  dan masukan Scrip dibawah ini

<form method="get" action="/search?s=" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>

6.Klik Save / Simpan .Cukup Sekian Semoga Bermanfaat.

Bagikan Artikel ini