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:

  

Kita akan ganti menjadi seperti ini:

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