Advertise

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.

15 komentar:

  1. sepertinya seru juga tuh ..... tapi aku masih agak bingung .... ntar aku coba dulu deh ,, siapa tahu jadi ngerti

    BalasHapus
  2. Katanya lebih enak kalo pake google translate yang di blogger langsung Ya?

    BalasHapus
  3. Wah thanks neh, kalo saya udah bawaan dari templetnya ya..

    BalasHapus
  4. sepertinya bagus mas, ntr kpn2 ijin copy scriotnya bwt dipraktekin mas

    BalasHapus
  5. Kalo kotak search di blogku minimalis banget. pingin nyoba

    BalasHapus
  6. langsung sedot..hehuehuahuehaue...abis kehilangan search ku soalnya...makasih dah info dan tutorialnya...sering2 aja sobat..:)

    BalasHapus
  7. ini yg aku cari sob.. Kebetulan tadi search lewat mbah Gugel dapetnya ke blog keren ini.. Heheheh :))

    BalasHapus
  8. sipp banget, saya terpakan ya dgn sedikit modifikasi :)

    BalasHapus
  9. nice info gan, visitback http://www.musicandnews.co.cc/

    BalasHapus
  10. gimana caranya nyisipin itu css disamping menu blog gan?

    BalasHapus
  11. terimakasih om..
    tak langsung praktekin dah..
    salam kenal dan sukses sllu om

    BalasHapus
  12. Ijin menerapakan diblogku Gan,makasih tipsnya.

    BalasHapus
  13. Ijin copas ya sop.
    Berhasil kuterapkan diblogku sob,makasih sudah berbagi.

    BalasHapus
  14. Makasih sobat udah berbagi...
    berhasil dengan mulus di blog ane... :)

    BalasHapus