Cara Membuat Kotak Pencarian Atau Search Box

Assalaamu'alaikum... Sahabat...Ketemu lagi. Kali ini kita akan mempelajari cara membuat kotak pencarian atau yang biasa dikenal dengan Search Box. Apa sih kegunaan dan fungsi dari kotak pencarian tersebut? Oke, mari kita bahas sedikit, apa saja yang kegunaan dari fungsi kotak pencarian ini.


Secara umum, Search Box berfungsi untuk memudahkan kita atau orang lain dalam melakukan pencarain terhadap sebuah data, artikel, tulisan, nama, dan apa saj yang terkait dengan isi dari sebuah blog. Misalkan sahabat pingin mencari tentang menu navigasi di blog ini, maka sahabat tinggal ketik di kota tersebut dan langsung klik atau enter.

Disamping fungsi tersebut, kotak pencarian atau Search Box juga berfungsi untuk mempercantik tampilan dari blog sahabat. Kita sering memperhatikan dan melihat blog-blog yang kita kunjungi, biasanya pemilik web atau blog tersebut pasti menyediakan fungsi ini. Sehingga disamping fungsinya untuk pencarian atas sebuah data atau kata, dia juga berfungsi untuk keindahan blog kita. Oke..mungkin itu sedikit penjelasan yang mungkin bisa berguna bagi Sahabat semua.

Berikut Beberapa Cara Membuat Kota Pencarian

• Pertama : Caranya :
  1. Login ke akun Blogger
  2. Klik Menu Layout
  3. Klik Tab Page Element
  4. Klik Pada Add a Gadget
  5. Lalu Klik HTML/Javascript
  6. Dan Pastekan Kode dibawah ini : 

<form action="http://nagariblogger.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Keterangan :

Sahabat ganti http://nagariblogger.blogspot.com/ dengan nama blog Sahabat. Angka 40 = menunjukkan panjang kotak (Search Box) yang akan tampil di blog Sahabat, semakin banyak angkanya maka semakin panjang box-nya, maka silahkan diganti sesuai selera Sahabat.
       
        7. Lalu Save dan Lihat hasilnya!

• Kedua : Caranya sama dengan langkah yang pertama, cuman sahabat menggunakan kode berikut:

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqGMLRe3c-OditR9-VYNqzkjVt-T7beOR2bEFBKv1vbVImyjIbAhgzC8g_zWSzGY_7EjUy7pn5l1q8k135zy8PRmUXppUosad-yvQUgDY4k291DeaC_xwcGqQeHUZthFjLPvmENEo0m5g-/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>

Keterangan :

Sahabat bisa ganti tulisan warna BIRU sesuai keinginan kalian, itu berfungsi untuk menampilkan tulisan ditengah-tengah kotak komentarnya!


Oke..Sahabat ku semua..kali ini, cukup dulu ya..mungkin esok kita akan sambung lagi cara membuat kota pencarian yang lain.

Cara Membuat Kotak Pencarian Atau Search Box 2014-04-12T22:56:00+07:00 Rating: 4.5 Diposkan Oleh: galeri