COMO PERSONALIZAR A CAIXA DE PESQUISA

Olá galerinha, hoje vou mostrar como mudar a barra de pesquisa padrão do blogger. Vamos começar?

Vá no editor de HTML do seu blog e procure por: 

]]></b:skin>

E cole antes do código procurado esse aqui:

.SEARCH{
FLOAT: LEFT;
FONT-FAMILY: ARIAL !IMPORTANT;}
.SEARCHBAR{
HEIGHT: 20PX; /*ALTURA DA CAIXA*/
WIDTH: 120PX; /*LARGURA DA CAIXA*/
TEXT-ALIGN:CENTER;
COLOR:#CORFONTE;
BACKGROUND: #BACKGROUND!IMPORTANT;
BOX-SHADOW: INSET 1PX 1PX 6PX  #DCDCDC;
FONT: 11PX ARIAL !IMPORTANT;
BORDER: 2PX SOLID  #000000;
-WEBKIT-BORDER-RADIUS: 10PX;
-MOZ-BORDER-RADIUS: 10PX;
BORDER-RADIUS: 10PX;
}
.SEARCHBUT{BACKGROUND: URL('URL DO BOTÃO');
WIDTH:27PX; /*LARGURA DO BOTÃO*/
HEIGHT:20PX; /*ALTURA DO BOTÃO*/
BORDER: 0;
PADDING:2PX;
}
.SEARCHBUT:HOVER{
BACKGROUND: URL('URL DO BOTÃO HOVER');
WIDTH:27PX; /*LARGURA DO BOTÃO*/
HEIGHT:20PX; /*ALTURA DO BOTÃO*/
BORDER: 0;
PADDING:2PX;

As partes que estão em VERMELHO são as que você pode personalizar. Url do botão e url do botão hover é onde você coloca o link da imagem dos botões de pesquisa.

Agora, adicione um gadget de HTML/Javascript no layout do seu blog, e cole esse código:

<FORM ACTION="/SEARCH" CLASS="SEARCH" METHOD="GET">
<INPUT CLASS="SEARCHBAR" ID="S" NAME="Q" PLACEHOLDER='DIGITE O QUE PROCURA' TYPE="TEXT"  VALUE="" />
<INPUT CLASS="SEARCHBUT" TYPE="SUBMIT" VALUE="" /
</FORM>

E só...