Membuat Kotak Pencarian Blog ala Bloglang

Pada blog ini sudah ada beberapa artikel cara membuat kotak pencarian (search box)! Bila dipaparkan satu per satu akan menyita waktu. Jadi kalau mau melihat-lihat silahkan saja gunakan kotak pencarian yg ada pada blog Beben Koben si bloglang anu ganteng kalem tea dengan memasukan keywords "kotak pencarian box search" Dengan hadirnya CSS3 & HTML5 tercipta juga bahasa baru dalam dunia site ini sob. Seperti beberapa contoh bahasa anyar tentang HTML 5 yg pernah Koben paparkan di artikel TiDaK AdA AkTiFiTaS :D
Sekarang giliran menerapkan bahasa baru tersebut dengan penerapannya membuat kotak pencarian untuk blog dengan atribut input[type="text"] in formaction :D Koben sengaja mengarahkan hasil pencarian ke embah google, secara blogspot itu kepunyaan dia ;)) Bila ingin hasil tujuannya ke search engines lain, silahkan lihat kodenya di Three Major Search Engines for You.

Kreasi search-box seakarang mengusung motto simple, full stylish and glamour =)) Sangkin sederhananya kotak pencarian ini tidak disertai dengan tombol push, go, or search :P Cukup kotak tulisan lalu tekan enter untuk proses kerjanya ;) This is final result

Keren nggak! Silahkan di ambil kodenya

CSS Coded

#searchform input[type="text"] {
background: #EEE;
color: #999;
font-size: 13px;
padding: 5px;
width:99%;
margin: 5px;
border: 1px solid #CCC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#searchform input[type="text"]:hover, #searchform input[type="text"]:focus {
background: #FFF;
border: 1px solid #444;
color: #444;
}

Ganti ukuran lebar, warna atau apapun sesuai kebutuhan masing²

Markup HTML

<form id="searchform" action="http://google.com/search" target="_blank">
<input name="sitesearch" value="YOUR-BLOG.blogspot.com" type="hidden" />
<input type="text" name="q" value="Type your keywords here and press enter..." onfocus="if (this.value == 'Type your keywords here and press enter...') {this.value = '';}" onblur="if (this.value == ''){this.value = 'Type your keywords here and press enter...';}">
</form>

Letakan alamat blog kalian di tulisan berwarna merah maroon. Sekian dan semoga bermanfaat. Kreasikan dengan kreasi kalian juga, buat lebih top ya ;)
Happy blogging \m/