ice\FIRE
Unsupportive
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:

share post via:

welcome | ningen ka?
Hello, thank you for steping by, this means a lot to me! Feel free to click ' + ' button on the left side to navigate and ' X ' button to close.

Hate me ?? Just click here

contact me

HOVER BELLOW

Keep in touch

Like the blog Now!



Otaku stuff

Anime Manga novel
click the tab to navigate the lists
(Last updated: February 9, 2017 )


Hyoukurona@MyAnimeList


blog archive


Tutorial : Background pada post title Experience of PT3 examination ; Reports | Oral tes... It's the time! Bye, **hiatus 2014 Tutoirial: Navigation tab #2 WHATT!??!! Tutorial : Create a new page I'll miss them, And you reader[s]~ what? just do anything that I do. Nothing special. Tutorial : backlink Tutorial : Gadget terapung di bahagian header

categories

Anime Experience Otaku Oreshi
Tomodachi Shashin sensei kara I Sensei kara II


FARANYM | HYOUKURONA 2017