Personalize a caixa de busca do Blogger

Nível: intermediário

Para adicionar a caixa de busca vá até Layout » Elementos da página » Adicionar um gadget » Caixa de pesquisa. Configure-a conforme desejado.

Para personalizar as cores, basta aplicar seu conhecimento de CSS às principais classes do widget. Vou dar alguns exemplos que eu testei, mas você deverá personalizar as cores para combinar com seu site.

Para não exibir o logo do Google:

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

Personalizando fonte e cor do campo de texto:

td.gsc-input input {border:1px dashed #ff9900; color:#ff0099; font-family:verdana; font-size:11px; background:#fffff0;}

---

Mudança de cor e fonte quando o mouse estiver sobre o campo:

td.gsc-input input:hover {font-family:courier new; border:1px solid #ff0099; background:fff;}

---

Mudança de cor e fonte quando o mouse clicar dentro do campo:

td.gsc-input input:active {color:#000; background:#fc0; border:#000 1px solid;}

---

Cor e fonte do botão:

input.gsc-search-button {font-family:'trebuchet ms'; font-size:14px; color:#fff; background:#0099ff; border:0px; font-weight:bold;}

---

Mudança de cor e fonte quando o mouse estiver sobre o botão:

input.gsc-search-button:hover {background:#ff66cc; color:#000;}

---

Mudança de cor e fonte quando o mouse clicar no botão:

input.gsc-search-button:active {background:#6b8e23; color:#fff;}

---

Todos os exemplos devem ser colocados acima do código ]]></b:skin> do HTML de seu blog:

.gsc-branding-text, .gsc-branding-img-noclear {display:none;} td.gsc-input input {border:1px dashed #ff9900; color:#ff0099; font-family:verdana; font-size:11px; background:#fffff0;} td.gsc-input input:hover {font-family:courier new; border:1px solid #ff0099; background:fff;} td.gsc-input input:active {color:#000; background:#fc0; border:#000 1px solid;} input.gsc-search-button {font-family:'trebuchet ms'; font-size:14px; color:#fff; background:#0099ff; border:0px; font-weight:bold;} input.gsc-search-button:hover {background:#ff66cc; color:#000;} input.gsc-search-button:active {background:#6b8e23; color:#fff;} ]]></b:skin>

Inspirado no post do Chica Blogger