07/02/2013

Tutorial: Pesquisa personalizada com botão hover

||

Boa tarde meus loucos, hoje irei mostrar como personalizar a caixa de pesquisa com o botão hover, eu já tenho um tutu aqui no blog que mostra como personalizar a caixa e colocar um botão padrão. [Ver Postagem] Os créditos são do blog Best of Kawaii,  para fazer esse tutu você vai precisar de dois botões para fazer o efeito hover, agora sim vamos lá!?


Vá ate seu HTML e procure por ]]></b:skin>. E acima dele, cole:

.search{
float: left;
font-family: arial !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 120px; /*largura da caixa*/
text-align:center;
color:#000000; /* cor da fonte da caixa*/
background:#dcdcdc!important; /* cor de fundo da caixa */
box-shadow: inset 1px 1px 6px  #dcdcdc; /* sombra interna*/
font: 11px arial !important; /*fonte do texto*/
border: 2px solid  #000000; /* borda */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.searchbut{
background: url('URL DO BOTÃO');
width:27px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;
}
.searchbut:hover{
background: url('URL DO BOTÃO HOVER');
width:27px; /*Largura do botão*/
height:20px; /*altura do botão*/
border: 0;
padding:2px;
}

Arrume as partes que estão em negrito, não precisa explicar já que o código e auto explicativo, salve e agora siga ate seu layout e lá abra um gadget de HTML/Javascript, dentro dele cole:

<form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" /> <input class="searchbut" type="submit" value="" /> </form>
Se usarem não esqueçam de creditar.  Qualquer duvida e só perguntar.

6 comentários:

  1. Awn amei, drw posta o tutorial da sua área de comentários - completa - ?

    ResponderExcluir
  2. Amei o tuto *-* Tenho uma caixa de pesquisa personalizada tbm u-u heeey, coloqei seu blog no recomendo, você viu ? Almost 18 ~* *

    ResponderExcluir
    Respostas
    1. Fico contente que tenha gostado, não ainda não vi, irei ver agora *-*

      Obrigada~

      Excluir
  3. Adorei esse tutorial,tal vez eu personalize minha caixa de pesquisa num próximo layout.
    >>>barbieseumundopink.blogspot.com.br/

    ResponderExcluir