Busca

Carregando...

terça-feira, 2 de junho de 2009

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.

image

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;}
image

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;}
image

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;}
image

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;}
image

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

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

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

Posts relacionados