Tutorial :: Caixa de Pesquisa Personalizada

Oiie! Hoje vou ensinar a colocar uma Caixa de Pesquisa Personalizada no seu Blogger.
Vocês já devem saber para que serve uma caixa de pesquisa né? Mas é claro, então se quiser saber como colocar uma Caixa de Pesquisa no seu Blogger é só clicar em Continue lendo...

Então vamos lá..

1° Vá no seu blog e depois clique em Modelo » Editar HTML.

2° Clique em qualquer lugar do blog e depois de Ctrl + F.

3° Vai aparecer uma caixa de pesquisa no canto e lá cole: ]]></b:skin>

4° Encima do ]]></b:skin> cole isso e edite do jeito que preferir:

.SEARCH{
FLOAT: LEFT;
FONT-FAMILY: ARIAL;
}
.SEARCHBAR{
HEIGHT: 20PX; /*ALTURA DA CAIXA*/
WIDTH: 190PX; /*LARGURA DA CAIXA*/
TEXT-ALIGN:CENTER;
COLOR:#000; /*COR DA FONTE*/
BACKGROUND: #fff; /*COR DA CAIXA DE PESQUISA*/
BOX-SHADOW: INSET 1PX 1PX 6PX  #000; /*COR DA SOMBRA DA CAIXA*/
FONT: 11PX ARIAL ; /*TAMANHO E FONTE*/
BORDER: 2PX SOLID  #000; /*COR DA BORDA*/
-WEBKIT-BORDER-RADIUS: 10PX;
-MOZ-BORDER-RADIUS: 10PX;
BORDER-RADIUS: 10PX;
}
.SEARCHBUT{
BACKGROUND: #fff; /*COR DO BOTÃO*/
WIDTH:28PX; /*LARGURA DO BOTÃO*/
HEIGHT:20PX; /*ALTURA DO BOTÃO*/
BORDER: 0; /*BORDA DO BOTÃO*/
PADDING:2PX;
}
.SEARCHBUT:HOVER{
BACKGROUND: #d0d0d0; /*COR DO BOTÃO*/
WIDTH:28PX; /*LARGURA DO BOTÃO*/
HEIGHT:20PX; /*ALTURA DO BOTÃO*/
BORDER: 0; /*BORDA DO BOTÃO*/
PADDING:2PX;
}

5° Clique em Salvar Modelo e esta pronto a sua Caixa de Pesquisa Personalizada.

6° E por fim, vá em Layout » Adicionar um Gadget » HTML/JavaScript e cole isso:

<FORM ACTION="/SEARCH" CLASS="SEARCH" METHOD="GET"> <INPUT CLASS="SEARCHBAR" ID="S" NAME="Q" PLACEHOLDER='DIGITE-AQUI-OQUE-QUER-ESCRITO-NA-CAIXA' TYPE="TEXT" VALUE="" /> <INPUT CLASS="SEARCHBUT" TYPE="SUBMIT" VALUE="DIGITE-AQUI-OQUE-QUER-ESCRITO-NO-BOTÃO" />
</FORM>

7° Edite como quiser e pronto! Espero que tenham gostado e até o próximo tutorial! Bjs.