30/09/2012

Tutorial: Caixa de pesquisa personalizada

image  image
Mais um tutorial para ficar feliz! Hahahahahaahah! Créditos do tuto ao: (www) // Vamos aprender a fazer essa caixinha de pesquisa personalizada!
 Vamos, clica logo em Leia Mais :3
1° Adicione um gadget Html/JavaScript, colocando o seguinte código nele, sem fazer NENHUMA alteraçã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° Agora vamos para o HTML, clica em Ctrl + F e procure por:
]]></b:skin> 
3° Depois que achar,  cole o seguinte código ACIMA da tag.
.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: TahomaTahoma; /* 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;
}
4° Faça as alterações em destaque, mudando as cores!

F.I.M

Nenhum comentário:

Postar um comentário