2017 altex.ro

Cautare cu efect!

buton cautare cu efect de marireAcest 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!

4 comentarios:

  1. Va salut din nou d-le Constantin! Am o intrebare care nu e legata de acest articol. Am o mica problema cu blogul meu www.dan-marin.blogspot.com in sensul ca exista ceva ( o pagina, un gadget, ceva ce nu stiu) care nu se incarca, cursorul ramanand cu clepsidra in asteptare. Se poate verifica ce anume nu se incarca? Multumesc!

    RăspundețiȘtergere
  2. Salut Cristian, pe blogul tau exista doua greseli: prima ai adaugat foarte multe imagini pe pagina principala si depasesc cu mul 110MB cat suporta blogger pentru incarcarea corecta a unui blog, a doua greseala este imaginea panoramica repetata de mai multe ori.

    RăspundețiȘtergere
  3. Multumesc pentru raspuns dar cred totusi ca alta e cauza. ,,În prezent folosiţi 98MB (9%) din 1024MB,,- acesta este procentul de ocupare a spatiului din blog.

    RăspundețiȘtergere
  4. Salut Dan deci inca o data iti explic, dupa cum apare la mine ai una dintre postarile cu imagini panoramice cu probleme sau intra in conflict su player-ul windows media ce ai instalat pe blog: apare ca, nefinalizat un transfer de date de la 82.79.98.41...

    PS. scoate player-ul si vezi daca se inchide pagina de blog

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc