Personalizando a Caixa de Pesquisa do Blog

Hey, angels :) What's up?

Hoje eu trouxe um tutorial bem legal para vocês. É sobre "caixas de pesquisa", que são super úteis no blog. Serve para a personalização daquelas que o blogger já disponibiliza e é bem fácil! Vamos lá?

Antes de tudo, você precisa ter uma caixa de pesquisa. Vá em Layout e adicione o seguinte Gadget (clique na imagem para ampliá-la):

Após fazer isso, vá em Design > Editar HTML. Usando Ctrl+F, busque por  ]]></b:skin>  . Quando encontrar, adicione o seguinte código acima da tag:

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

O código é bem auto-explicativo, mas eu deixei em negrito as principais partes que vocês devem alterar. Elas se referem à cores, portanto use a Tabela de Cores para deixar como desejar.

A parte em vermelho deve ser deletada caso não queira bordas arredondadas. 

Depois é só visualizar e, se estiver tudo correto, salvar.

Aprendi a fazer com o blog Cherry Bomb, então créditos dados.

Dúvidas ou Pedidos? É só comentar ou enviar uma mensagem aqui.

Bom, por hoje é só!

Espero que tenham entendido e gostado.

Beijos,

Mrs. Nightshade.