Como personalizar a caixa de pesquisa do Blogger

10 6 99

🔍 Como adicionar a caixa de pesquisa (gadget nativo)

Antes de personalizar, você precisa ter a caixa de pesquisa no seu layout.

No painel do Blogger, vá em Layout.
Clique em "Adicionar um gadget" na área onde deseja que a busca apareça (geralmente na barra lateral).
Na lista de gadgets, escolha "Caixa de pesquisa" (em alguns temas, pode aparecer como "Search Box").
Configure as opções de busca (por exemplo, pesquisar apenas postagens ou também páginas estáticas) e clique em Salvar.

💡 Dica de posicionamento: a barra lateral direita ou o topo do blog são locais tradicionais e eficientes para a pesquisa. Evite colocá-la no rodapé, pois isso pode dificultar o acesso.

🎨 Personalizando a caixa de pesquisa com CSS

Com o gadget já no lugar, vamos dar a ele uma aparência que combine com o seu template.

Passo a passo para estilizar

No painel do Blogger, acesse Tema → Editar HTML.
Antes de qualquer alteração, faça o backup do seu tema (Tema → Fazer backup / Restaurar).
Use Ctrl+F (ou Cmd+F no Mac) e procure pela tag:
text
```
]]></b:skin>
```
Imediatamente antes dessa tag, cole o código CSS abaixo.

Código CSS modernizado (substitua o antigo)

/* =============================================
   CAIXA DE PESQUISA PERSONALIZADA (BLOGGER)
   ============================================= */

/* Container principal da caixa de busca */
.gsc-search-box {
  width: 100%;
  margin: 0 auto;
}

/* Campo de entrada de texto */
td.gsc-input input {
  background: #ffffff !important;         /* Fundo do campo */
  border: 1px solid #d1d5db !important;   /* Cor e estilo da borda */
  border-radius: 30px 0 0 30px !important; /* Cantos arredondados à esquerda */
  color: #333333 !important;               /* Cor do texto digitado */
  font-family: 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px !important;
  height: 40px !important;
  padding: 0 15px !important;
  transition: all 0.2s ease-in-out;
  width: 100%;
}

/* Efeito ao passar o mouse sobre o campo de texto */
td.gsc-input input:hover {
  border-color: #9ca3af !important;
}

/* Efeito quando o campo está em foco (ativo) */
td.gsc-input input:focus {
  border-color: #3b82f6 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

/* Botão de pesquisa */
input.gsc-search-button {
  background: #f3f4f6 !important;         /* Fundo do botão */
  border: 1px solid #d1d5db !important;   /* Borda combinando com o campo */
  border-left: none !important;            /* Remove a borda esquerda para unir */
  border-radius: 0 30px 30px 0 !important; /* Cantos arredondados à direita */
  color: #1f2937 !important;
  cursor: pointer;
  font-family: 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500;
  height: 42px !important;
  padding: 0 18px !important;
  transition: all 0.2s ease-in-out;
}

/* Efeito ao passar o mouse sobre o botão */
input.gsc-search-button:hover {
  background: #e5e7eb !important;
  border-color: #9ca3af !important;
}

/* Remove o texto de branding do Google (opcional) */
.gsc-branding-text, 
.gsc-branding-img-noclear {
  display: none !important;
}

🎨 Tabela de personalização rápida

Elemento	Onde alterar no código	Exemplo de valor
Cor de fundo do campo	`background: #ffffff;`	`#fef9e6` (amarelo claro)
Cor da borda	`border: 1px solid #d1d5db;`	`#ff9900` (laranja)
Arredondamento da borda	`border-radius: 30px 0 0 30px;`	`20px 0 0 20px`
Altura do campo	`height: 40px;`	`48px`
Cor do texto	`color: #333333;`	`#1e3a8a` (azul escuro)
Fonte do texto	`font-family: 'Segoe UI', Roboto, sans-serif;`	`'Georgia', serif`
Cor de fundo do botão	`background: #f3f4f6;`	`#ffedd5`
Efeito hover (mouse)	`input.gsc-search-button:hover { background: #e5e7eb; }`	Altere a cor conforme desejar

Dica de cores: utilize o guia de cores da W3Schools para encontrar o tom perfeito para o seu blog.

🧹 Removendo o título da caixa de pesquisa

Se você não quer que o título "Pesquisar este blog" apareça acima da caixa, não basta deixar o campo "Título" em branco. É necessário remover o código que o gera.

No editor HTML do tema, marque a caixa "Expandir modelos de widgets".
Use Ctrl+F e procure por <b:widget id='Search1' (ou algo semelhante, como id='CustomSearch').
Clique nas setinhas para expandir o código do widget.
Localize 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>

Clique em Salvar tema. O título desaparecerá, mas a caixa de pesquisa continuará funcionando normalmente.

🚀 Alternativa poderosa: Google Programmable Search Engine

Se você deseja uma caixa de pesquisa ainda mais completa, com estatísticas, resultados personalizáveis e até anúncios (opcional), o Google Programmable Search Engine (antigo Google Custom Search) é a melhor escolha.

Vantagens dessa abordagem:

Busca mais precisa e com sugestões automáticas.
Design totalmente livre – você insere o código onde quiser.
Dashboard de controle para ver o que os visitantes estão procurando.
Geração de receita com anúncios nos resultados (opcional).

Passo a passo para criar e inserir

Acesse o Google Programmable Search Engine e faça login com sua conta Google.
Clique em "Criar um mecanismo de pesquisa personalizado".
Em "Sites a pesquisar", digite o endereço do seu blog: https://seudominio.blogspot.com.
Dê um nome ao seu mecanismo e clique em "Criar".
Na página de configuração, vá em "Personalizar" → "Obter código".
Copie o código JavaScript gerado.
No Blogger, adicione um novo gadget HTML/JavaScript e cole o código.
Salve o gadget e pronto! Agora você tem uma busca profissional e extremamente poderosa.

🔗 Documentação oficial: Google Programmable Search Engine para desenvolvedores

✅ Verificação final e boas práticas

Teste em dispositivos móveis: o código acima já é responsivo, mas verifique se os botões e campos estão com tamanho adequado.
Limpe o cache do navegador ou use uma janela anônima para ver as alterações.
Não remova as tags !important dos estilos, pois elas garantem que o CSS sobrescreva as regras padrão do tema.

A caixa de pesquisa é a porta de entrada para o conteúdo mais antigo e relevante do seu blog. Com poucas linhas de CSS, você transforma um elemento genérico em uma peça de destaque no seu design, melhorando a experiência do usuário e incentivando a navegação.

🔑 Palavras-chave (keywords)

caixa de pesquisa Blogger, personalizar busca, CSS Blogger, Google Programmable Search Engine, remover título pesquisa, custom search box, blog search bar, estilizar botão de busca, blogger custom css, otimização de pesquisa, gadget pesquisa personalizada, código HTML Blogger

📢 Hashtags

#CaixaDePesquisaBlogger #PersonalizarBusca #CSSBlogger #GoogleCustomSearch #WidgetBlogger #DicasBlogger #TutorialBlogger #OtimizaçãoDePesquisa #DesignResponsivo #ProgrammableSearchEngine