Search Form Gaya dengan Image

Kalau sebelumnya sudah saya sampaikan bagaimana memasang search form di menu bar, maka di artikel kali ini kita akan melakukan modifikasi agar search form itu bisa tampil lebih gaya. Bagaimana caranya?

Oke, pertama kita perlu memodifikasi kode form yang dipakai sebelumnya:

  <div id="search">
  <form action="<?php bloginfo('url');?>" method="get">
  <input type="text" size="30" name="s"/>
  <input type="submit" value="search"/>
  </form>
  </div>

Kita akan ganti menjadi seperti ini:

<div id="search-nav">
  <form action="<?php bloginfo('url');?>" method="get">
  <input type="text" size="30" name="s" value="Search..." onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}"/>
  <input src="<?php bloginfo('template_url');?>/images/spacer.gif" id="searchsubmit" alt="Search" value="" type="image">
  </form>
</div>

Nah, sekarang tinggal mengubah CSS-nya. Dimana ngaturnya? Yup bener di style.css

Kita cari css yang dulu

    #search {  
      float:right;  
      }  

Kita rubah jadi seperti ini:

#search-nav {
  float:right;
  background: url(images/search.gif) no-repeat;
  margin:0 5px 0 0;
  width:221px;
  height:25px;
  }
#search-nav input {
  background:transparent;
  border:none;
  color: #ffffff;
  margin:0 0 0 7px;
  width: 180px;
  height: 20px;
  }
#search-nav #searchsubmit {
  width: 20px;
  height: 20px;
  }

Selesai!

Lho tapi mana gambarnya? hehehe…. Iya kelupaan. Download gambarnya disini dan extract di folder themes anda. Sekarang coba deh anda lihat bagaimana tampilan themes kita sekarang

Dicari dengan kata kunci:

membuat form search dengan css,search box keren,membuat search box di wordpress,cara membuat search box dengan gambar,membuat form search di php,membuat search dengan gambar,membuat form cari dengan php,membuat search box di pp,membuat custom background dgn image di php,memasang search box di wordpress