Cara Membuat Kotak Search [2]

Pada jaman dahulu sewaktu blog saya masih cupu haha, saya pernah posting mengenai hal ini di sini nah sekarang saya akan posting ini lagi. loh?kenapa?karena yang dulu standar biasa simple dan 1 lagi, ada yang nanya haha. Sekarang saya akan memberi stylenya. Contoh? lihat saja milik saya di atas! Oke yuk mari langsung kita bahas! Step.By.Step !!!

Search

 1. Log in ke blog anda

2. Design > Edit HTML

3. Cari kode ]]></b:skin>

4. Letakan CSS berikut di atasnya. Kalau anda pintar CSS boleh di utak atik

#search {
width: 280px;
font-size: 11px;
float: right;
margin: 0;
padding: 6px 0 0;
}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #84CAF6;
width: 220px;
color: #000;
margin: 0;
padding: 4px 0 3px 5px;
border: 1px solid #005BC3;
display: inline;
font: normal 12px Georgia, Times New Roman, Trebuchet MS;
}
#searchbutton {
background: #84CAF6 !important;
color: #000;
margin: 0 0 0 5px;
padding: 3px 3px 2px;
border: 1px solid #005BC3;
font: bold 11px Georgia, Times New Roman, Trebuchet MS;
}

5. Letakan kode berikut ke gadget anda atau templates anda

<div id="search">
<form id="searchform" action="/search/" style="display:inline;" method="get">
<input id="searchbox" maxlength="255" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" value="Search..." name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" type="text"/>
<input id="searchbutton" value="GO" type="submit"/>
</form></div>

6. CLS Comment Like Share oke hahaha
Terima kasih saya akhiri wasslam