Tutorial 3# Barra De Pesquisa Personalizada

Oi gente, vou ensinar a colocar essa barra de pesquisa que estou usando no meu blog.
Vamos lá! =D


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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpMEuHD5DDVd-zCd0MIio8QT_g5fpLwg5cGNfgrygdH2734Qq0g0J7xhkJpTUKPHRagpzsP5kGwY1E6eBYsd0b8zAIi2M3KvaT-SeDkbvuK5VuHxu6TCdDBECBKH5Q7eMjGgdVLrFDQrs/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>

Onde esta vermelho você pode escrever o que quiser, em azul eu acho melhor apagar...assim não fica nenhuma letrinha em cima do ícone. =]

Espero ter ajudado. =3

Beijos! *u*

Credito:  Uprising teen