Tutorial Search Box Cara Baru



Assalamualaikum!! Sihat tak? ^^

Korang pernah nampak button search kat blog bloggers lain? Korang pun nak buat juga tapi tak tahu macam mana? Heheh macam biasa, jangan risau-risau , takmau sedih-sedih ikut tuto ni okay?

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/enter or else.




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/dotted/solid


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 : Yang ni korang takyah kacau .
Hijau    : Gantikan dengan saiz yang sesuai di sidebar korang.
Ungu   : Tukarkan perkataan Enter Search Term dengan perkataan yang korang nak dalam kotak tuh.

No comments:

Post a Comment

Annyeonghaseyo! Terima Kasih kerana sudi membaca :) Jangan lupa tinggalkan komen tau? Harsh words are not allowed.