Membuat Search Bar

Lintas Tulisan -  Search bar merupakan awal dari petualangan pengunjung di situs website Anda dan merupakan sepotong teka-teki konversi yang sering diabaikan. Agar search bar mudah terlihat bagi pengunjung maka sebaiknya dalam pembuatan web toko online, search bar menggunakan warna yang berbeda dari skema warna situs. Taruhlah juga teks dalam kotak, seperti "Masukkan kata kunci," agar  pengunjung dapat dengan cepat meneumkan search bar. Lengkapi pula search bar dengan tombol yang bertuliskan "Search" atau "Find" dan mencakup beberapa stylized arrow (menunjukkan gerak), dan Anda telah memulai sebuah awal yang cukup baik dalam membuat search bar.

Search Bar Menyaring Halaman Hasil
Halaman hasil pencarian adalah jantung dari apakah pengunjung akan melakukan aksi selanjutnya atau meninggalkan website Anda. Dengan membuat fitur search yang baik dalam pembuatan web toko online Anda, Anda bisa  menyesuaikannya dengan banyak hal tergantung pada apa yang audiens target Anda cari. Misalnya pada sebuah toko online pakaian, Anda dapat mengetikkan frase luas seperti "biru" dan mendapatkan berbagai produk, yang kemudian dapat diurutkan berdasarkan artikel pakaian, ukuran, popularitas / harga, dan fitur lainnya.

Untuk membuat Search bar silahkan lihat tutorial dibawah ini:

 <form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 200px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJFK8366mN7tWbBZI9v6_I5vXhaEcl65Caa6jAAY5WongLEWIrqzO2cUzx65otAtiie1zpAvVu2c2bIPs6q0NOCGfC-1-oCOkMz-FkfpRLzqJAWoIzRa6IZDMDNq84I4BEsKsY73PlLE4/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

NB : Ganti warna Merah sesuai dengan selera dan kebutuhan kalian yang  nanti tulisan itu akan muncul di tengah kotak pencariannya. Dan warna Biru itu ukuran kotak pencariannya, silahkan kalian rubah sesuai dengan kebutuhan!

Membuat Search Bar 2013-07-13T14:48:00-07:00 Rating: 4.5 Diposkan Oleh: Bocah Ndeso