Tutorial Search Box Cara Baru

merry christmas^^

Hey hey there!! Selamat menjamu selera kepada sesiapa yang tengah kunyah makanan pape depan laptop ni kan.jaga jaga kang semut masuk screen macam mana?
Ok lah sebelum tangan ni mula gatal nak taip yang bukan-bukan baik kita start meh.

Version 1

 



<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>



Hint
Merah : Gantikan perkataan Go dengan perkataan yang korang nak macam Search ke Enter ke ape ke.




Version 2




<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/><input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/></form>




Hint
Merah : Gantikan dengan style dan bentuk yang korang suka
               Contohnya kalau outset tu,korang boleh ganti dengan Dashed ke Dotted ke ape ke.


Purple:Gantikan dengan warna dan background yang sesuai dengan template korang di sini




Version 3


<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/><input id="search-btn" value="Search" type="image" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16x16/search_magnifier.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/></form>


Hint 
Merah : Gantikan dengan icon yang korang nak di tepi dia di sini
Hijau    : Gantikan dengan saiz yang sesuai di sidebar korang.
Ungu   : Tukarkan perkataan Enter Search Term dengan perkataan yang korang nak dalam kotak tuh.

 

14 comments:

What do you think? Leave a comment :)