Caixa de busca blogger

Colocar uma caixa de busca no blogger pode ser um grande diferencial para quem busca melhorar a navegabilidade de um blog, pois faz com que cada vez mais nossos leitores possam encontrar outros conteúdos de seu interesse, permanecendo mais tempo em nossos blogs. Após ensinarmos aqui no blog como criar um blog, criar um domínio e criar um feed, hoje através deste artigo vamos ensinar como colocar a caixa de busca no blogger.

Caixa de busca blogger

Para adicionar a caixa de busca no blogger acesse sua conta e vá em Design – Elementos de Página  e clique em Adicionar um novo gadget na área onde desejar.

Caixa de busca blogger – Personalizar Cores

A criação da caixa de busca no blogger é muito simples, porém existem as opções de personalização. Uma delas, é a personalização da cor que é exibida na caixa, porém para isto você terá que possuir conhecimentos básicos de CSS. Então vamos a algumas sugestões:

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

Caixa de busca blogger – Personalizando baseado em ações

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

Caixa de busca blogger – Onde colocar os códigos?

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>

Tweet

Share

Adriano Luz Pós-graduado em Sistemas de Informação e Banco de dados, atualmente atua com consultoria em sistemas, SEO e marketing digital. Amante por blogs, é responsável pela administração do blog Publicidade na web.

Postado em: Gadgets,Recursos blogger