``Cara Membuat Tombol Search Keren Dengan Gaya CSS~~

Minggu, Januari 27, 2013

Uzumaki_Popey BLog tau kan Tombol search?? kalau yang gak tau coba acung??? wah ga keren blogger gak tau. Sahabat, 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.

Dan kali ini Uzumaki Blog akan memberitahukan gan2 semua 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?? Selamat berjuang yak sahabat uzumaki BLog,, semoga berhasil??
Komentar juga yak??

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.