Caixa de pesquisa personalizada

Hi Baby!

Hoje eu tenho aqui uma coisinha que além de ajudar as leitoras do seu blog, vai deixa-lo muito charmoso!

Quem é que gosta daquela caixinha sem graça do Google?! Acho que ninguém, né?! Mas caso você goste, e não é muito chegada naquele logo, eu tenho uma notícia pra você:

Tem um HTML que tira esse logo! Mas também tem o HTML que permite que você escolha qual botão você quer, e que permite também que você mesma faça o seu botão!

Peguei esses códigos lá no Hiper Girl

Caso você não saiba fazer o seu próprio buttom (botão), clique aqui

Lembrando que o buttom é só para o 2º modo.

1º Modo

Antes de tudo vá em layout e adicione no seu blog o gadget de pesquisa do 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:#ff0048; 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:#ff0048; border:0px; font-weight:normal;  -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }input.gsc-search-button:hover {background:#b779db; 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 roxo.

2º Modo

Nesse outro modo você pode colocar uma imagem fofa no lugar do botão.
Vá em layout e cole o código abaixo em um gadget de html/javascript:

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

 Você pode substituir o texto em roxo pela frase que quiser.
Agora vá em modelo > editar html e cole antes de ]]></b:skin> o código abaixo:

.search{float: left;font-family: Century Gothic !important; /* Fonte do campo de texto*/}.searchbar{height: 20px; /*Altura da caixa*/width: 190px; /*largura da caixa*/border-radius:15px;background:#fff;text-align:center;color:#ff048c !important; /*cor do texto*/font: 12px Century Gothic !important; /*fonte do texto*/}.searchbut{background: url('Url da imagem do botão');width:30px; /*Largura do botão*/height:30px; /*altura do botão*/border: 0;padding:7px;}