Modifikasi Search Box Auto Hide Dengan Background

Juni 12, 2010

Memasang kotak pencarian atau search box di blogger akan memberikan kemudahan bagi pengunjung untuk mencari dan melihat postingan di blog anda. Dan untuk kali ini saya coba memposting cara membuat search box menggunakan

Auto Hide denga menambahkan backkground warna ataupun background image.

Untuk Auto Hide tentunya anda sudah jadi saya tidak perlu menjelaskan lagi. Untuk search box sebenarnya dari blogger sendiri sudah menyediakanya. namun kita tidak bisa meng custom tampilan dari search box tersebut ataupun merubahnya. Tapi dengan cara di bawah ini anda bisa merubah tampilan dari search box di blog anda.

Contoh search box auto hide seperti di bawah ini

Langsung saja pada pokok bahasan membuat atau me - modifikasi search box auto show hide.

Masuk ke Blogger
Pilih Tata Letak (Rancangan) - Tambah Gadget - HTML/JavaScript
Masukan Kode HTML di Bawah ini.

<style type="text/css">

#searchboxo{
background:#f3f3f3;
border:1px solid #6B7171 ;
width:240px;
height:25px;
margin:0px;
padding:4px;
}

#searchboxo form input.searchinput{
float:left;
padding:2px;
padding-top:2px;
margin-left:2px;
width:140px;
height:19px;
color:#000;
font-size:14px;
border:1px solid #6B7171;
background:#fff;
}

#searchboxo form input.submitbutton{
float:right;
width:85px;
height:25px;
margin-right:2px;
padding-bottom:4px;
font-variant:small-caps;
text-align:center ;
cursor:pointer;
border:1px solid #6B7171;
background-color:#6B7171;
color:#FFFFFF;
font-weight:bold;
font-size:12px}

</style>
<div id='searchboxo'>
<form action='/search' id='searchform' method='get'>
<input class="searchinput" id="searchbox" name="q" onblur="if (this.value == "") {this.value = "Type text to search";}" onfocus="if (this.value == "Type text to search") {this.value = "";}" type="text" value="Type text to search" />
<input class="submitbutton" type="submit" value="Search" />
</form>
</div></div>

Jika sudah klik simpan.

Anda bisa meng custom tampilan dari search box auto hide ini. Saya coba menjelaskan sedikit kode HTML diatas.

#searchboxo{
ini kode paling dasar untuk background search box.

#searchboxo form input.searchinput{
Ini adalah kode dimana teks muncul pada kotak pencarian.

#searchboxo form input.submitbutton{
Ini adalah kode dimana pointer atau menyentuh kotak SEARCH.

Anda bisa mengganti ukuran lebarnya sesuai dengan blog anda. dan anda juga bisa mengganti background dengan warna lain ataupun dengan backgroung image.
Jika anda memahami kode HTML tentunya ini bukan hal sulit. Selamat mencoba.