Cara Membuat Kotak Pencarian (Search Box) di Blogger

Posted by : Willy Yanpraga

Tag :// Home, Tag :// Ilmu&Software

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 :

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/AVvXsEjXWZ4_Q8oKxzTyvEfz10RP2t59rRpB_ktkBuli4LtwbHX8AXK_erX2cAjL_XVSuDjDu38qRtnYrgAbT3Qv8qFDgkDDwSsfemBPr0MrY5Uyoo7fvckG33HcVDTtR6Tx68SX8mh7LPy5W1ua/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/AVvXsEhDJUBA5IHzruoD9qLTpj_MlHhBcOiZOPp9G26ljTlUR6gtwBgq6CZF8AmXi6xSg1kWkRSOIiJOTnBxx8EhcDZQv1Y-5frUlbVLEnOr4rkY6UI7tbUSTr06VTPeeNXS3ZmAn_oluPFjxSw/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 :

4.Kotak Pencarian 4 Kodenya Sebagai Berikut:

Ket :
Ganti link warna merah pada script dengan berbagai macam pilihan warna dibawah ini :

Warna hijau :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqVvhbdtLtLls2bXQsLv0hNP5RvrE5wpTLME8HMp4BoRTd5-8hMSWVTeVQ-GTze3ELDJTufmeHfqT6vOCzXfU2VMx5vFEVHCdBxEwDJuoIvLeGvr5HUBiguGM4xvdhJGP3oFLFEnsR7gku/s1600/impoint.blogspot.com-green.png

Warna merah :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFXedxKy5mrd-t6W4JRZRsNaLJXIrWxj9SlD_L6mYqAPSxyzDn70ZesPucA5sSavdo72Z09JXNe3a792nD2nKDcxNwhQk9cpvqNouRhQ-NFwgDMMqSBxYZl-vHVpXuMdfG0ebCFc8XsqIA/s1600/impoint.blogspot.com-red.png

Warna biru :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs7-HVB6xTRzM6mX3Lm_gk1t0ulJ1BnZ7EOfTqKEFeDO3pUPHGseilgAA5XpZeJ-O7-oIvfp9mZsVM8DQJGkTmp97-mBqm_DG_TNwWK2BIfCrtnLobSB9hogGD1Rzsi4NXxJrqwz7mla4q/s1600/impoint.blogspot.com-blue.png

Warna orange :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB1NPwD0WFd1gVFFp8c4SvDmdVHMmP4IK-0USUuJqk6ob5LGNDToIey_N0XEWxGjlrIjMcaeD3V6b_amkHbzVfM2Mz9v5Fp2EuZvqGj9tzvDOHY3A5htZyRSaMI1zRiqkFd4ZXAHk0Fu1d/s1600/impoint.blogspot.com-orange.png

Bentuk Kotak Pencarian seperti ini:

5.Kotak Pencarian 5 Sebagai Berikut:

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/AVvXsEibicqxau8iW-UzI9NtQ0VG2ywHsCIcsMevYbr8slWuGdaWmSnw0HvYdHH_KTTMB_G5A-VpwPfc67t8wqrkPB1Mt2DA2WAm4EDWNh0lY1Yp12tt_49xdT7wciUY_YbubZSw4vgX1OtNosQe/s1600/lostsector-search-box-darkgrey.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFNPPUjEftfhxwSzPOJ2sWiVxDCwmlM0Qej17_2UUBRgvJL7xNv_7c_dKe_KAk0Yy2VjV8uJdn7oFc0EwdJnDqJVJohMz-aPO-pwwpp2rD_tKkQodBA4RL1TxnoSK20_bJONDr-CHmUqNi/s1600/lostsector-search-box-gray.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi70e5IRAcY1clIy4zsOZm3k8YGKcltWvLBG677LOW8ISKL8FE5Dfb8JiLrVDtjO2FELU9cSeYknY4m3sE8h7Aj6G7Yv1g3BJDbfM5ufyhVJSLvh6XSSJUi0lYktXfQMMsSGZM5xAdhkQL5/s1600/lostsector-search-box-black.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0M4VRjGsTnlcPWZzQo-Vn3wcS7hT-gMKIXAQlP7wFAma6tOyL3gWAfzj8BN4VRqFzEW5U1-B1myzHbFiwgCuy_Lw6V0eRwX0f59aSb1grfSRYDquciZHsq7gl9Yu0fLiMHSW0JkHcY3Lw/s1600/lostsector-search-box-red.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixEJISi5K3EGy85lX7NsHQevssCOH_qJbfApVlm35ar9VBajrCA4LsCqMDFOmMnXhisOf1wXgQKmV_nwhkBqGjQmvTMFmHLY_zUpzuSCNN8-57zGOiO9G0q_9IXlJFnz0kkKNU64NKI7CP/s1600/lostsector-search-box-yellow.png

Bentuk Kotak Pencariannya sebagai berikut:

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.