Personalizando caixa de pesquisa

Olá !

Hoje vou ensinar vocês como personalizar a caixa de pesquisa do seu blog, 

assim como a imagem abaixo. Essa ferramenta é fundamental e indispensável para os leitores do blog, pois ajuda muito o leitor, além de facilitar a navegação . 

Vamos lá ao tutorial:

Vá no painel do seu blog, LAYOUT, ADICIONAR UM GADGET 

e adicione a caixa de pesquisa do blog.

Feito isso, Vá em MODELO, EDITAR HTML (CTRL + F ) e procure por :

]]></b:skin>

Acima cole o seguinte código :

/* Pesquisa www.mundodeblogueira.blogspot.com */ td.gsc-input input { /*AREA DE PESQUISA */ height:10px; /* ALTURA DA CAIXA */ padding:3px; /* ESPAÇO ENTRE TEXTO E MARGEM */ border:1px solid #333333; /* BORDA DA CAIXA */ background:#FFBBFF; /* COR DE FUNDO DA CAIXA */ color:#FF34B3; /* COR DO TEXTO */ font-family:Arial; /* FONTE */ font-size:10px; /* TAMANHO DA FONTE */ text-align:left; /* ALINHAMENTO DO TEXTO*/ } input.gsc-search-button { /*BOTÃO PESQUISAR*/ height:13px; /* ALTURA */ padding:3px; /* ESPAÇO ENTRE TEXTO E MARGENS*/ border:0; /* BORDA */ background:#333333; /* COR DE FUNDO DO BOTÃO */ color:#EE00EE; /* COR DO TEXTO */ font-size:9px; /* TAMANHO DA FONTE */ font-family:Trebuchet MS; /* FONTE */ text-transform:uppercase; /* TRASNFORMAÇÃO DO TEXTO */ text-align:center; /*ALINHAMENTO DO TEXTO*/ } input.gsc-search-button:active { /*BOTÃO PESQUISAR*/ background:#000000; /* COR DE FUNDO DO BOTÃO AO CLICAR */ color:#E066FF; /* COR DO TEXTO */ }

Altere de acordo com as cores do seu layout.