Cara Membuat Kotak Pencarian ( Search Box )

Sudah lama tidak memposting yang berhubungan dengan tutorial blog, namun dipagi yang dingin ini ditemani rintikan hujan saya ingin memposting tutorial blog yaitu cara membuat kotak pencarian. Sebenarnya sudah ada fasilitas yang disediakan pada widget blogger namun jika kita ingin merasakan kotak pencarian yang berbeda kita harus menggunakan script yang lainnya.

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(http://2.bp.blogspot.com/-mOcbojPwG1U/UOiqgUK1LwI/AAAAAAAAAak/ZwmGebAuDfU/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(http://2.bp.blogspot.com/-RdCoLqn34t4/UDeUFSTJ17I/AAAAAAAAKqg/GxdClZ5RjXg/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 :

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

Warna hijau :
http://1.bp.blogspot.com/-17dWPUuCMEE/UQr5WvW2inI/AAAAAAAAAWM/xWAzhlw4ez0/s1600/impoint.blogspot.com-green.png

Warna merah :
http://2.bp.blogspot.com/-kyV43LzLedQ/UQr5gVVxaEI/AAAAAAAAAWc/Q-2_hR17RgU/s1600/impoint.blogspot.com-red.png

Warna biru :
http://1.bp.blogspot.com/-yWZnkjCe4tY/UQr5OeN8MXI/AAAAAAAAAWE/-EFf5XtroXU/s1600/impoint.blogspot.com-blue.png

Warna orange :
http://2.bp.blogspot.com/-qwEuTidco9E/UQr5bisH4yI/AAAAAAAAAWU/ZpAUuwXOvYE/s1600/impoint.blogspot.com-orange.png

Bentuk kotak pencariannya seperti ini :

Kotak Pencarian 5, kodenya 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.

http://3.bp.blogspot.com/-jukSBGryNx4/UPgqKoLKi2I/AAAAAAAAC38/V7A3wruYzgo/s1600/lostsector-search-box-darkgrey.png

http://3.bp.blogspot.com/-Cs9SgVp9zCs/UPgqLrR-V-I/AAAAAAAAC4E/-YNbafNnWPc/s1600/lostsector-search-box-gray.png

http://3.bp.blogspot.com/-BvgOsymky-E/UPgqKjRsbmI/AAAAAAAAC4A/R0ANwGDnidM/s1600/lostsector-search-box-black.png

http://1.bp.blogspot.com/-6YNhrJC-OZc/UPgqMB5Qb9I/AAAAAAAAC4M/WbrKQoexM9A/s1600/lostsector-search-box-red.png

http://4.bp.blogspot.com/-7zTQKWJ1k74/UPgqMPLMCKI/AAAAAAAAC4Q/RfZyk8G44vs/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.

Pencarian

Cara Membuat Kotak Pencarian ( Search Box )

Diposting Oleh Bang day ; Hari Jumat, 15 November 2013 Jam 06.09

Artikel terkait tentang tutorial blogspot

Kategori

Artikel Populer