Caixa de busca personalizada

Oii Moraguinhos tudo Bem?Espero que Sim.

Bom Dia!

Hoje eu to aqui para ensinar como fazer uma caixa de busca personalizada no Blog!

no meu blog não tem essa caixa de busca,pq eu nao acho necessario,mais tem outras pessoas que tem blog e tem coragem de coloca no blog,então Vamos lá.

1 Etapa

Vá no editor de HTML do seu blog, clique nos três pontinhos do seguinte código:

Agora, aperfe Ctrl+F e pesquise por ]]></b:skin>. Acima disso cole:

Codigo:

.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 em negrito 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, respectivamente.
Agora, vá no layout do seu blog, adicione um novo gadget de HTML/JS 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>