Caixa de pesquisa do Blogger personalizada

Hoje trouxe pra vocês um tutorial muito legal. Muita gente adora personalizar caixas de pesquisa, eu particularmente adoro, e hoje vou ensinar como personalizar a caixa de pesquisa do próprio Blogger. Eu aprendi esse tuto no Cherry Bomb mas personalizei do meu jeito. Veja a caixinha antes e depois da personalização:

1. Vá em Layout > Adicionar Gadget > Caixa de Pesquisa

2. Vá em Modelo e procure por ]]></b:skin> . ACIMA dessa tag cole o seguinte código:

/*Removendo o logo do Google*/
.gsc-branding-text, .gsc-branding-img-noclear {display:none;}
/* Personalização do Campo de texto */
td.gsc-input input {border: 1px solid #C3C3C3; background:#fff; color: #AB82FF; font-family: Century Gothic; font-size:12px; border-radius: 10px; box-shadow: 2px 1px 19px 2px #C3C3C3} /* Fim da personalização do Campo de texto */
/* Personalizando o Botão */
input.gsc-search-button {font-family:'Arial'; font-size:15px; color:#FFFAFA; background:#9370DB; border:0px; font-weight:normal;  border-radius: 20px; }
input.gsc-search-button:hover {background:#DDA0DD; color:#fff;} /* Fundo e cor do texto ao passar o mouse */
/*Fim da personalização do botão*/

Obs: Não retire o código em lilás porque sem ele o tutorial não dá certo.

3. Vamos entender os códigos:

border: borda do campo de texto/botão
background: cor de fundo
color: cor da fonte
font-family: tipo de fonte
font-size: tamanho da fonte
border-radius: borda arredondada
box-shadow: sombra da caixa

4. Agora personalize a caixa do seu jeito (use essa tabela de cores). Não reblogue esse tutorial! Caso contrário, dê os créditos.

Creditos: garota inocente