January 26, 2012

Tutorial : Cute Search Box


Azizi di sini ! Hai dan selamat tengah malam semua. 


OK, tuto ni kredit sepenuhnya kepada Rana. First of all, klik INI dan INI dulu. 

1.  Dashboard > Design > Add Gadget > HTML/JavaScript

2.  Copy code ni dan Paste dalam HTML box tadi:
<form action="/search" id="searchThis" method="get" style="display: inline;">
<input id="searchBox" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="background: #fff; border: #cdeff7 dashed 1px; color: #a7a7a7; font-size: 10px; width: 230px;" type="text" value="Search" vinput="" /> <input id="searchButton" style="background: #fff; border: #cdeff7 dashed 1px; color: #a7a7a7; font-size: 9px; padding-top: 3px;" type="submit" value="Go" /></form>
3.  SAVE !

Teka-Teki
Merah : Warna background search box
Oren : Warna border search box
Hijau : Jenis border ( dashed, solid, dotted )
Aqua : Tebal border 
Biru : Warna text di search box
PurpleText untuk kotak 'Enter' 
Hitam :  Text di dalam search box. 
 
Kalau korang tak faham, korang just try and error dulu. Kalau nampak tak lawa, perbetulkan apa yang patut.  ^^
 

3 comments: