Caixa de Busca Personalizada

Olá Pessoal, Hoje eu vou ensinar como personalizar a caixinha de busca do seu blog, siga o passo-a-passo:

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:

.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>

Salve e pronto. Agora, fiquem com algumas imagens:

Créditos: Pequena Garota