Teknik Membuat Search Box Terbaik

Sahabat pada tulisan kali ini, saya akan membahas tentang teknik membuat search box model lainnya. Karena pada tulisan sebelumnya saya telah memberikan beberapa cara membuat kotak pencarian dengan bentuk yang lain pula.



Oiya sahabat masih ingatkan fungsi dari search box atau kotak pencarian, bukan? So pasti dari namanya saja udah terjawab, yaitu berfungsi sebagai mesin pecari data, kata yang berhubungan dengan  apa yang akan kita cari. Wah..kayaknya sudah jelas ya Sahanat, langsung aja kita ke TKP.

Dua Teknik Membuat Search Box Terbaik :

1. Caranya Pertama sebagai berikut

•  Login ke akun Blogger
•  Klik Menu Layout
•  Klik Tab Page Element
•  Klik Pada Add a Gadget
•  Lalu Klik HTML/Javascript
•  Dan Pastekan Kode dibawah ini :

kode anda
<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Temukan Artikel Di sini"/>
</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/AVvXsEgp-2oOpEheysJfTtqkCZnsMr7VOynz_qBlDnQ6oF_hjvQ0GM8fcY-7nmCqif_MuGnDdE9HEclrVZCcZ9ivcISUho0PWTXWFXi4txvq3TEJaMbifgJxFj4QqUGADUWAMs6AFcF08MRhuJA/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

Catatan : Sahabat bisa ganti tulisan berwarna MERAH  sesuai dengan keinginan sahabat, sedangkan yang berwarna BIRU adalah ukuran kotaknya, dan itupun bisa sahabat ganti ya.


2. Cara Kedua Sebagai berikut :
Oiya langkah awalnya sama, cuman kodenya saja yang berbeda, sahabat cukup mengcopy pastekan kode yang di bawah ini ya : 

kode anda <style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjnOPWoJhGrjS2INNlid-J1Vf9OVBur-kgGJGR2yxw-s1RY3V7A426h7BsvxQh-RssNIrdeKc5nnLZUZJxXld1QWlv1YVhuBOHf3XjU6D54zyL1yeKZoxkydzJxIbf-uumVLHLK_vWbVdR/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent;    width: 307px;    height: 50px;    disaply: block;}  form#mediablogger-searchform {    display: block;    padding: 9px 16px;    margin: 0;}  form#mediablogger-searchform #s {    padding-left: 24px !important;    padding: 7.5px;    margin: 0;    width: 198px;    font-size: 16px;    font-family: georgia;    font-style: italic;    color: #666666;    vertical-align: top;    border: none;    background: transparent;}  form#mediablogger-searchform#sbutton {    margin: 0;    padding: 0;    height: 40px;    width: 74px;    vertical-align: top;    border: none;    background: transparent;}</style><div id="mediablogger-searchbox">    <form id="mediablogger-searchform" action="/search" method="get">        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'        onblur='if (this.value == "") {this.value = "Search...";}' /></form></div>

Catatan : Sahabat bisa ganti tulisan yang berwarna MERAH dengan berbagai macam style warna yang sahabat suka seperti style berikut :

Style Pencarian warna HIJAU :

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjnOPWoJhGrjS2INNlid-J1Vf9OVBur-kgGJGR2yxw-s1RY3V7A426h7BsvxQh-RssNIrdeKc5nnLZUZJxXld1QWlv1YVhuBOHf3XjU6D54zyL1yeKZoxkydzJxIbf-uumVLHLK_vWbVdR/s1600/impoint.blogspot.com-green.png


Style  Pencarian warna MERAH :

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPQFi62zix2q74p746A-vvidPEYUreXoXgdZ_C6zIrpcbo0g3oH20gK-sa9-XRVVahDsrDMCaZUay7xaZfWsO8woVJOJHLxfcaPrDMbChe45m6W32orT09yX31RVd3Ba4EmluKOTEiKwBb/s1600/impoint.blogspot.com-red.png


Style Pencarian warna BIRU :

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwseSFQrKZTjheOwoYnLkHq7c4f2_GPDiI2rGFsIyCbLTW1jW-blS4yz8lfZP233dm77zQWZMShqTtfGkxhEhAZmkmEfBYzkh_frrxO6MDikemn0-uTle4Trl_ZKuo3zBW2jo9wpnkGnl/s1600/impoint.blogspot.com-blue.png


Style Pencarian warna ORANGE :

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGxFvrZYmWGGWTyEYYJUQyLkBnBMOvGIrFBFQe_S2jYfCv653IyPdDX3lFgfSPr1cgThvgi1grrwKHqGNa5FYVJgDG4zW6K1FhW_QfindPlgcDD2iZGzYZTjz8OuM3B96dXDtT1VhibxoE/s1600/impoint.blogspot.com-orange.png


Nah, sahabat semua cukup dulu yatulisan kali ini tentang Teknik Membuat Serach Box Terbaik...silahkan dicoba-coba, sapa tau ada yang nyantol.

Teknik Membuat Search Box Terbaik 2014-04-13T17:03:00+07:00 Rating: 4.5 Diposkan Oleh: galeri