Seguidores

Pesquisar este blog

segunda-feira, 9 de abril de 2012

0

Caixa de pesquisa personalizada

Sua caixa de pesquisa ficará como a da imagem abaixo,
  vamos ao tutorial!
 

1º Passo: Vá em Painel
DesignElementos da página
 adicione um gadget Html/JavaScript.


 2º Passo: Cole o código abaixo:
 

 <form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
 
3º Passo:  Vá em PainelDesignEditar HTML, 
aperte Ctrl+f e procure por e ]]></b:skin> 


4º Passo: Cole o código abaixo acima de ]]></b:skin>,
 fazendo as alterações desejadas.
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Tahoma, Tahoma; /* Fonte */
}
.searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte  */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}
http://www.simoneautoajuda.com/gifs_site/mini_gifs/111.gif
Bem fácil né? Espero que vocês tenham gostado.
 Qualquer duvida é só falar.

Nenhum comentário:

LinkWithin

Related Posts Plugin for WordPress, Blogger...