Sebelumnya saya pernah memposting membuat kotak pencarian tapi modelnya sederhana namun pada postingan ini ada beberapa jenis kotak pencarian, yah bisa dibilang sebagai pelengkap postingan sebelumnya. Jenisnya seperti contoh kotak pencarian 1 yang akan dipaparkan dibawah ini.
Nah dalam postingan ini saya ingin memaparkan beberapa contoh kotak pencarian atau search box sehingga kita bisa memilih mana yang bagus sesuai dengan selera kita. Cara membuatnya pun tidaklah sulit hanya dengan menggunakan widget html/javascript tanpa harus otak atik kode xml nya. Berikut beberapa contoh kotak pencarian dan kodenya.
Cara memasangnya :
1. Login dulu ke akun blogger sobat.
2. Pilih menu tata letak.
3. Tambahkan Gadget.
4. Pilih gadget HTML/Javascript.
5. Silahkan sobat pilih kode kotak pencarian dibawah ini.
Kotak Pencarian 1, kodenya sebagai berikut :
<form action="http://bang-dayat.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="Cari" class="buttonsubmit" name="submit" type="submit"/></form>
Ket : ganti kode yang berwarna biru dengan alamat blog sobat dan size nya bisa diubah sesuai dengan kebutuhan.
Bentuk kotak pencariannya seperti ini :
Kotak Pencarian 2, kodenya sebagai berikut :
<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtUyv7_wkLxS6kN04lxuQ-RZunPn4lOUg_NudvPuw8K5ikXJ1XPs8BUfdvy-khOQfOxgei8j5IRUrOsPNdXC2vVjDzCxlj4jsgI0exKff4wALLgxDbbULFdFttDeZOFcZ7W2_WDpBxvXv-/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtUyv7_wkLxS6kN04lxuQ-RZunPn4lOUg_NudvPuw8K5ikXJ1XPs8BUfdvy-khOQfOxgei8j5IRUrOsPNdXC2vVjDzCxlj4jsgI0exKff4wALLgxDbbULFdFttDeZOFcZ7W2_WDpBxvXv-/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>
Bentuk kotak pencariannya seperti ini :
Kotak Pencarian 3, kodenya sebagai berikut :
<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/AVvXsEhyYka1fD194XINzRSKr07XfMNQt6-bU4xrh-sJ6DF8TX30o8qwlZzIRPZN18TscUeqs8RJ4P8vJU8nnJ9yegNJG9xGARvdhtEnMkAk_EJ3xbbmkJSpgkQZM9CXGlVZIzgxRb6mnBsk0MI/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
<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/AVvXsEhyYka1fD194XINzRSKr07XfMNQt6-bU4xrh-sJ6DF8TX30o8qwlZzIRPZN18TscUeqs8RJ4P8vJU8nnJ9yegNJG9xGARvdhtEnMkAk_EJ3xbbmkJSpgkQZM9CXGlVZIzgxRb6mnBsk0MI/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
Ket :Warna tulisan merah silahkan sobat ubah sesuai selera dan tulisan biru diubah sesuai ukuran yang diinginkan.
Bentuk kotak pencariannya seperti ini :
Kotak pencarian 4, kodenya sebagai berikut :
<style type="text/css">#mediablogger-searchbox { border-radius: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_OIMz6RBTkpeKc8yMs2tHGXfRzjFUDCdzEsUihXV4e6Ph_PJagtRF49DEDPgxviQRjm3YJKkWrTiqSob_-KC1m24yIIN4kYhEAZI-yrn7PQ139gQYTs81EFmDVoqiHj-DCkbJEpKqIaaP/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>
Ket :
Ganti link warna merah pada script dengan berbagai macam pilihan warna dibawah ini :
Warna hijau :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_OIMz6RBTkpeKc8yMs2tHGXfRzjFUDCdzEsUihXV4e6Ph_PJagtRF49DEDPgxviQRjm3YJKkWrTiqSob_-KC1m24yIIN4kYhEAZI-yrn7PQ139gQYTs81EFmDVoqiHj-DCkbJEpKqIaaP/s1600/impoint.blogspot.com-green.png
Warna merah :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT2bBTfsuqmIAefkkbPFw7TUQ0ayZBmrNmOrmHPJnDpVWLiV2kDtd_sGCrK5NIzZDRuLRwvi1Q8s_ugwsfujueZ24kCQZ2CAj5RINXC-1CL7S5TwgXbsIXZ61dcv5OrpBKxfIoG5v0x4_d/s1600/impoint.blogspot.com-red.png
Warna biru :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhipDTYYu5HYcWro1t29ZSHeqgj9q0bmTl7Ch57yIgRVyUOvuX-6C3UjVzVSDR9H_gvQvjr8PHEBX9FGXD5ghlp6BR5A1Bx0q8P2lOoM9IYWy_YccEKGp1kQSULYFkQsFlaA2QTfOofFpw-/s1600/impoint.blogspot.com-blue.png
Warna orange :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLIXSHm-2ALzyMOvsUTPjhNLEfUWMifTQFdUNBKm-DvZo3tZbgjpLTMi2Va0DVDBooutkLtZhFZbTBRIcNDoBPqTgpn3AcBW_BAclGNPFZQxK6Z2daQrBXAyAhoq7NukeYUSEa3CfoWBvZ/s1600/impoint.blogspot.com-orange.png
Bentuk kotak pencariannya seperti ini :
Kotak Pencarian 5, kodenya sebagai berikut :
<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix4_R_JvuwvT2mCMqUMZdZcswvMJqDufWZHDyWxN1M62OPHw1IiwWDY8vgVsYBacj2D0nwKnP8qT1iI4DSt7Ye32_p0ilGjIyAdar2X1i8QECTynLz0VC9XLJtyOsdbX7osGkyJdJb9rV9/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>
</div></center>
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix4_R_JvuwvT2mCMqUMZdZcswvMJqDufWZHDyWxN1M62OPHw1IiwWDY8vgVsYBacj2D0nwKnP8qT1iI4DSt7Ye32_p0ilGjIyAdar2X1i8QECTynLz0VC9XLJtyOsdbX7osGkyJdJb9rV9/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>
</div></center>
Ket :
Silahkan sobat ganti warna merah pada script diatas dengan kode dibawah ini untuk mengganti style kotak pencarian yang lain sesuai selera sobat, silahkan sobat coba-coba mana yang cocok.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQelLj5xirAevcegtvnDKK7ngyg0FG6J_EzMiL6pNaVFwgcWUj7dSOVtavYOGWWt1n4ru5YLsXPbtaH8OHz3usviIgsn4gWV1exK81u0_-i_UzHr_AOYtzYW7mcwWAkcCBXsT0tm7HpPIe/s1600/lostsector-search-box-darkgrey.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi00sg4oAgcO8IOr7lTRuFNKbvIYnTinRilVeOerNxqD5xG8qIKSni8ffKKKXdWrIaUuqI1I3TwLbl42QZXWujhpA0Dn8GYs5ASElONrxpDoA4vwi_wbe9umx4btwtx2jpNXpgs0_kImR3M/s1600/lostsector-search-box-gray.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQHRs61JVZu8s-x91nIo6mzKVFjyFpAufdeYS87EUetsRpjE62kq06OzKnmsy7xsviQ1-JPw7xH9D-qblCexO31ZG1ZyCtnLQktHE0ohC-dg8AiwWCg7FvY_3ykKfuoK_gohLWnimU1IZ/s1600/lostsector-search-box-black.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7cqtXnl-I594SeD7y8CxkeIIjfMck3F66mhjzSNCqGcvn8VvI4LrWwkjoeWipkJ2R-Bv5hsOakhYQWpJvx54PybcfpCM4UZcMFlbettpYXdp3LspkPrbroYQSOpnhHll_Jzo8s6ws6BA/s1600/lostsector-search-box-red.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd9W1TRFi5YW4XgjqSd-kZd-fQZ4MtaNPeyLWOqK-bixEdZotj68oJ23gJdf7HPxS_-Njxw6vlq9jrc6V6yOL-2CpRG2FviEE0TCSDCm18huwdHfpAa8plcUs9ccSK9gD2z762oZtNfk3x/s1600/lostsector-search-box-yellow.png
Bentuk kotak pencariaanya seperti ini :
6. Setelah sobat memilih model kotak pencarian seperti tampak dari kotak pencarian 1 sampai 5, copy scriptnya dan pastekan ke gadget html/java script. Kemudian simpan.
Nah, selesai deh cara membuat kotak pencariannya dan semoga tutorial ini bermanfaat.
