Cautare cu efect!

Acest lucru de a folosi jQuery este foarte usor, desi pe mine nu ma convinge, stiu ca este noua moda, dar îmi place să contrazic şi să caute alternative la bibliotecile de scripting, care sunt confortabile, dar, stiti ca un stil de viata sedentar nu este bun asa ca este intotdeauna mai bine pentru a găsi alternative sau cel putin a incearca.

În acest caz folosesc Autogrow search, o modalitate de a crea o etichetă de intrare(IMPUT) tehnica folosita de motoarele de căutare pentru a introduce text şi are proprietatea de a extinde şi modifica alte detalii grafice atunci când este activată. Un exemplu vezi mai jos:

Pentru a folosi acest efect cu CSS pe blog este nevoie de doua conditii:

1. Adauga codul HTML intr-un nou gadget HTMLJavascript,intr-o postare noua sau unde doresti sa apara pe blog:

<div id="wrap-search">
<div id="search">
<form class="form-search" method="get" action="/search" target="_blank">
<input src="URL_IMAGINE" type="image"/>
<input type="text" name="q" value="buscar" onfocus="this.value='';" onblur="this.value='buscar';" onmouseover="this.value='';" onmouseout="this.value='cauta';" />
</form>
</div>
</div>

unde URL_IMAGINE il inlocuiesti cu url-ul unei imagini de maxim 40x40px a unei lupe.

2. Mergi la Desing -->Editati HTML si cauti linia de cod ]]></b:skin> exact inaintea ei adaugi codul urmator CSS:

<style>
#wrap-search {
margin: 0 auto;
width: 100px;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
#wrap-search br { display: none; }
#wrap-search #search {
background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5, #CACACA),color-stop(25.5, #D3D3D3));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA');
border-radius: 5px;
padding: 4px;
}
#wrap-search:hover { width:200px; }
.form-search {
background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC));
background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC');
border: 1px solid #747474;
border-radius: 3px;
box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;
height: 32px;
position: relative;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.form-search input[type='text'] {
background: none;
border: none;
color:#6E7074;
height: 34px;
line-height: 34px;
padding: 0 27px 0 6px;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
text-shadow: 0 1px 0 #FFF;
}
#wrap-search:hover input[type='text'] { color:#597C84; }
#wrap-search:hover .form-search {
background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF);
background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA');
box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
color: #25464D;
}
.form-search input[type='image'] {
height: 32px;
opacity: .5;
filter:alpha(opacity=50);
position: absolute;
right: 0px;
top: 0px;
width: 32px;
}
.form-search input[type='image']:hover {
opacity: 1;
filter:alpha(opacity=100);
}
</style>

Salvezi modificarea si deja ai instalat pe blog un buton de cautare cu efect. Succes!