Cara Buat Search Box atau Kotak Pencarian di Blog

Cara Buat Search Box atau Kotak Pencarian di Blog - Secara singkat, search box adalah sebuah tool yang digunakan untuk mencari data-data atau alamat website dengan memasukkan kata kunci yang ingin kita cari. Namun search box atau kotak pencari yang biasa kita gunakan hanya memungkinkan kita untuk mencari data di mesin pencari seperti Google, Yahoo, dan MSN. Lalu bagaimana kalau kita ingin mencari data hanya pada blog kita saja?

Kotak Pencarian atau Search Box bisa disebut sebagai kebutuhan dasar dari sebuah blog. Dengan adanya kotak pencarian, pengunjung blog akan lebih mudah menemukan postingan atau artikel yang mereka cari atau butuhkan.

Kalau sobat sering melakukan Blog Walking dari satu blog ke blog yang lain, pasti sobat blogger tidak pernah menemukan blog yang tidak memiliki kotak pencarian, terkecuali blog baru. Search Box atau Kotak Pencarian yang saya siapkan ada tiga bentuk, setiap bentuk memiliki tampilan yang berbeda dan tampilan untuk setiap Search Box ini sangat sederhana.
Mungkin sekarang sudah banyak template yang sudah disediakan kotak pencari atau search box. Tapi bagi template yang tidak dilengkapi dengan fasilitas ini. Anda juga bisa memasangnya sendiri dengan cara sebagai berikut:

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Click to go" type="submit"/></form>

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text" value="Enter search query"/><input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU7qEhG7kCofRYqVgVRvMuvbANm19yTjmHlnXL5y2L4kqlrTsUObRezF65gTKuEyBJuRmyMYUwQfXZUDOJHv-rdL8Z3C4NHy7x4mRqNFiTSaVIt_oEsU6B-tBeVzGvs-F4OPcKYh1bnq8/s1600/magnifier.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/></form>

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRA1XzviS-6lq3q1Tr-Jhg7RWy0oWJDiglpqfuEu93ZzIuOQvikLmtqeNpN7FstMpjdMYap8l-tDqPT0ew7aSWptEb7F58HlJMDr2q4GKvKK3lS_EGQsR0z7v9JmT2DYt9luZqdUzP29m/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>