Barrinha De Pesquisa Personalizada

Foto: [favim.com]

Olá gente! Vim quebrar o clima de hoje com uma maratona de tutoriais, espero que gostem ;D Vou ensinar a colocar uma caixinha de busca pelo seu blog bem legalzinha, muito melhor do que a que o próprio Blogger oferece. 

TUTORIAL

Como vai ficar:  

Editar HTML

Procure por (Ctrl + F): ]]></b:skin>

Cole ACIMA desta tag, este código (modificável):

.search{
float: left; /*Posição; também pode mudar para Right (Direita) e Left (Esquerda)*/
font-family: Tahoma, Tahoma; /* Estilo da Fonte */
}
.searchbar{
height: 20px;
width: 140px;
color: #EE82EE; /* Cor da Fonte  */
background: #FFF; /* Cor de Fundo da Barrinha*/
}
.searchbut{
background: url('http://i11.photobucket.com/albums/a168/evelynregly/mini_gifs/mini_gifs173.gif'); /*URL da Imagem do Botão de Pesquisa*/
width:20px;
height:20px;
border: 0;
padding:-10px;
}

Salve. Agora adicione um gadget HTML/JavaScript e cole este código sem mudar absolutamente nada:


<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
Salve e visualize. Se estiver tudo certo, pois bem. Caso não, faça seus ajustes ou torne a remover os códigos. Espero que tenham gostado.