Membuat Kotak Pencarian keren di blog

Kotak pencarian atau Search box sangatlah penting dalam suatu blog untuk mempermudah pembaca dalam mencari artikel tertentu dalam blog kita. Setelah googling, saya menemukan kotak pencarian yang keren seperti gambar ini....
Jika sobat tertarik untuk membuat kotak pencarian seperti ini, ikutilah turtorial di bawah ini...
1. Log in ke blog sobat
2. Masuk ke Tata Letak > Tambah Gadget > pilih HTML/JavaScript dan pastekan ssalah satu script di bawah ini.

Kotak Search 1

<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_n8fpNly0BQ1mceVILIFRrEKaY0PJ9PyAQqE-WDTqyp-Sdh15TmA2C_P4a5nn918-vND-F3ftRvrwJA9pt38jZ9mlnYrjGVEJKy7IeAkR3J9a7t9lGwWk501rXNadye4CsoPzNnw7Jver/) 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: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>

Kotak Search 2

<style type="text/css"> #b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJE5hpIdwfzmi5Xv7Mvy4oswMRagszq2AGIecKskZ8IgmvZGqiqqO47yBtIRUY-M0pQv1b-G3NYKqr2GwM2vCquPm63T_4Et8LkIR7pmCw37q04WLXpp48sCWVBJtNZrrDEXy4fR9h97pr/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#b-searchform{display: block;padding: 10px 12px;margin:0;} form#b-searchform #b{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#b-searchform #bbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="b-searchbox"><form id="b-searchform" action="/search" method="get">    <input type="text" id="b" 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="bbutton" /></form></div>

Kotak Search 3

<style type="text/css"> #c-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXht_ifPSEqDe86zlz24JEP3tQDNRfOJrWp8lXXjY_9JRunQvQ1VTAalgt2g2ezFatyEj-mXi8hhe8yqAq3xrw_1y_jQF-Q3gXJZlT0_yg_vCmw1Drrodfqg3_mFBI77V-HYkASaXdBJWZ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#c-searchform{display: block;padding: 10px 12px;margin:0;} form#c-searchform #c{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#c-searchform #cbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><div id="c-searchbox"><form id="c-searchform" action="/search" method="get">    <input type="text" id="c" 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="cbutton" /></form></div>

Kotak Search 4

<style type="text/css"> #d-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXjTpdBkh9qvtfzd2Z1E_zHWJIdbB2KHqY5-wUOovAd9bJdR2vILYpmZV8tKDiRT6scqzMsrRzmH2ZXClxs-seXaCviNoWOv4XiGKWIXLWYJNeoq-Wt1dRikDTInWCM61JcSBMQTK2nVbr/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#d-searchform{display: block;padding: 12px;margin:0;} form#d-searchform #d{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#d-searchform #dbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="d-searchbox"><form id="d-searchform" action="/search" method="get">    <input type="text" id="d" name="q" value=""/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="dbutton" /> </form></div>

Kotak Search 5

<style type="text/css"> #e-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFyPSNbXlKUsnY0hgcTWy8fis4NAURZXXs62byTV5rIVhfdxwPk_YBN39bREhlcz9jRXrK9rE3PxVMEfZheusDnRKUTxJ71zrQ-qB1ooGMAHPfYBAG55Qg3Tc0_AlrTTtWNSZ1oOWPcRvx/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#e-searchform{display: block;padding: 12px;margin:0;} form#e-searchform #e{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#e-searchform #ebutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="e-searchbox"><form id="e-searchform" action="/search" method="get">    <input type="text" id="e" name="q" value=""/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="ebutton" /></form></div>

Kotak Search 6

<style type="text/css"> #f-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxWBqu0v6cmrHkf2FuXXwIa7eoZgpRVxhaspTySW0d0EbDDNcsdIoDP3JIGgad4f5-T0M1ry1vavX0BPVVNG5M2Zr1o4D7tXY4a2sx4LbVbujAstWM0RuaTU7Qpy1Sfw2dyb7aYOZVHNCV/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#f-searchform{display: block;padding: 12px;margin:0;} form#f-searchform #f{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#f-searchform #fbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="f-searchbox"><form id="f-searchform" action="/search" method="get">    <input type="text" id="f" name="q" value=""/>  <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="fbutton" /> </form></div>

<form id="searchform" action="http://rexroom.blogspot.com/search" name="searchform" method="get">
<input id="s" value="" name="q" type="text" /> <input id="searchsubmit" value="Pencarian" type="submit" /> </form>

cari disini

<p align="left">
<form id="searchthis" action="http://rexroom.blogspot.com/search" style="display:inline;" method="get">
<strong>cari disini<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Pencarian" type="submit"/>

Keterangan : 
Warna merah adalah Url blog sobat
Warna biru adalah Judul tombol 

3. Setelah itu Save dan lihat hasilnya...

Related Post: