Membuat Search Box Melayang pada Blog

Lama gk nulis postingan, kangen juga... tapi bingung juga mau nulis apa, yaudah dehh berbagi ilmu aja tentang blog ini...

Postingan kali ini saya ingin memberitahu bagaimana membuat Search Box seperti blog ini..

OK langsung aja..

untuk membuatnya, masuk ke Dashbor→Rancangan→Edit HTML..

lalu Copy Kode berikut diatas kode ]]></b:skin>

 /* Search

-----------------------------------------------

 */

#search {

width: 260px;

font-size: 11px;

margin: 0;

padding: 6px 0 0 10px;

}

#searchform {

margin: 0;

padding: 0;

overflow: hidden;

display: inline;

}

#searchbox {

float: right;

background: #fefefe;

width: 180px;

color: #000;

margin-right: 15px;

margin-top: 0px;

padding: 4px 0 3px 5px;

border: 1px solid #ababab;

display: inline;

font: 12px normal 'verdana';

}

#searchbutton {

background: #000;

float: left;

width: 50px;

color: #fff;

margin: 0 0 6px 0;

padding: 3px 3px 2px;

border: none;

font: bold 16px arial;

}

#searchbutton a:hover {

background: #000;

}

#melayang {

background: #fcfcfc;

border: 1px solid #f0f0f0;

position: fixed;_position:absolute;bottom:0px; left:0px;

clip:inherit;

_top:expression(document.documentElement.scrollTop+

document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

selanjutnya Copy kode di bawah ini diatas kode </body>

<div id='melayang'>
<div id='search'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='255' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari disini...&quot;;}' onfocus='if (this.value == &quot;Cari disini...&quot;) {this.value = &quot;&quot;}' type='text' value='Cari disini...'/>
<input cursor='hand' id='searchbutton' type='submit' value='go'/>
</form></div>
</div>

Ket :
○ Kalau mau atur posisinya, ganti kode berwarna biru sesuai keinginan...
○ Kalau mau ganti tulisan "GO" pada tombol search, ganti tulisan yang berwarna merah...
○ Kalau mau ganti tulisan "Cari disini..." pada kotak search, ganti tulisan yang berwarna hijau sesuka kalian...
○ Kalau mau rubah yang lainnya belajar aja CSS sama mbah google... ahahha...

yaudah kalau udah tinggal save template, dan lihat hasilnya....