Kuroi KENSHIN
KUROI KENSHIN
HTTP://FARANYMBOBOIBOY.BLOGSPOT.COM
posted by Fara_nym | Hyoukurona Thursday, 16 October 2014 @10:20 pm 0 comments
Tutorial: Stylish Search Box
Assalamualaikum,
Ohayo gozaimasu~


heyya readers! Kyo wa ...ceyhhh mengada plak. let's start again.

Hi readers. today Fara is going to teach ya how to make or put a stylish search box in ur blog.
yeah search box ni boleh custom warna. Tambahan lagi, ada banyak style~

1. Sign in > dashboard > layout > add gadget > html/java script >
         -pilih style search box > copy code > paste at html/java script


Style 1 

<form action="/search" id="searchThis" method="get" style="display: inline;">
<div style="text-align: center;">
<input id="searchBox" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="background: #ffffff; border-radius: 5px; border: teal solid 1px; color: #bfbbbd; font-size: 11px; padding: 4px; width: 150px;" type="text" value="Search here" vinput="" /> <input id="searchButton" style="background: Teal; border-radius: 5px; border: Teal solid 1px; color: white; font-size: 11px; padding: 4px;" type="submit" value="Find" /></form>

Style 2

<input id="searchBox" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="background: #ffffff; border-radius: 5px; border: teal dashed 1px; color: #bfbbbd; font-size: 11px; padding: 4px; width: 150px;" type="text" value="Search here" vinput="" /> <input id="searchButton" style="background: teal; border-radius: 5px; border: teal dashed 1px; color: white; font-size: 11px; padding: 4px;" type="submit" value="Find" /></div> </form>


Style 3

<div style="text-align: center;">
<input earch="" id="search-box" name="q" size="20" style="background: #fffafb border: 1px solid teal;" type="text" value="" />
<input id="search-btn" style="background: #fffafb; border: 1px solid teal; color: teal; font-weight: bold;" type="submit" value="Go!" />

Style 4

<form action="/search" id="searchthis"
 method="get" style="display: inline;">
<div style="text-align: center;">
<input id="search-box" name="q" size="20"
style="background: #fffafb border: 1px dashed teal;" type="text" value"Search" />
<input id="search-btn" style="background: #fffafb; border: 1px dashed teal;
 color: teal; font-weight: bold;" type="submit" value="Go!" /><br />
<br /></div>
</form>

Style 5
<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: teal dashed 1px; color: teal; font-size: 10px; width: 200px;" type="text" value="Search~ ♡" vinput="" /> <input id="searchButton" style="background: #fff; border: teal dashed 1px; color: teal; font-size: 9px; padding-top: 3px;" type="submit" value="Go" /></form>

Style 6

<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: teal solid 1px; color: teal; font-size: 10px; width: 200px;" type="text" value="Search~ ♡" vinput="" /> <input id="searchButton" style="background: #fff; border: Teal solid 1px; color: Teal; font-size: 9px; padding-top: 3px;" type="submit" value="Go" /></form>

*** teal tukar dengan warna yang anda suka
# ****** tukar dengan warna yang anda suka

code warna boleh dipilih di sini [ KLIK ]

2. Save! done.

Mudah kan? Semoga berjaya.

Labels:


FARANYM | HYOUKURONA 2017