01/11/2012

Como fazer uma caixinha de pesquisa com efeito



Oooooooooooooooi pessoal vocês devem estar bem né. Bem hoje eu irei ensinar como colocar a caixa de pesquisa que tem aquele efeito que se espande. Então vamos ao tuto.
cliquem em leia mais

-Primeiro vocês devem ir para modelo-editar html- apertem f3 e procurem por ]]></b:skin>
-Quando acharem cole o código abaixo,
ACIMA
do código que vocês procuraram

#cute-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;
  }
  #cute-search br { display: none; }
  #cute-search #search {
    background: -moz-linear-gradient(center bottom , #fc86c5 0%, #fa87ce 50%, #ffe6ff 50%, #fcc2c2 2550%);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fc86c5),color-stop(0.5, #fa87ce),color-stop(0.5,  #ffe6ff ),color-stop(25.5, #fcc2c2));
     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fc86c5', EndColorStr='#ffe6ff ');
    border-radius: 5px;
    padding: 4px;
  }
  #cute-search:hover { width:200px; }
  .form-search {
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#f799c7), to(#ffd6ff));
    background: -moz-linear-gradient(-90deg, #ffd6ff, #f799c7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f799c7', EndColorStr='#ffd6ff');
    border: 1px solid #fcc;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px #fee, 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:#f73b83;
    height: 34px;
    line-height: 34px;
    padding: 0 27px 0 6px;
    font-family: verdana;
    font-size: 13px;
    text-shadow: 0 1px 0 #FFF;
  }
  #cute-search:hover input[type='text'] { color:#f73b83; }
  #cute-search:hover .form-search {
    background: -moz-linear-gradient(-90deg, #fc86c5, #ffe6ff);
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#ffe6ff), to(#fc86c5));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffe6ff', EndColorStr='#fc86c5');
    box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
    color: #f73b83;
  }
  .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);
  }


Esse código é para personalizar a caixinha caso queiram é só irem mudando os códigos de cores os que são assim #fffff.
Depois é só visualizarem e se estiver tudo certo com o seu blog
(Mas a caixinha ainda não aparece)
então é só salvar.
Agora essa é a parte que você colocar a caixa de pesquisa. É só ir em layout- adicionar um gadget HTML/javascript e colocar esse código abaixo

<div id="cute-search">
<div id="search">
  <form class="form-search" method="get" action="/search" target="_blank">
    <input src="http://1.bp.blogspot.com/--VAxuc8N-VI/UILUWRujWoI/AAAAAAAAGX0/mgVx7qSWsw0/s1600/busca.png" type="image"/>
    <input type="text" name="q" value="search" onfocus="this.value='';" onblur="this.value='search';" onmouseover="this.value='';" onmouseout="this.value='search';" />
    </form>
  </div>
</div>


Depois é só salvar e pronto. bjs e até a próxima.
créditos-reino kawaii

5 comentários:

  1. legal fica com um efeito super lindo^^
    kissus,
    cris-chan
    do: animemaniateen

    ResponderExcluir
  2. muito legal a dica, to pensando em fazer uma não me parece tão dificil , seu blog é a cara da fofura *-* haha amei *-* segue o nosso blog ? somos novos na blogosfera ! www.seventeen-o-blog(.blogspot.com)
    seguindo, valeu bjs.

    ResponderExcluir
  3. claro que eu aceito afiliação *-*
    é só colocar agente aqui e avisar lá no blog.
    www.seventeen-o-blog(.blogspot.com)

    ResponderExcluir
  4. Aaai que tudo essa caixinha de pesquisa! Amei, pena que não funcionou no meu blog :/ Ameeeeeeeeeeeeeei o blog! muito fofooo!

    Beijos ;*
    to-rosachiclete.blogspot.com

    ResponderExcluir

Vai comentar, que bom mais tem algumas regrinhas
-Tem que falar pelo menos um pouco sobre o post
-Os comentários são todos moderados para que eu possa retribuir todos.
-Não esqueçam de deixar o link do blog de vocês para que eu possa retribuir.
-não se esqueçam de seguir.
-PODEM COMENTAR com o link do blogs de vocês sem medo pois eu ativei o captha a confirmação de palavras entã vocês podem comentar sem medo de ter os blogs de vocês excuidos, eu sei que é chato mais é necessário, sugiro que façam isso no blogs de vocês também.
bjs