27.10.12

Gadget de pesquisa personalizado *edit*



Oi! Como estão? Bem? Hoje vim trazer um tutorial de gadget de pesquisa personalizado por mim :) Fui tirando prints e fiz um gif que ficou horrível eu sei rs para que vocês tenham uma prévia dele. Quando você passa o mouse por cima ele desliza pro lado aparecendo outro botão em hover. E quando você clica pra pesquisar o botão vai pra dentro. Como eu sei que por print não fica uma coisa tão atraente rsrs, no meu blog em que testo tutoriais e tals, vou mostrar por lá para vocês verem melhor clique aqui para ter uma previa!!!

*edit*
Ele só foi testado com a sidebar do lado esquerdo!

Leia mais para ver o tutorial e se forem usar por favor avisem nos comentários e creditem o blog, por favor! 

Cole acima de ]]></b:skin> o código abaixo

div.search-form {
right: 0px;
top: -71px;
display: block;
width: 282px;
height: 45px;
background: url(http://i48.tinypic.com/20gb68x.png) top right no-repeat;
}
div.search-form .search-sliding {
div.search-form {
right: 0px;
top: -71px;
display: block;
width: 282px;
height: 45px;
background: url(http://i48.tinypic.com/20gb68x.png) top right no-repeat;
}
div.search-form .search-sliding {
position: relative;
top: 11px;
left: 35px;
border: none;
background: none;
width: 220px;
font-style: italic;
color: #999;
height: 27px;
}
div.search-form .search-label-sliding {
position:absolute;
top:34px;
left:-4000px;
}
div.search-form .search-button {
position: absolute;
left: 280px;
top: 10 px;
background: url(http://i48.tinypic.com/20gb68x.png) top left;
width: 55px;
height: 45px;
}
div.search-form .search-button:hover {
background-position:-55px 0;transition: all 0.4s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.3s ease;transition: all 0.4s ease;
}
div.search-form .search-button:active {
background-position:-55px 0; -webkit-transition: all .8s ease;-o-transition: all 0.4s ease;-moz-transition: all 0.5s ease;transition: all 0.6s ease;
-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8); -webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;
div.search-form .search-button a {
background-position:-55px 0;
margin:1px 0 0 1px;
}


Depois do código colado, abra um HTLM/javascript e cole o seguinte código para que ele apareça


<form action='/search' class='search' method='get'>
<div class='search-form'>
<label class='search-label-sliding' for='search-sliding' style='left: 15px; opacity: 0.4;'></label>
<input class='search-sliding' id='search-sliding' name='q' onblur='if (this.value == "") {this.value = "pesquisar";}' onfocus='if (this.value == "pesquisar") {this.value = ""}' title='Pesquisar post' type='text'x-webkit-speech="x-webkit-speech" value='Pesquisar'/>
<input class='search-button' src='http://1.bp.blogspot.com/_Zuzii37VUO4/TYq4Kue_QwI/AAAAAAAAFkQ/tQUrOpAJe6g/s000/transparent.gif' type='image'/>
</div>
</form>


Espero que gostem amores! Beijos e não esqueçam de comentar que posto mais tutoriais desse tipo!

5 comentários:

  1. ola, gostei muito do seu blog e estou usando este gadget, mas o GO, nao aparece...é bem visualizado no google chrome? theabsolute-danny.blogspot

    ResponderExcluir
    Respostas
    1. :s Sim é bem visualizado no google chrome. Bem.. testei novamente este tutorial em outro blog de teste e deu o mesmo erro que o seu, irei tentar achar onde é o problema e depois falo a você! Obrigada por me visitar! bjs

      Excluir
  2. Muito legal a caixa de pesquisa *u*
    Fica linda!
    Beijos
    candy-princess-official

    ResponderExcluir
  3. Este comentário foi removido pelo autor.

    ResponderExcluir