Membuat Tombol Search Dengan Gaya CSS

Tombol search adalah merupakan menu yang dapat memudahkan pengunjung untuk mencari artikel pada blog yang dikunjungi. Selain tombol search, banyak hal yang dapat kita lakukan untuk mempermudah pengunjung dalam mencari artikel blog, seperti membuat navigasi menu horizontal atau yang lainnya.

Dan pada postingan ini saya akan berbagi tutorial cara membuat tombol search pada blog dengan menggunakan kode CSS tanpa image.

Jika sahabat blogger ingin membuat tombol search dengan menggunan CSS, caranya adalah sebagai berikut:

• Login ke blogger.com
• Pilih Rancangan
• Pilih Tambah Gadget
• Pilih HTML/javascript
• Kemudian tambahkan kode di bawah 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 selesai klik tombol Simpan.
• Selanjutnya Pilih Edit HTML
• Kemudian Download Template Lengkap, untuk di upload kembali jika terjadi kesalahan pada edit.
• Centang kotak kecil pada tulisan Expand Widget Template
• Cari kode
  ]]></b:skin>, gunakan tombol pencarian untuk mempermudah pencarian kode
• Tambahkan kode di bawah ini diatas kode ]]></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 */ }



• Setelah selesai klik Simpan Template dan lihat hasilnya.

Selamat mencoba tombol search dengan gaya css.., dan semoga artikel ini bisa bermamfaat...
" A m i n "
---------------------------------------

Facebook. Twitter Google Plus