Modifikasi Search Box Auto Hide Dengan Background

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 == &quot;&quot;) {this.value = &quot;Type text to search&quot;;}" onfocus="if (this.value == &quot;Type text to search&quot;) {this.value = &quot;&quot;;}" 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.

Komentar

beb mengatakan…
sepertinya seru juga tuh ..... tapi aku masih agak bingung .... ntar aku coba dulu deh ,, siapa tahu jadi ngerti
achen mengatakan…
Katanya lebih enak kalo pake google translate yang di blogger langsung Ya?
buwel mengatakan…
Wah thanks neh, kalo saya udah bawaan dari templetnya ya..
Unknown mengatakan…
tq infona bro :)
Hanna Pertiwi mengatakan…
sepertinya bagus mas, ntr kpn2 ijin copy scriotnya bwt dipraktekin mas
Ega mengatakan…
Kalo kotak search di blogku minimalis banget. pingin nyoba
Belantara Indonesia mengatakan…
langsung sedot..hehuehuahuehaue...abis kehilangan search ku soalnya...makasih dah info dan tutorialnya...sering2 aja sobat..:)
la tahzan mengatakan…
ini yg aku cari sob.. Kebetulan tadi search lewat mbah Gugel dapetnya ke blog keren ini.. Heheheh :))
Ladida Cafe mengatakan…
sipp banget, saya terpakan ya dgn sedikit modifikasi :)
Unknown mengatakan…
nice info gan, visitback http://www.musicandnews.co.cc/
Rare Polos mengatakan…
gimana caranya nyisipin itu css disamping menu blog gan?
Super-Bee mengatakan…
terimakasih om..
tak langsung praktekin dah..
salam kenal dan sukses sllu om
Cigablogs mengatakan…
Ijin menerapakan diblogku Gan,makasih tipsnya.
Unknown mengatakan…
Ijin copas ya sop.
Berhasil kuterapkan diblogku sob,makasih sudah berbagi.
U-YU mengatakan…
Makasih sobat udah berbagi...
berhasil dengan mulus di blog ane... :)

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text