domingo, 30 de junho de 2013

Como personalizar a caixa de pesquisa do Blogger

A caixa de pesquisa ( ou caixa de busca) é um dos recursos mais importantes em um blog. É através dela que o leitor irá procurar por outros posts mais antigos e de maior interesse dele. É muito útil também para o dono do blog encontrar seus próprios artigos.



Como colocar a caixa de busca do Blogger

O Blogger já disponibiliza um gadget nativo e bastante funcional. Para adicionar em seu blog, siga estes passos:
  1. Entre em layout
  2. Clique em adicionar um gadget
  3. Escolha "caixa de pesquisa" e clique no ícone "+"
  4. Marque as opções que você desejar e salve
Por padrão, o título deste gadget será "pesquisar este blog". Para mudar o título, é só clicar na caixa "título" e escrever um do seu gosto.
 Como personalizar a caixa de busca do Blogger

A Caixa de busca nativa do Blogger possui o seguinte modelo:

Para personalizar a caixa de pesquisa e deixá-la com um visual que combine melhor com o template do blog, será preciso incluir um código no HTML do template.

Entre em "modelo" e clique em "editar HTML". Clique em qualquer lugar dentro do HTML, dê um Crtl+F com o teclado e na caixa "search" escreva (ou cole)  </b:skin>. Clique em "enter" para encontrar esta tag dentro do HTML do seu template.

Agora copie o código abaixo e cole ANTES da tag </b:skin>:

/* BUSCA
----------------------------------------------- */

td.gsc-input input {
background: #fff; /*Cor de fundo do campo de texto*/
border: 1px solid #ddd; /*Estilo e cor da borda do campo de texto*/
color: #666; /*Cor do texto do campo de texto*/
font-size: 11px; /*Tamanho do texto do campo de texto*/
height: 15px;
padding: 4px;
}

td.gsc-input input:hover {
border: 1px solid #999; /*Estilo e cor da borda quando o mouse estiver em cima do campo de texto*/
}
input.gsc-search-button {
padding:4px;
background: #eee; /*Cor de fundo do botão*/
border: solid 1px #ddd; /*Estilo e cor da borda do botão*/
font-size: 12px; /*Tamanho do texto do botão*/
text-shadow: #fff 1px 1px 0px;
}

input.gsc-search-button: hover {
border:1px solid #999; /*Estilo e cor da borda quando o mouse estiver em cima do botão de pesquisa*/
background:#ddd; /*Cor de fundo quando o mouse estiver em cima do botão de pesquisa*/
color:#000; /*Cor do texto quando o mouse estiver em cima do botão de pesquisa*/
}
As partes assinaladas em vermelho é onde aplicamos os estilos em CSS. Para mudar as cores, veja esta tabela de correspondência em CSS 

Clique em "visualizar modelo" e se tudo estiver certo, clique em "salvar modelo". Este será o resultado final:

Como retirar o título da caixa de pesquisa

Para não mostrar nenhum título, não basta deixar a caixa "título" em branco. É preciso fazer uma outra alteração no HTML. Clique em "ir para um widget" e procure por "custom search".

Clique em duas setinhas para expandir o código e apague o seguinte trecho:
<!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>
Visualize e salve. Pronto! Sua caixa de pesquisa já está personalizada!

Fonte do código CSS original: Templates e Acessórios

Sobre o autor: Juliana é a fundadora deste blog. Nascida em 1970, é médica e, nas horas vagas, blogueira. Também é top colaboradora do fórum de ajuda do Blogger. Twitter l Google Plus l Facebook l

9 comentários:

  1. Foi muito bom. Bem que tava memo precisando de dicas como essa.

    ResponderExcluir
  2. Estou alegre por encontrar blogs como o seu, ao ler algumas coisas,
    reparei que tem aqui um bom blog, feito com carinho,
    Posso dizer que gostei do que li e desde já quero dar-lhe os parabéns,
    decerto que virei aqui mais vezes.
    Sou António Batalha.
    Que lhe deseja muitas felicidade e saúde em toda a sua casa.
    PS.Se desejar visite O Peregrino E Servo, e se o desejar
    siga, mas só se gostar, eu vou retribuir seguindo também o seu.

    ResponderExcluir
  3. Olá! Por primeiro gostaria de parabenizar pelo blog, é muito bom e me ajuda muito. Então eu tenho um blog de moda, e quero colocar um gadget (acho que é pelo gadget, mas enfim…) de look do dia igual desse site da Revista Estilo (não dá pra por links...)
    Não sei se tem como no blogger, mas se for possível gostaria de ajuda, já tentei várias vezes e não estou conseguindo.
    Obrigada desde já!

    ResponderExcluir
  4. A minha caixa de pesquisa ficou excelente!

    Óptima dica, abraço!

    ResponderExcluir
  5. Estou adorando o site, obrigada! Só não consegui cadastrar meu e-mail para receber os feeds.

    ResponderExcluir
  6. Desculpe a ignorancia, sou nova no assunto "feed". Já consegui cadastrar meu e-mail no seu feed.

    ResponderExcluir
  7. Excelente artigo! Infelizmente não ficou muito clara a parte da substituição da parte em vermelho pelo CSS. Uma imagem mostrando como fica o código ajudaria muito! Obrigado.

    *No meu blog a caixa de buscas é acima do cabeçalho, infelizmente não deu certo :( Talvez seja devido ao CSS...

    ResponderExcluir
  8. Muito bom o tutorial. Ja estou usando. Obrigada

    ResponderExcluir

Os comentários passam por um sistema de moderação, ou seja, eles são lidos por nós antes de serem publicados. Não serão aprovados os comentários:
- não relacionados ao tema do post;
- com pedidos de parceria;
- com propagandas (spam);
- com link para divulgar seu blog;
- com palavrões ou ofensas a pessoas e marcas;
ATENÇÃO: comentários com links não serão aprovados