Cadernizando: Como adicionar um botão com caixa de pesquisa no blog?

CONSIDERAÇÕES INICIAIS

Nesse tutorial, confira como adicionar um botão para exibir e ocultar uma caixa de pesquisa flutuante no topo da tela do blog.

Esse tutorial é indicado para os blogs que utilizam o tema Awesome Inc. ou Espetacular Ltda na plataforma do Blogger. Para baixar um modelo no tema Awesome, clique aqui.

Antes de realizar qualquer um dos procedimentos a seguir, primeiramente faça um backup do seu blog. Se ocorrer algum problema durante o procedimento, o blog poderá ser restaurado com o arquivo do backup realizado. Se tiver alguma dúvida sobre o backup, clique aqui.

COMO ADICIONAR UMA CAIXA DE PESQUISA FLUTUANTE?

Confira como adicionar um botão com a função de exibir e ocultar uma caixa de pesquisa flutuante no topo do seu blog em 15 passos:

1º Passo: acesse a página inicial do Blogger.

2º Passo: selecione o nome do seu blog.

3º Passo: clique em Tema.

4º Passo: clique na seta ao lado do botão Personalizar e escolha a opção Editar HTML.

5º Passo: clique em qualquer local dentro do HTML do blog.

6º Passo: no teclado, pressione as teclas CRTL e F para abrir a caixa de pesquisa do HTML.

7º Passo: pesquise pelo trecho: </body>

</body>

8º Passo: clique antes desse trecho e pressione a tecla Enter para inserir uma linha em branco acima dele.

9º Passo: copie o código abaixo e cole acima do trecho pesquisado.

<div style='float:right;'>
<div style='-moz-border-radius: 5px; -webkit-border-radius: 10px; background: linear-gradient(300deg, #f2f2f2, #f2f2f2, #ffffff); border-radius: 10px; border: 1px solid #cbced1; color: black; padding: 10px; display:scroll; position:fixed; top:5px; right:5px; box-shadow: 0px 0px 3px #ffffff; '>
<div class='divspoiler' title='Exibir ou ocultar o campo de pesquisa'>
<a href='javascript:void(0);' onclick='if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}'>Pesquisar</a>
</div><div><div class='spoiler' style='display: none;'>
<form action='/search' class='gsc-search-box' method='get'>
<b:attr cond='not data:view.isPreview' name='target' value='_top'/>
<table cellpadding='0' cellspacing='0' class='gsc-search-box'>
<tbody>
<tr>
<td>
<input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' name='q' size='10' title='Pesquisar' type='text'/>
</td>
<td class='gsc-search-button'>
<input class='gsc-search-button' expr:value='data:messages.search' title='Pesquisar' type='submit'/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div></div>

O HTML do seu blog era assim:

</script>

</body>

Depois que colar o código, vai ficar assim:

</script>

<div style='float:right;'>

<div class='divspoiler' title='Exibir ou ocultar o campo de pesquisa'>

<a href='javascript:void(0);' onclick='if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}'>Pesquisar</a>

</div><div><div class='spoiler' style='display: none;'>

<form action='/search' class='gsc-search-box' method='get'>

<b:attr cond='not data:view.isPreview' name='target' value='_top'/>

<table cellpadding='0' cellspacing='0' class='gsc-search-box'>

<tbody>

<tr>

<td>

<input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' name='q' size='10' title='Pesquisar' type='text'/>

</td>

<td class='gsc-search-button'>

<input class='gsc-search-button' expr:value='data:messages.search' title='Pesquisar' type='submit'/>

</td>

</tr>

</tbody>

</table>

</form>

</div>

</div></div>

</body>

10º Passo: clique novamente na caixa de pesquisa do HTML.

11º Passo: pesquise pelo trecho: /* Content

/* Content

12º Passo: clique antes desse trecho e pressione a tecla Enter para inserir uma linha em branco acima dele.

13º Passo: copie o código CSS abaixo e cole acima do trecho pesquisado.


/* Busca
----------------------------------------------- */

.gsc-search-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0px;
    background:transparent;
    background-color:transparent;
}

.gsc-input {
    font-style: times !important;
    font-style: italic !important;
    color: black !important;
    background-color: #ffffff;
    border: 1px solid #cbced1 !important;
    border-radius: 4px;
    width: 110px !important;
    height: 30px;
}

.gsc-input:hover {
    border: 1px solid #9d9fa2 !important;
    box-shadow: 0px 0px 7px #acacad;
}

input.gsc-search-button {
    font-style: arial;
    margin-top: 10px;
    background: linear-gradient(345deg, #c9c9cb, #dadadd) !important;
    color: black;
    border: none;
    cursor: pointer;
    border: 1px solid #cbced1 !important;
    border-radius: 4px;
    width: 120px;
    height: 30px;
}

input.gsc-search-button:hover {
    border: 1px solid #717eab !important;
    box-shadow: 0px 0px 7px #9d9fa2;
    background: linear-gradient(345deg, #97b0b9, #e1e5e7) !important;
    text-shadow: 0px 0px 5px #fff;
}

14º Passo: clique em visualizar para conferir o resultado.

15º Passo: se o resultado for satisfatório, clique em Salvar para finalizar.

Observação: para a personalização da caixa de pesquisa do menu flutuante ficar diferente da caixa de pesquisa nativa do blog, altere os trechos gsc-search-box, gsc-input, como por exemplo, gsc-search-box2, gsc-input2, na qual, o mesmo trecho digitado no código da caixa de texto deve está igual ao digitado no código CSS.

É possível substituir a posição fixed por absolute ou relative.

Fixed: o botão fica fixo na tela.

Absolute: o botão fica sobreposto em um local do blog.

Relative: o botão fica depois dos elementos naturais do blog.

É possível substituir o trecho bottom por top.

Bottom: o botão fica alinhado na parte inferior da tela.

Top: o botão fica alinhado na parte superior da tela.

É possível substituir o trecho right por left.

Right: o botão fica alinhado no lado direito da tela.

Left: o botão fica alinhado no lado esquerdo da tela.

CONSIDERAÇÕES FINAIS

Portanto, esse tutorial visou compartilhar um pouco de nossos conhecimentos acerca do uso de um botão de exibir e ocultar uma caixa de pesquisa flutuante no topo do blog.

Por: Santos. Elaborado em: 24/02/2026. Publicado em: 24/02/2026. Atualizado em: 24/02/2026.

Obrigado pela sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou entre em contato conosco.

Pesquisar

Como adicionar um botão com caixa de pesquisa no blog?

Nenhum comentário:

Postar um comentário