Cara Membuat Tombol Search Unik Dengan Gaya CSS

Sebelum kita mulai kita harus tau apa itu tombol search, Tombol search/search button adalah suatu gadget pencarian yang sangat diperlukan para pengunjung website/blog untuk mencari artikel-artikel yang dibutuhkan. Selain tombol search, banyak hal yang dapat kita lakukan untuk mempermudah pengunjung dalam mencari artikel-artikel blog, seperti membuat menu navigasi horizontal atau yang lainnya.

cara membuat tombol search dengan gaya css dan tanpa gambar, ini dia tips nya : 

• Login di www.blogger.com
• Masuk ke dasbor pilih Rancangan/Tata Letak
• Lalu Pilih Tambah Gadget
• Pilih HTML/JavaScript
• Kemudian letakkan code dibawah ini kedalam HTML/JavaScript :

<form action='http://alamat-blog.anda'/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if (this.value == "")
{this.value = "Search...";}' onfocus='if (this.value == "Search...")
{this.value = ""}' type='text' value='Search...'/>
<input class='searchbutton' type='submit' value='Go'/>
</form>

• Setelah itu klik Simpan
• Selanjutnya masuk ke halaman Template
• Sebelum mengedit Template, silahkan BackUp/Download Template Sahabat dulu
• Pilih Edit HTML
• Centang Expand Template Widget 
• Cari code ]]></b:skin> (Untuk mempermudah pencarian tekan F3 atau tekan tombol CTRL F)
• Letakkan code dibawah ini diatas code ]]></b:skin> :

/*- Search -------------------*/
.searchform {
display:inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
display: inline;
border: solid 1px #556b2f;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #33ff33;
background: -webkit-gradient(linear, left top, left bottom, from(#fff),
to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: :progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#ededed'); /* ie7 */
-ms-filter:
progid:XImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #d5d5d5;
padding: 6px 6px 6px 8px;
width: 240px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #555;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e),
to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: :progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e',
endColorstr='#454545'); /* ie7 */
-ms-filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e',
endColorstr='#454545'); /* ie8 */
} 

Oke...sampai di situ aja tutorialnya selamat mencoba
jangan lupa coment yah...