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

23 thoughts on “Search Form Gaya dengan Image

  1. akido

    mas…. mo nanya lai……
    aku ngedit templete yg aku bikin pake artisteer, tp search fromnya gak mau geser ke kanan kira2 cra benerinnya mana ya mas…?

  2. admin

    mas saya mau tanya, saya ikuti dari awal tutorialnya. tapi saya coba kembali lagi pada awal pembuatan index.php saya lihat kita tidak membuat search from secara manual mas, justru search form nya kita import menggunakan function.php melalui sidebar.
    lalu search form yang di atas yang mas surug dirubah yang mana mas? apa yang terletak pada sidebar atau harus dibikin sendiri yang baru. sebab search form pada artikel di atas terletak pada bagian menu.
    mohon bantuannya mas!

  3. Jefry

    Jadinya pasti akan lebih menarik sebab ada gambarnya
    terima kasih atas info scriptnya, mungkin bisa saya share pula ke dalam blog saya

  4. article

    I simply want to say I am just very new to blogs and honestly loved you’re blog site. Probably I’m likely to bookmark your website . You definitely have perfect articles. Thanks for sharing your webpage.

  5. Joel Coleman

    I like the helpful information you provide in your articles. I’ll bookmark your weblog and check again here frequently. I’m quite sure I’ll learn many new stuff right here! Good luck for the next!

  6. Jules Distilo

    I am not assured where you’re getting your information, on the contrary fantastic topic. I needs to spend some period scholarship much more or understanding further. Thanks for vast in a row I was looking representing this information for my mission.

  7. Dalton Zabka

    You really make it seem so easy with your presentation but I find this matter to be really something that I think I would never understand. It seems too complicated and extremely broad for me. I’m looking forward for your next post, I will try to get the hang of it!

  8. Warner Wrobleski

    Does your blog have a contact page? I’m having problems locating it but, I’d like to send you an email. I’ve got some ideas for your blog you might be interested in hearing. Either way, great website and I look forward to seeing it grow over time.

  9. Morgan Hernandz

    When I originally commented I appear to have clicked on the -Notify me when new comments are added- checkbox and from now on every time a comment is added I get 4 emails with the same comment. There has to be an easy method you are able to remove me from that service? Many thanks!

  10. Lela Marines

    Hello, i think that i saw you visited my blog so i came to “return the favor”.I am attempting to find things to enhance my web site!I suppose its ok to use some of your ideas!!

Comments are closed.