Customizar a caixa de pesquisa nativa do Blogger

Você acha a caixa de pesquisa do Blogger sem gracinha ? Eu também, por isso resolvi colocar uma corzinha, dar um arzinho de graça a esse widget tão importante em nosso blog.

Para isso, vá até o modelo do blog


Vá até o Modelo de seu blog, clique em Editar modelo e clique em editar HTML.

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>  

 

Acima deste código cole o código abaixo.

/*CustomSearch-----------------------------------------------------*/
#input.gsc-input{margin: 10px 10px; background: #eee; }
.gsc-branding-text, .gsc-branding-img-noclear {display:none;}
input.gsc-search-button {
 -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
font-family:'trebuchet ms';
font-size:18px; padding: 6px 6px;
color:#fff;
background:$(link.color);
border:0px;
font-weight:bold;
}
input.gsc-search-button:hover {
background: $(link.hover.color);
color:#fff;
}
input .gsc-input{ background: #cc0000;
}

div#CustomSearch1.widget.CustomSearch{background: $(link.color); padding: 4px 4px; margin: -20px 0 0 0;}
div#CustomSearch1_form{background: #eee; padding: 8px 8px;-moz-border-radius:2px 2px 2px 2px;-webkit-border-radius: 2px 2px 2px 2px;border-radius:5px 5px 5px 5px;}

Salve.

Se não deu certo, tente este abaixo:

/*CustomSearch-----------------------------------------------------*/
#input.gsc-input{margin: 10px 10px; background: #eee; }
.gsc-branding-text, .gsc-branding-img-noclear {display:none;}
input.gsc-search-button {
 -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
font-family:'trebuchet ms';
font-size:18px; padding: 6px 6px;
color:#fff;
background:#808080;
border:0px;
font-weight:bold;
}
div#CustomSearch1.widget.CustomSearch{background: #cc0000; padding: 4px 4px; margin: -20px 0 0 0;}
div#CustomSearch1_form{background: #000; padding: 8px 8px;-moz-border-radius:2px 2px 2px 2px;-webkit-border-radius: 2px 2px 2px 2px;border-radius:5px 5px 5px 5px;}