Caixa de pesquisa personalizada no blogger/ CSS

Todo blogueiro sabe que uma caixa de pesquisa é um dos Gadgets mais importantes em um blog, ter uma caixa de pesquisa é obrigatório pois sem ela os leitores não terão onde pesquisar os artigos do seu blog/site.

INSTALAÇÃO

Personalizando o gadget do próprio blogger

Antes de tudo vá em layout e adicione no seu blog o gadget de pesquisa do blogger.(como colocar caixa de pesquisa no blogger.)

Agora vá em modelo > editar HTML

Aperte ctrl+F e procure por ]]></b:skin> 

Cole isso acima do código que você procurou: 

/*Para remover o logo do google*/

.gsc-branding-text, .gsc-branding-img-noclear {display:none;}

/* Personalização do Campo de texto */

td.gsc-input input {border: 2px solid #e7e7e7; background:#fff; color:#004e98; font-family:verdana; font-size:11px; } /* Fim da personalização do Campo de texto */

/*personalização do botão*/

input.gsc-search-button {font-family:'trebuchet ms'; font-size:14px; color:#fff; background:#004e98; border:0px; font-weight:normal;  -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }

input.gsc-search-button:hover {background:#004e98; color:#fff;} /*fundo e cor do texto quando passa o mouse*/

/*fim da personalização do botão*/

Agora é só fazer as modificações de acordo com seu gosto. Se não quiser bordas arredondadas, apague o trecho em laranja.