10 de junho de 2017

Caixa de pesquisa dinâmica com Ajax para Blogger

Em contato com um leitor aqui do blog, me foi perguntado sobre uma caixa de pesquisa onde o visitante poderia pesquisar sem carregar a página, ou seja quando clicar em pesquisar ou der um enter, abrir uma pequena box com o resultado da pesquisa.


E foi ai que lembrei que já havia feito um projeto onde a caixa de pesquisar era neste estilo. Então busquei o projeto do fundo do baú e fiz umas adaptações na caixa de pesquisa, e voa lá! Ficou tão bom que até implementei aqui no blog, quer ver o funcionamento? Só fazer uma busca ali na caixa de pesquisa, procure por exemplo por "busca dinâmica". (Só faça o teste se tiver pelo PC, por opção minha, eu ocultei para celular e deixei a pesquisa normal para smartphone, mas não se preocupe, está ativado para celular para usar em seu blog)

Muito legal né? Esse buscador funciona com jQuery e Ajax, ou seja certifique-se que a biblioteca do jQuery está sendo chamada no seu template, mas com certeza já deve ter pois o jQuery está presente em mais de 95% dos blog's.

Adicionando o buscador dinâmico com ajax no blogger

Agora que você já viu o funcionamento, vou te passar o código que faz essa mágica, e a instalação é super simples! Vamos lá?
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

  1. Acesse o Painel do Blogger
  2. Vá até Layout do seu blog desejado e escola uma área do gadget onde deseja exibir a caixa e clique em Adicionar um Gadget
  3. Selecione o gadget HTML/JavaScript, mantenha-o aberto e escolha um estilo de caixa abaixo e adicione no campo do gadget
  4. Adicione o código abaixo:
  5. 
    <style>
    //CodigosBlogger.com Ajax Search
    #search-block {
    width: 100%;
    float: left;
    margin-top: 7px;
    margin-bottom: 7px;
    }
    #ajax-search-form {
    position : relative;
    }
    #ajax-search-form input {
    background : #FFF;
    float : left;
    font-family :tahoma;
    font-size:12px;
    padding : 9px 12px 8px 12px;
    width : 90%;
    color : #c5c5c5;
    border : none 0;
    border-left : 1px solid #ececec;
    transition : width 0.7s, color 0.4s;
    border-radius : 0;
    }
    #ajax-search-form input:focus {
    color : #000;
    }
    #search-result {
    color : #585858;
    border : #f3f3f3 solid 1px;
    background-color : #fff;
    padding : 8px 10px;
    margin : 10px 0;
    width : 280px;
    height : auto;
    position : absolute;
    top : 27px;
    right : 10px;
    z-index : 999;
    box-shadow : 0 1px 3px #999;
    display : none;
    }
    #search-result * {
    margin : 0;
    padding : 0;
    }
    #search-result p {
    font-size:12px;
    }
    #search-result h4, #search-result strong {
    display : block;
    margin : 0 30px 10px 0;
    }
    #search-result ol {
    list-style : none;
    overflow : hidden;
    max-height : 450px;
    }
    #search-result ol:hover {
    overflow : auto;
    }
    #search-result ol a:hover {
    text-decoration : underline;
    }
    #search-result .close {
    text-decoration : none;
    display : block;
    position : absolute;
    top : 4px;
    font-size : 18px;
    right : 10px;
    line-height : normal;
    color : black;
    }
    #search-result li {
    padding : 5px;
    overflow: hidden;
    border-bottom: 1px solid #eaeaea;
    }
    #search-result li:nth-child(even) {
    background-color: #f4f4f4;
    }
    #search-result strong {
    margin : 0 0 3px 0;
    }
    #search-result img {
    float : left;
    display : block;
    margin : 0 5px 0 0;
    border-radius : 2px;
    border: 1px solid #ccc;
    }
    #search-block button {
    text-indent : -9999px;
    overflow : hidden;
    height: 34px;
    width: 10%;
    background: #04a5ca url(http://4.bp.blogspot.com/-QNS2CA_-gQk/UoSHkm5IzyI/AAAAAAAAAB8/FNifXgfnvrw/s1600/button-search.png) center no-repeat;
    position : relative;
    cursor : pointer;
    border : none !important ;
    outline : 0;
    }
    </style>
    <script class='jshilang' type="text/javascript">
    //<![CDATA[
    function searching(b){(function(j){var g={blogURL:"",srcBlank:"",findText:"Resultados para",NotfindText:"Nenhum resultado!",Showthumb:true,LoadingText:"Pesquisando...",scrthumbSize:50,summaryLength:100};
    g=j.extend({},g,b);
    var a=j("#ajax-search-form"),h=a.find(":text");
    a.append('<div id="search-result"></div>');
    var k=j("#search-result");
    a.on("submit",function(){var d=h.val();
    k.show().html('<div class="load">'+g.LoadingText+"</div>");
    j.get((g.blogURL===""?window.location.protocol+"//"+window.location.host:g.blogURL)+"/feeds/posts/summary?alt=json-in-script&q="+d+"&max-results=9999",function(v){var w=v.feed.entry,e,f,x,y,t="";
    if(w!==undefined){t="<h4>"+g.findText+" ""+d+""</h4>";
    t+='<a class="close" href="/">×</a><ol>';
    for(var r=0;
    r<w.length;
    r++){var u=new RegExp(d,"ig"),x=w[r].title.$t.replace(u,"<mark>"+d+"</mark>");
    for(var s=0;
    s<w[r].link.length;
    s++){if(w[r].link[s].rel=="alternate"){y=w[r].link[s].href
    }}if(g.summaryLength>0){if("content" in w[r]){e=w[r].content.$t
    }else{if("summary" in w[r]){e=w[r].summary.$t
    }else{e=""
    }}e=e.replace(/<\S[^>]*>/g,"");
    if(e.length>g.summaryLength){e=e.substring(0,g.summaryLength)+"..."
    }e=e.replace(u,"<mark>"+d+"</mark>")
    }if(g.Showthumb===true){if("media$thumbnail" in w[r]){f=w[r].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+g.scrthumbSize+"-c")
    }else{f=g.srcBlank
    }}t+='<li><a href="'+y+'" >'+(g.Showthumb===true?'<img width="'+g.scrthumbSize+'" height="'+g.scrthumbSize+'" src="'+f+'"/>':"")+"<strong>"+x+"</strong></a>"+(g.summaryLength>0?"<p>"+e+"</p>":"")+"</li>"
    }t+="</ol>";
    k.html(t)
    }else{k.html('<a class="close" href="/">×</a><strong>'+g.NotfindText+"</strong>")
    }},"jsonp");
    return false
    });
    a.on("click",".close",function(){k.fadeOut();
    return false
    })
    })(jQuery)
    }
    //]]>
    </script>
    <div id='search-block'>
    <form action='/search' id='ajax-search-form'>
        <input name='q' onblur='if (this.value == "") {this.value = "Faça sua Busca..";}' onfocus='if (this.value == "Faça sua Busca..") {this.value = "";}' type='text' value='Faça sua Busca..'/>
    <button title='Fazer pesquisa' type='submit'>Buscar</button>
     </form>
    </div> 
    <script class='jshilang' type='text/javascript'>
    //<![CDATA[
    searching({summaryLength:100,scrthumbSize:50});
    //]]>
    </script>
Caso não funcione, provavelmente o seu template não tem o jQuery chamado, para resolver, é só você adicionar o código abaixo no fim do código acima.


<script src='https://code.jquery.com/jquery-1.12.4.min.js' type='text/javascript'/>

E está pronto! Agora é só desfrutar desse buscador muito legal :)

Dúvidas? deixe um comentário abaixo

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.

3 comentários

Fabiano Oliveira delete 12/09/2017 13:52

Amigo tem alguma forma de adicionar esse codigo diretamente no template sem ser via gagdet? se tiver ensina ai como faz.

No momento apenas via Gadget. Para adicionar direto no template requer um pouco mais de conhecimento.

Eu consegui emplementar, só que usei search-hide no lugar de search-block. Mas a caixa de pesquisa esta aparecendo por dentro do blog, ao inves de aparecer por fora. O que eu fiz de errado??


Abrir lista de emoticonFechar lista de emoticon