22 de janeiro de 2017

Caixa de pesquisa expansível para Blogger

Como todos nós sabemos, a caixa de pesquisa permite que nossos leitores tenham acesso a todas as nossas postagens em nosso blog. Uma caixa de pesquisa deve ser instalada no menu de navegação ou na barra lateral, que pode ser facilmente visualizada pelos nossos visitantes. Há um monte de caixa de pesquisas na internet, mas dificilmente você vai encontrar um igual a esse.



A ideia dessa caixa é exibir apenas o ícone de pesquisa, e ao clicar faz um efeito de slide e mostra a caixa para o usuário fazer a sua busca.

Adicionando caixa de pesquisa expansiva no blogger

Vamos lá, hora de por a mão na massa!
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

  1. Acesse o Painel do Blogger
  2. Vá até o seu blog desejado e encontre a melhor área para adicionar a caixa. Copie o código no HTML da área:
  3. 
    <div id='search_box'><form action='/search' id='search' method='get'>
    <input class='search_text' id='search_text' name='q' onblur='if (this.value == '') {this.value = 'Digite o que procura e tecle enter...';}' onfocus='if (this.value == 'Digite o que procura e tecle enter...') {this.value = '';}' type='text' value='Digite o que procura e tecle enter...'/></form><div class='search_button'><i class='fa fa-search'/></div></div>
    
    Exemplo: se você quer na sidebar, vá até Layout e clique em Adicionar novo Gadget, escolha o HTML/Javascript e cole o código lá dentro e salve.
  4. Depois de colar o código acima na área onde você quer exibir a caixa, vá até Modelo > Editar HTML clique sobre o editor e tecle CTRL+F e procure por ]]></b:skin> e acima cole:
  5. 
    #search_box{width:340px;position:relative;height:40px}#search_box #search{float:right;top:0;right:50px;position:absolute;border:1px solid #d9e0e2;border-right:0;display:none}#search_box #search #search_text{color:#888;width:290px;padding:10px;font-size:16px;font-family:'Maven Pro',sans-serif;border:0 none;height:40px;margin-right:0;outline:none;background:#fff;float:left;box-sizing:border-box;transition:all .15s}#search_box #search #search_text:focus{background:#efefef}#search_box .search_button{float:right;border:1px solid #d9e0e2;color:#888;height:40px;width:50px;text-align:center;line-height:40px;display:inline-block;cursor:pointer}#search_box .search_button.active,#search_box .search_button:hover{background:#00aa9f;color:#fff}
    
  6. Agora procure por </body> e acima cole:
  7. 
    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
    <script type='text/javascript'>
    //<![CDATA[
    !function(){$(".search_button").on("click",function(t){t.preventDefault(),$("#search").animate({width:"toggle"}).focus(),$(".search_button").toggleClass("active")})}()
    //]]>
    </script>
    
  8. Feito isso, clique em Salvar Modelo
Pronto, agora atualize o seu blog e veja o resultado. E qualquer coisa deixe um comentário abaixo que estarei disposto à lhe ajudar com alguma dúvida.

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

4 comentários

MegaFiilmesOnline, posso ajudar?

Infelizmente não deu certo no meu blog. Quero colocar o código no meu menu retratil do topo que fica direto no HTML, ai quando vou salvar o código aparece esse alerta

"Erro ao analisar XML, linha 1707, coluna 81: Element type "input" must be followed by either attribute specifications, ">" or "/>"."

Poderia me ajudar? :D

Olá,

Para funcionar direto no HTML do blogger, você precisa converter o código primeiro.

Acesse aqui o conversor

Cole o código no conversor e clique em converter que ele vai gerar um novo codigo, aí só você copiar e colar no HTML.


Abrir lista de emoticonFechar lista de emoticon