Rabu, 12 Januari 2011

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....

8 komentar:

  1. itu kode warna birunya yang mana ya, oke makasih ya buat infonya :) (bales) dan juga punya saya kok search box-nya tidak kelihatan(tidak muncul d lyr) tapi dibawah layar :( bantu

    BalasHapus
  2. Thanks atas infonya...
    izin praktek ahh,,,,

    BalasHapus
  3. mksih mas mau saya coba dulu ini

    BalasHapus
  4. keren banget makasih ya gan, ane ijin copy
    http://nyekripvb6.blogspot.com

    BalasHapus
  5. keren banget makasih ya gan, ane ijin copy
    http://nyekripvb6.blogspot.com

    BalasHapus

Tulis Komentar Disini