Barra De Pesquisa Personalizada

beautifu, colour, cute, lights

Hoy gente *-* Estou aqui para ensinar a vocês, como fazer essa barrinha de pesquisa que eu estou utilizando aqui no blog. Vamos aprender? É facilzinha e fica muito lindinha não é mesmo? Vamos lá então!

Design > Editar HTML

Acima de /* Header, cole:

/* Search
----------------------------------------------- */
.search{
float: left;
font-family: Verdana !important;  /*FONTE*/
}
.searchbar{
border: 2px dashed #ccc; /*BORDA DA BARRA DE PESQUISA*/
background:#fff;  /*COR DE FUNDO*/
color:#ff0066;  /*COR DA FONTE*/
font-family: verdana;  /*ESTILO DA FONTE*/
font-size:14px;  /*TAMANHO DA FONTE*/
}
.searchbut{
background: url(https://lh5.googleusercontent.com/-qQEolnp7HJA/UD1X0o9xUKI/AAAAAAAADAE/uYW2qchdNns/s32/buttom_pesquisa_uprising_teen.png) no-repeat;  /*URL DA IMAGEM*/
width: 30px; /*LARGURA DA IMAGEM*/
height: 32px; /*ALTURA DA IMAGEM*/
border:0px;
font-weight:normal;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
transition-duration: 3s;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
}
.searchbut:hover {
width: 40px; /*TAMANHO DA IMAGEM*/
height: 42px; /*ALTURA DA IMAGEM*/
transform: rotate(-360deg) scale(1) skew(0deg);
-moz-transform: rotate(-360deg) scale(1) skew(0deg);
-webkit-transform: rotate(-360deg) scale(1) skew(0deg);
-o-transform: rotate(-360deg) scale(1) skew(0deg);
}

Salve. Agora vá para Elementos da Página e Adicione um Gadget HTML/JavaScript.

Nele, você cola:


<div id='busca'><form action="/search" class="search" method="get">
Pesquisar: <input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="Buscar" />
</form></div>


Em roxo, você coloca o texto que quiser que apareça ao lado da caixa. Se não quiser, é só apagar. Espero ter ajudado galerinha ;D