Membuat Search Box Menggunakan CSS

 

 

 

Membuat Elegant Search Box Menggunakan CSS - Pada kesempatan kali ini saya akan share tentang cara memasang elegant search box menggunakan CSS, seperti yang kita ketahui bahwa search box ini sangatlah penting dan wajib ada pada web/blog kita karena keberadaannya amat sangat di butuhkan sekali pada proses pencarian dalam web/blog kita tersebut.

Dan kali ini akan saya share cara membuatnya, tampilannya sangat unik, keren, dan elegant... Scriptnya pun tidak begitu rumit, simple dan mudah di pahami. Oke, langsung saja bagi anda yang berminat memasang elegant search box menggunakan CSS ini slilahkan ikuti langkah-langkah berikut :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".

 

3. Klik "Tambah Gadget".

 

4. Kemudian pilih "HTML/JavaScript".

 

5. Lalu pilih salah satu dari script kode elegant seacrh box di bawah ini dan letakkan di dalam widget HMTL/JavaScript yang sudah kita buat seperti pada langkah ke-4.

 

 

Script :

"w2b-searchbox"> "w2b-searchform" action="/search" method="get"> "text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> "image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

 

 


Script :


?

"w2b-searchbox"> "w2b-searchform" action="/search" method="get"> "text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> "image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

 

 

 

Script :


?

"w2b-searchbox"> "w2b-searchform" action="/search" method="get"> "text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>"image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

 

 

6. Kemudian klik save/simpan, dan lihat hasilnya...
 

 

http://ngeposta.blogspot.com/2012/10/membuat-elegant-search-box-menggunakan.html