20 de nov de 2012

Tutorial - Caixa de Pesquisa Personalizada


Hey Girls, hoje trouxe um tutorial simples, uma caixa de pesquisa personalizada.
Veja como ela fica:



1- Vá em Painel, Design, Elementos da página e adicione um gadget Html/JavaScript e cole o código a seguir sem fazer NENHUMA modificação:
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
2- Vá em Painel, Design,  Editar HTML, aperte CTRL+F, procure por e ]]></b:skin> cole ACIMA fazendo as alterações desejadas :

.search{
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;
}

Bem fácil ne? espero que tenham gostado, Beijinhos :)

2 comentários:

  1. Bom tutorial,vou usar logo logo,(tô fazendo um novo layout) rs... XD
    Kisses,ps seguindo^^
    cotidianodeumabarbie.blogspot.com.br
    @CB

    ResponderExcluir