21 de junho de 2017

Bloquear clique com botão direito do mouse no Blogger

Desabilite o clique do botão direito do mouse em seu blog e evite que copiem o conteúdo do seu blog. Esse pequeno script não vai permitir que os visitantes do seu blog cliquem com o botão direito do mouse exibindo uma imagem.


Adicionando o Script no blog

  1. Acesse o Painel do Blogger
  2. Vá até Tema > Editar HTML e acima de </body> cole o código abaixo:
  3. 
    <script>
    
    // Desabilitar Click Direito Mouse CodigosBlogger.com
    
    var DADrccolor = "#F1F1F1";
    
    var DADrcimage = "https://lh5.googleusercontent.com/-70ZyK7Gt4XE/VI8sxCvJGII/AAAAAAAAGd0/RZA9e6iSJBM/s300/superheroe.png";
    
    </script>
    
    <script src="http://yourjavascript.com/2122535051/antirightclick.js" type="text/javascript"></script>
    

Pronto, agora o script vai parar com os cliques no botão direito do mouse.

Dúvidas? deixe um comentário

14 de junho de 2017

Visualizar imagens e vídeos nos comentários do Blogger

Um simples código para transformar todos os links de imagens e vídeos comentados em seus posts correspondente aos mesmos. Os vídeos que esse script suporta é do YouTube e Vimeo.


Instale esse pequeno script em seu blog e visualize todos os links de imagens e vídeos comentados no post do seu blog.

Quer ver na prática? Veja o script em funcionamento nos comentários desse post

Agora que você já viu, quer mesmo colocar no seu blog? Então siga os passos abaixo.

Script para visualizar imagens e vídeos nos comentários dos posts


Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

  1. Acesse o Painel do Blogger
  2. Vá até Tema do seu blog desejado e clique em Editar HTML
  3. Procure por </body> e acima do trecho encontrado, cole:
  4. 
    <script>//<![CDATA[
    
    !function(){for(var a=/(\[img\])?((http:|https:)?\/\/\S*?\.(jpg|gif|png|bmp|jpeg]))(\[\/img\])?/gi,b=/(\[vid\])?http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?(\[\/vid\])?/gi,c=/(\[vid\])?(http:|https:)?\/\/(vimeo.com)\/([0-9]*)(\[\/vid\])?/gi,d=document.querySelectorAll(".comment_body p"),e=0;e<d.length;e++){for(var f=d[e].getElementsByTagName("a"),g=0;g<f.length;g++)if(f[g].href.match(a)||f[g].href.match(b)||f[g].href.match(c)){var h=document.createElement("span");h.innerHTML=f[g].href;var i=f[g];i.parentNode.insertBefore(h,i),f[g].href="",f[g].innerHTML=""}var j=d[e].innerHTML;j=j.replace(a,'<img style="max-width: 100%; height: auto;display: block;" src="$2"" alt=""/>'),j=j.replace(b,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://www.youtube.com/embed/$2" frameborder="0" allowfullscreen></iframe></div>'),j=j.replace(c,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://player.vimeo.com/video/$4" frameborder="0" allowfullscreen></iframe></div>'),d[e].innerHTML=j}}();
    
    //]]></script>
    

Pronto salve o modelo e faça o teste em seu blog. Caso não funcione, deixe seu blog abaixo para eu te ajudar :)

Dúvidas? deixe um comentário abaixo

12 de junho de 2017

Como fixar um gadget na sidebar do Blogger

O código que vou mostrar nesse post, vai ajudar você que quer fixar um determinado gadget na sidebar do seu blog. Mas para que ele funcione bem, eu recomendo usar ele no ultimo gadget da sua sidebar, assim não vai correr o risco dele ficar sobreposto em cima dos demais gadgets.


Você pode usar para fixar um anuncio do Adsense por exemplo, são infinitas possibilidades que você pode fazer com ele. Porém eu acho que deixar um anuncio fixo aumentaria as suas receitas com o blog.

Fixando um gadget na sidebar do blog

Então vamos lá, mas atente-se o gadget já deve estar adicionado na sua sidebar!

Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.


  1. Acesse o Painel do Blogger
  2. Vá até Tema > Editar HTML clique sobre o editor e tecle CTRL+F e procure por </body>, acima do trecho encontrado cole:
  3. 
    <script>
          //<![CDATA[
          codigosblogger_fixadorGadget("ID DO GADGET");
          function codigosblogger_fixadorGadget(elem) {
            var cb_sticky = document.getElementById(elem);
            var scrollee = document.createElement("div");
            cb_sticky.parentNode.insertBefore(scrollee, cb_sticky);
            var width = cb_sticky.offsetWidth;
            var iniClass = cb_sticky.className + ' cb_sticky';
            window.addEventListener('scroll', bs_sticking, false);
            function bs_sticking() {
              var rect = scrollee.getBoundingClientRect();
              if (rect.top < 0) {
                cb_sticky.className = iniClass + ' cb_sticking';
                cb_sticky.style.width = width + "px";
              } else {
                cb_sticky.className = iniClass;
              }
            }
          }
          //]]>
        </script>
        <style>
          .cb_sticking {background:transparent !important; position:fixed !important; top:30px; z-index:9999;  margin-top: 40px; position:relative\9 !important;}
        </style>
    
  4. Altere o trecho destacado no código "ID DO GADGET" pelo o id do gadget que você quer fixar. Um exemplo de como pegar o ID:

Pronto, uma vez alterado para o ID do seu gadget, salve e veja se funcionou.

Dúvidas? deixe um comentário abaixo

11 de junho de 2017

Google Adsense: O que é Page-level ads e como configurar no Blogger

O Google Adsense vem trazendo diversas melhorias em seu algorítimo nos últimos tempos, e junto dessas melhorias, também vem algumas novidades interessantes para blogueiros aumentarem os seus lucros exibindo anúncios de forma discreta e limpa.


Vamos falar do Page-level ads, novo formato de anúncio do Google Adsense pensado para dispositivos móveis, ou seja ele não funciona no desktop (computador). Esse formato de anuncio é exibido apenas nos smartphones e tem um grande potencial para aumentar a sua receita.

O que é Page-level ads?

São formatos de anúncios fixo e vignette (vinheta, ou seja um tipo de anuncio em tela cheia) exibidos apenas em dispositivos móveis. Cada conta tem um código de Page-level ads único que deve ser usado em todos os seus blogs/sites, diferente dos anúncios padrão do Google Adsense que criamos blocos de anúncios e cada bloco tem seu código.

Veja você mesmo o funcionamento dos mesmo em um gif fornecido pelo próprio Google.

Anúncio Fixo


Anúncios para dispositivos móveis que ficam fixos na borda da tela do usuário.

Os usuários podem ignorar o anúncio a qualquer momento.



Anúncio Vignette (vinheta)

Anúncios em tela cheia para dispositivos móveis que aparecem entre o carregamento de páginas no seu site.

Exibidos ao sair de uma página, em vez de ao acessá-la.

Os usuários podem pular o anúncio a qualquer momento.

Porém como todos sabemos, o Google prioriza muito a experiência do usuário no blog, então o seu blog deve ter uma boa navegabilidade no smartphones para que realmente o Google Adsense exiba os Page-level ads em seu blog.

O próprio Google diz: Page-level ads são exibidos pelo Google Adsense somente em horários de bom desempenho e quando a experiência do usuário é boa.

Como ativar o Page-level ads

Apesar de ser uma ativação bem simples, muitos blogueiros ainda tem essa dificuldade na hora de ativar o Page-level na plataforma do Adsense, mas é bem simples e rápido, acompanhe abaixo.

Ativando o Page-level ads


  1.  Acesse sua conta no Google Adsense
  2. Vá até Meus Anúncios e clique em Page-level ads
  3. Caso o status dos formatos não estejam ativos, é só você ativar como na imagem acima.

Pegando o código de implementação

Nesta mesma página, você vai encontrar um botão abaixo escrito "Ver código", clique sobre ele e copie o código fornecido.



Implementando o código do Page-level ads no Blogger

Apesar de ser uma implementação bem simples, muitos blogueiros ainda tem essa dificuldade na hora de implementar no Blogger pelo fato do código ser assíncrono e dar um pequeno erro na hora de salvar no Blogger. Veja como resolver isso agora.

Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

  1. Acesse o Painel do Blogger
  2. Vá até Tema > Editar HTML clique sobre o editor e tecle CTRL+F, procure por </body>
  3. Acima do trecho encontrado, cole o código fornecido pelo Page-level ads
  4. E aí, deu um erro certo? Para corrigir isso, acesse o nosso Conversor de Código Adsense e converta todo o código do Page-level ads e copie-o convertido
  5. Com o código convertido, cole acima do </body>
Pronto! Agora seu blog passará a exibir os anúncios nos dispositivos móveis sempre nos melhores momentos da experiência do usuário em seu blog.

Dúvidas? deixe seu comentário abaixo

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

9 de junho de 2017

7 estilos de Caixa de Pesquisa para adicionar no Blogger

Há tempos quero trazer um tutorial sobre caixa de pesquisa artigos no Blogger, pois é uma ferramenta que todos os blogueiros devem ter em seu blog. A caixa de pesquisa vai facilitar a usabilidade do usuário pois o mesmo poderá pesquisar por palavras chave do seu interesse e encontrar o que procura no seu blog.


No entanto muitos blogueiros que não tem muito conhecimento em HTML/CSS e não sabem como estilizar uma caixa de pesquisa, optam por não usar essa ferramenta em seu blog. Por isso estou trazendo 7 estilos diversos de caixa de pesquisa muito fácil de instalar.

Adicionando uma caixa de pesquisa no Blogger

Como disse anteriormente, a instalação é super fácil, acompanhe os passos abaixo.
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

Escolhendo um modelo de caixa

Caixa Nº 1

<style type="text/css">
#searchbox{background:url(http://3.bp.blogspot.com/-g-zH25_DoxI/VD1BuatkgII/AAAAAAAAAgc/00hxspfvv3s/s1600/searchbar.png) no-repeat;width:208px;height:29px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}#button-submit{background:url(http://4.bp.blogspot.com/-OcDQ6Z9ojlQ/VD1KnwJjFOI/AAAAAAAAAgs/cu_pKN6bpL8/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}#button-submit:hover{background:url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Faça uma busca..." /><input id="button-submit" type="submit" value="" /></form>

Caixa Nº 2

<style type="text/css">
#searchbox{width:280px;background:url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/s1600/search-box.png) no-repeat}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:transparent;border:0;font:14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}#searchbox input[type="text"]:focus{color:#fff}#button-submit{background:url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}#button-submit:hover{background:url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png)}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Faça uma busca..." /><input id="button-submit" type="submit" value=" "/></form>

Caixa Nº 3

<style type="text/css">
#nbc-searchbox{background:url(http://4.bp.blogspot.com/-xDMUT_7p820/Ue7AMp2_XZI/AAAAAAAAAho/N2xwuQ1GU1I/s1600/noxdo_blogspot_com_Search-icon3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}
form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value="Pesquisar..." onfocus='if (this.value == "Pesquisar...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Pesquisar...";}'/>
</form>
</div>

Caixa Nº 4

<style type="text/css">
#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;}#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:200px;padding-left:10px}#button-submit{background:url(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Faça uma busca..." />
<input id="button-submit" type="submit" value=" "/></form>

Caixa Nº 5

<style type="text/css">
#searchbox{background:url(http://2.bp.blogspot.com/-Un3z-hkw1XA/VD0V9GO8zrI/AAAAAAAAAf0/ww_5VsvWayY/s1600/search-box1.png) no-repeat;width:250px;height:65px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;padding:2px 0 2px 20px;margin:10px 15px 0 0;border-width:0;font:bold 16px "Brush Script MT",cursive;color:#595959;width:65%;display:inline-table;vertical-align:top}#button-submit{background:url(http://1.bp.blogspot.com/-zyJC7B-dSaU/VDv8-68fNJI/AAAAAAAAAe0/pkUajFr2kcQ/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-top:10px;width:19px;height:25px}#button-submit:hover{background:url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input class="textarea" name="q" type="text" size="15" placeholder="Faça uma busca..." /><input id="button-submit" type="submit" value="" /></form>

Caixa Nº 6

<style type="text/css">
    #hbz-searchbox {
        min-width: 250px;
        margin: 10px auto;
        border-radius: 3px;
        overflow: hidden;
        max-width: 300px;
    }
    #hbz-input {
        width: 59.2%;
        padding: 10.5px 4%;
        font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";
        border: none;
        background-color: #EEE;
    }
    #hbz-input:focus {
        outline: none;
        background-color: #FFF;
        box-shadow: 0 0 2px #333333 inset;
    }
    #hbz-submit {
        overflow: visible;
        position: relative;
        float: right;
        border: none;
        padding: 0;
        cursor: pointer;
        height: 40px;
        width: 32.8%;
        font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";
        color: #FFF;
        text-transform: uppercase;
        background-color: #D83C3C;
    }  
    #hbz-submit::before {
        content: "";
        position: absolute;
        border-width: 8px;
        border-style: solid solid solid none;
        border-color: transparent #D83C3C;
        top: 12px;
        left: -6px;
    }
    #hbz-submit:focus,
    #hbz-submit:active {
        background-color: #C42F2F;
        outline: none;
    }
    #hbz-submit:focus::before,
    #hbz-submit:active::before {
        border-color: transparent #C42F2F;
    }
    #hbz-submit:hover {
        background-color: #E54040;
    }
    #hbz-submit:hover::before {
        border-color: transparent #E54040;
}
</style>
<form id="hbz-searchbox" action="/search" method="get">
    <input type="text" id="hbz-input" name="q" placeholder="Faça uma busca..." />
    <input type="hidden" name="max-results" value="8" />
    <button id="hbz-submit" type="submit">Buscar</button>
</form>

Caixa Nº 7

<style type="text/css">
    #hbz-searchbox {
        background: transparent linear-gradient(#2C2C2C, #111);
        border-width: 1px;
        border-style: solid;
        border-color: #000;
        border-radius: 4px;
        padding: 10px;
        z-index: 1;
        display: block;
        margin: 10px auto;
        min-width: 228px;
        max-width: 278px;
    }
   
    #hbz-input,
    .hbz-submit {
        box-shadow: 0 2px #000;
        font-family: 'Cabin', helvetica, arial, sans-serif !important;
        margin: 0px;
        padding: 0px;
    }
   
    #hbz-input {
        background: linear-gradient(#333, #222);
        border: 1px solid #444;
        color: #888;
        display: block;
        float: left;
        font-size: 13px;
        height: 30px;
        padding-left: 4%;
        padding-right: 4%;
        width: 60.2%;
        border-radius: 3px 0px 0px 3px;
    }
   
    #hbz-input:focus {
        animation: glow 800ms ease-out infinite alternate;
        border-color: #393;
        color: #efe;
        outline: none;
    }
   
    .hbz-submit {
        background: linear-gradient(#333, #222);
        box-sizing: content-box;
        border: 1px solid #444;
        border-left-color: #000;
        color: #fff;
        display: block;
        font-size: 12px;
        height: 30px;
        line-height: 30px;
        position: relative;
        width: 30%;
        cursor: pointer;
        border-radius: 0px 3px 3px 0px;
    }
   
    .hbz-submit:hover,
    .hbz-submit:focus {
        background: linear-gradient(#393939, #292929);
    }
   
    .hbz-submit:hover,
    .hbz-submit:focus {
        color: #5f5;
        outline: none;
    }
   
    .hbz-submit:active {
        top: 1px;
    }
   
    @keyframes glow {
        0% {
            border-color: #393;
            box-shadow: 0 2px #000, 0px 0px 5px #3DAD3D, inset 0px 0px 5px #1F391F;
        }
        100% {
            border-color: #6f6;
            box-shadow: 0 2px #000, 0px 0px 8px #6bab6b, inset 0px 0px 10px #1F391F;
</style>

<form id="hbz-searchbox" action="/search" method="get">
    <input type="text" id="hbz-input" name="q" placeholder="Faça uma busca..." />
    <input type="hidden" name="max-results" value="8" />
    <button class="hbz-submit" type="submit">Buscar</button>
</form>

Curtiu? tem alguma sugestão de caixa de pesquisa? Deixe um comentário abaixo

30 de maio de 2017

Compartilhar trecho das postagens no Facebook

O Facebook é a rede social mais utilizada no mundo, e com isso ela faz com que ela esteja em constante atualizações e trazendo várias melhorias no decorrer do tempo. E recentemente a equipe de desenvolvedores lançaram um recurso que pode ser muito útil para blogs de mensagens, mas acredito que pode ser útil para muito mais tipos de blog.


Trata-se de um plugin de citações onde tem como objetivo o visitante ao selecionar um determinado trecho em sua postagem, aparece um botão escrito "Compartilhar Citação" e ao clicar, abre uma caixa do Facebook para compartilhar aquele trecho que você selecionou juntamente com o link para sua postagem.

Realmente a ideia é muito boa e pode aumentar bastante o engajamento do seu blog na rede social. A implementação no Blogger também é bem tranquilo de fazer, siga atentamente os passos abaixo.

Instalar compartilhador de citações nas postagens do Blogger

Bom, antes mostrar como fazer, você quer ver como funciona? Então é só selecionar o trecho abaixo e veja a mágica acontecer:
Selecione esse trecho com o mouse
Sem mais delongas, vamos ao que interessa.
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.
  1. Acesse o Painel do Blogger
  2. Vá até Tema > Editar HTML clique sobre o editor e tecle CTRL+F e procure por </body>, imediatamente acima do trecho encontrado cole:
  3. 
    <div id='fb-root'/>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = &quot;//connect.facebook.net/pt_BR/sdk.js#xfbml=1&amp;version=v2.6&quot;;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
    
    
    

  4. Agora procure por <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> e logo abaixo cole:
  5. 
    <b:if cond='data:blog.pageType == &quot;item&quot;'><div class="fb-quote"></div></b:if>
    
    
    
  6. Salve o Modelo
Pronto, agora todas as postagens do seu blog passarão a exibir o Compartilhar citação nos trechos selecionados.

Obs: Se as meta tags Open Graph do seu blog não estiverem configuradas, pode ocorrer um bug ao compartilhar. Por exemplo a imagem do post pode não aparecer no compartilhamento do Facebook, assim como o título, descrição etc.

Então eu recomendo fortemente que você utilize o Pacote de Meta Tags 2017 que publiquei aqui no Códigos Blogger, elas estão com as meta tags Open Graph configuradas corretamente para você utilizar em seu blog.

Dúvidas? deixe um comentário abaixo

17 de maio de 2017

Como colocar espaços de publicidade no Blogger

Talvez você já saiba que escrever artigos no blog não é mais um hobby como muitos dizem, ou então um passa-tempo. Criar um blog interessante, com conteúdos relevantes e uma boa aparência, pode render bastante tráfego e com isso você pode monetizar o seu blog com anúncios.

Há 2 formas de monetizar um blog, a primeira e mais utilizada é com o Google Adsense, porém esse não é o foco deste artigo, então eu recomendo a leitura do artigo Como colocar o Google Adsense no seu blog. A segunda maneira e que eu vejo muito pouco blogueiros fazendo, é colocar anúncios diretos, seja em forma de banners ou posts patrocinados.

Mas o que é Anúncio Direto?

É simplesmente você vender um espaço no seu blog para uma determinada empresa, com isso ela pode anunciar dentro daquele espaço com um banner por exemplo com uma chamada para o seu site, evento, etc.

E por isso neste artigo estarei ensinando você colocar no blog um espaço de 125x125 pixels para banners um do lado do outro, onde você poderá colocar esses anunciantes, ou então, colocar banners de parceiros. Fica ao seu critério o uso :)


Instalando espaços de publicidade no Blogger

Instalação bem simples e rápida, prossiga com atenção.
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.
  1. Acesse o Painel do Blogger
  2. Vá até Modelo > Editar HTML, clique sobre o editor e tecle CTRL+F e procure por ]]></b:skin> imediatamente acima, cole o seguinte código:
    
    /* Espaços Publicidade 125px CódigosBlogger.com */
    .pub_125 {text-align: center;}
    .pub_125 img {margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #ddd;}
    .pub_125 img:hover {border:1px solid #aaa}
    .pub_125 img.noborder {border:0;}
    
  3. Salve o Modelo
  4. Vá até Layout e escolha uma área do Widget onde quer exibir os banners e clique em Adicionar Novo Gadget > HTML/JavaScript e cole o seguinte código:
    
    <div class="pub_125">
    <a href="http://www.codigosblogger.com" title="TÍTULO DO BANNER" target="_blank"><img class="noborder" src="URL_DO_BANNER" alt="TÍTULO DO BANNER" width="125" height="125" /></a>
    <a href="http://www.codigosblogger.com" title="TÍTULO DO BANNER" target="_blank"><img class="noborder" src="URL_DO_BANNER" alt="TÍTULO DO BANNER" width="125" height="125" /></a>
    <a href="http://www.codigosblogger.com" title="TÍTULO DO BANNER" target="_blank"><img class="noborder" src="URL_DO_BANNER" alt="TÍTULO DO BANNER" width="125" height="125" /></a>
    <a href="http://www.codigosblogger.com" title="TÍTULO DO BANNER" target="_blank"><img class="noborder" src="URL_DO_BANNER" alt="TÍTULO DO BANNER" width="125" height="125" /></a>
    </div>
    
  5. Altere as informações dos respectivos banners e Salve.

Pronto, agora na sidebar do seu blog ficará os banners com as imagens organizadas dando uma aparência profissional ao seu blog.

Dúvidas? deixe um comentário abaixo
5 estrelas - baseado em 29 votos

6 de fevereiro de 2017

Notificar usuário com adblock no Blogger

Adblock é uma extensão para navegador, com ele é possível bloquear todas as propagandas do seu blog. Sim, entendo que para alguns sites essa extensão é muito útil, porém isso pode prejudicar muito o autores de conteúdo na internet, principalmente se você utiliza o Google Adsense no seu blog.



Bom para tentarmos lhe ajudar com isso, vamos mostrar como detectar esses usuários que utilizam Adblock em seu blog e assim exibir uma mensagem para ele. Nesta mensagem você pode colocar o que quiser para convencê-lo a desativar o Adblock pelo menos em seu blog.

Como Notificar Usuário AdBlocker no Blogger

É como eu sempre digo: vamos por a mão na massa agora!
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

  1. Acesse o Painel do Blogger
  2. Vá até Modelo > Editar HTML  do seu blog desejado, clique sobre o editor de código e tecle CTRL+F e procure por ]]></b:skin> e imediatamente acima, cole:
  3. 
    /* Notificação AdBlock CódigosBlogger.com */
    #keep-ads{padding:0;position:fixed;bottom:0;opacity:0;height:auto;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;}
    .keep-adsme{background:#e74c3c;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:1.5rem;line-height:1.5;font-family:monospace;max-width:930px;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);transition:all .6s cubic-bezier(.25,.8,.25,1);border:15px solid rgba(0,0,0,.07);overflow:hidden;}
    .keep-adsme:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);}
    .keep-adsme h4{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:2.2rem;margin:0 auto}
    #keep-ads p{margin:0}
    #keep-ads a{color:#ffe88b;}#keep-ads a:hover{color:#ffe88b;text-decoration:underline}
    #keep-ads.show{left:0;top:0;right:0;z-index:1000;pointer-events:auto;opacity:1;visibility:visible;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);animation:wobble .7s;opacity:1;}
    .close-keep-ads{visibility:hidden;opacity:0;color:#ffe88b;text-align:center;position:absolute;bottom:10px;right:10px;font-size:42px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all .6s cubic-bezier(.25,.8,.25,1);transform:translate(0,50px);}
    .close-keep-ads:hover{color:#fff;transform:scale(1.0);}
    .keep-adsme:hover .close-keep-ads{visibility:visible;opacity:1;color:#ffe88b;transform:translate(0,0);}
    #keep-ads p span {font-family:fontawesome;font-size:5rem;}
    @keyframes wobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}
    
  4. Agora procure por </body> e acima cole:
  5. 
    <div id='keep-ads'>
    <div class='keep-adsme'>
      <p><h4>Adblock Detectado</h4></p>
      <p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></span></p>
      <p>PRIMEIRA LINHA DA MENSAGEM ALTERE AQUI</p>
      <p>SEGUNDA LINHA DA MENSAGEM ALTERE AQUI</p>
      <p>Muito obrigado, NOME DO SEU BLOG</p>
    <div class='close-keep-ads' onclick='hidekeep()'>×</div>
    </div>
    </div>
    <script type='text/javascript'>
    //<![CDATA[
    // Notificação AdBlock CódigosBlogger.com
    function hidekeep(){document.getElementById("keep-ads").style.display="none"}setTimeout(function(){var e=document.getElementById("keep-ads"),t=document.querySelectorAll("ins.adsbygoogle");0===$(t).height()&&(e.className="show")},2e3);
    //]]>
    </script>
    
  6. Altere o trechos destacados em negrito no código pela mensagem que você quer passar para os usuários detectados no AdBlock em seu blog.
  7. Salve o Modelo
Estamos utilizando icones Font Awesome para deixar a caixa mais bonita, certifique-se de que o seu blog tenha a biblioteca instalada. Se não tiver, copie e cole o trecho abaixo, acima de </head> do seu template.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Pronto, agora seu blog passará a exibir a mensagem em uma linda caixa com javascript.

Dúvidas? deixe um comentário abaixo.

Links de postagens relacionadas no meio dos artigos no Blogger

Hoje vou ensinar uma dica muito útil, com ela será formado uma lista no meio da sua postagem, com links de posts relacionados. Isso pode melhorar muito o tráfego do seu blog.


A instalação é fácil, porém deve ser feita com bastante atenção. Aqui vou mostrar dois estilos diferentes de listas para você aplicar em seu blog.

Veja também:

Como colocar Posts relacionados nos artigos automático

Vamos lá, siga atentamente os passos abaixo.
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

  1. Acesse o Painel do Blogger
  2. Vá até Modelo > Editar HTML do seu blog desejado, clique sobre o editor e tecle CTRL+F e procure por </head> e imediatamente acima, cole:
  3. 
    <b:if cond='data:blog.pageType == "item"'>
    <script type='text/javascript'>
    //<![CDATA[
    var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
    //]]>
    </script>
    </b:if>
    
  4. Escolha um modelo abaixo e cole o código acima de ]]></b:skin>
  5. 
    /* Postagens Relacionadas Modelo 1  - CódigoBlogger.com */
    .related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
    .related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
    .related-simplify ul{margin:0;padding:0}
    .related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
    .related-simplify ul li:nth-child(odd){background:#fefefe}
    .related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
    .related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
    .related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
    .related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
    .related-simplify a:hover{color:#0383d9;text-decoration:underline}
    .related-simplify ul li:nth-child(n+4) {display:none;}
    @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
    @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
    
    
    /* Postagens Relacionadas Modelo 2  - CódigoBlogger.com */
    .related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
    .related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
    .related-simplify ul{margin:0;padding:0}
    .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
    .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
    .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
    .related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
    .related-simplify a:hover{color:#0383d9;}
    .related-simplify ul li:nth-child(n+4) {display:none;}
    @media only screen and (max-width:768px){
    .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
    .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
    .related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
    .related-simplify ul li{padding:5px 0}
    .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}
    
  6. Agora procure por <data:post.body/> e substitua todo o trecho encontrado por:
  7. 
    <div expr:id='"post1" + data:post.id'/>
    <div class='related-simplify'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == "item"'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <h4>Leia também</h4>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </div>
    <div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div>
    <script type='text/javascript'>
    var obj0=document.getElementById("post1<data:post.id/>");
    var obj1=document.getElementById("post2<data:post.id/>");
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/2);
    var r=t.lastIndexOf("<br>");
    if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
    </script>
    
  8. Agora clique em Salvar modelo
Pronto, agora a lista vai ser exibida em todos os posts, mas ela vai sempre mostrar links relacionados a sua postagem, legal né?

Dúvidas? deixe um comentário abaixo.

28 de janeiro de 2017

SEO Blogger 2017

Pacote de meta tags amigáveis e válidas para você adicionar em seu blog e aumentar o seu tráfego. No ano passado eu já publiquei um pacote de meta tags, porém fizemos algumas modificações e incluímos novas metas importantes.



Você vai aprender a instalar e configurar as meta tags, vou destacar todos os pontos que você deve alterar. Meu intuito é que o seu blog melhore nos resultados consideravelmente com esse pacote.

Alguns blogueiros ainda não sabem muito bem o que é meta tags, então vou fazer uma explicação bem básica e rápida aqui.

O que é Meta tags

As meta tags  são linhas de código HTML ou "etiquetas" que, entre outras coisas, descrevem o conteúdo do seu blog para os buscadores. É nelas que você vai inserir as palavras-chave que facilitarão a vida do usuário na hora de te encontrar, por exemplo.

Meta tags SEO para Blogger 2017

Provavelmente no seu template já tem meta tags aplicadas nele, se você quer utilizar esse pacote, é importante que você apague todas as meta tags do seu template e adicione as seguir.

Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

  1. Acesse o Painel do Blogger
  2. Vá até Modelo do seu blog desejado e clique em Editar HTML, clique sobre o editor e tecle CTRL+F e procure por <head> e abaixo dele cole
  3. 
    <!-- [ Meta Tag SEO CodigosBlogger.com ] -->
    <include expiration='7d' path='*.css'/>
    <include expiration='7d' path='*.js'/>
    <include expiration='3d' path='*.gif'/>
    <include expiration='3d' path='*.jpeg'/>
    <include expiration='3d' path='*.jpg'/>
    <include expiration='3d' path='*.png'/>
    <meta content='sat, 02 jun 2020 00:00:00 GMT' http-equiv='expires'/>
    <meta charset='utf-8'/>
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <meta content='blogger' name='generator'/>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
    <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
    <link expr:href='data:blog.url' rel='canonical'/>
    <b:if cond='data:blog.pageType == "index"'>
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <b:if cond='data:blog.pageType != "error_page"'>
    <title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if></b:if>
    <b:if cond='data:blog.pageType == "error_page"'>
    <title>Página não encontrada - <data:blog.title/></title>
    </b:if>
    <b:if cond='data:blog.pageType == "archive"'>
    <meta content='noindex' name='robots'/>
    </b:if>
    <b:if cond='data:blog.searchLabel'>
    <meta content='noindex,nofollow' name='robots'/>
    </b:if>
    <b:if cond='data:blog.isMobile'>
    <meta content='noindex,nofollow' name='robots'/>
    </b:if>
    <b:if cond='data:blog.pageType != "error_page"'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <script type='application/ld+json'>{ "@context": "http://schema.org", "@type": "WebSite", "url": "<data:blog.homepageUrl/>", "potentialAction": { "@type": "SearchAction", "target": "<data:blog.homepageUrl/>?q={search_term}", "query-input": "required name=search_term" } }</script>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + data:blog.title' name='keywords'/>
    </b:if></b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta content='DESCRIÇÃO-DO-BLOG' name='keywords'/></b:if>
    <link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
    <link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
    <link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
    <b:if cond='data:blog.pageType == "item"'>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
    </b:if></b:if>
    <link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
    <link href='/favicon.ico' rel='icon' type='image/x-icon'/>
    <link href='https://plus.google.com/USER-GOOGLE-PLUS/posts' rel='publisher'/>
    <link href='https://plus.google.com/USER-GOOGLE-PLUS/about' rel='author'/>
    <link href='https://plus.google.com/USER-GOOGLE-PLUS' rel='me'/>
    <meta content='CODIGO-GOOGLE-WEBMASTER' name='google-site-verification'/>
    <meta content='CODIGO-BING-WEBMASTER' name='msvalidate.01'/>
    <meta content='Brasil' name='geo.placename'/>
    <meta content='SEU-NOME' name='Author'/>
    <meta content='general' name='rating'/>
    <meta content='id' name='geo.country'/>
    <!-- [ Meta Tag para Redes Sociais ] -->
    <b:if cond='data:blog.pageType == "item"'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <meta content='article' property='og:type'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
    <meta expr:content='"Visite " + data:blog.pageTitle + " para ler nossos artigos."' property='og:description'/>
    </b:if>
    </b:if>
    <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
    <b:else/>
    <meta content='URL-DA-IMAGEM-DO-BLOG' property='og:image'/>
    </b:if>
    </b:if>
    <meta content='https://www.facebook.com/PERFIL-FACEBOOK' property='article:author'/>
    <meta content='https://www.facebook.com/FAN-PAGE-FACEBOOK' property='article:publisher'/>
    <meta content='CODIGO-APPID-FACEBOOK' property='fb:app_id'/>
    <meta content='CODIGO-ADMIN-FACEBOOK' property='fb:admins'/>
    <meta content='pt_BR' property='og:locale'/>
    <meta content='summary' name='twitter:card'/>
    <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
    <meta content='USER-TWITTER' name='twitter:site'/>
    <meta content='USER-TWITTER' name='twitter:creator'/>
    
  4. Entendendo as meta tags e oque você deve alterar:
  5. DESTACADOCOMO PREENCHER
    DESCRIÇÃO-BLOGPreencha com descrições ou palavras-chave do blog
    USER-GOOGLE-PLUSPreencha com seu ID Google+ do blog, por exemplo: + CodigosBlogger2016
    CODIGO-GOOGLE-WEBMASTERPreencha com o código de validação Google no Webmaster Tools
    CODIGO-BING-WEBMASTERPreencha com o código de validação Bing Webmaster
    SEU-NOMEPreencha com o nome do autor
    PERFIL-FACEBOOKPreencha o seu perfil Facebook
    FAN-PAGE-FACEBOOKPreencha com o id da página no Facebook
    CODIGO-APPID-FACEBOOKPreencha com o código de Facebook App, poderia criar em https://developers.facebook.com
    CÓDIGO-ADMIN-FACEBOOKPreencha o seu código de perfil do Facebook, entrar em http://findmyfbid.com
    USER-TWITTERPreencha o seu nome de usuário Twitter
    URL-DA-IMAGEM-DO-BLOGColoque a URL de uma imagem que represente o seu blog, essa imagem vai ser exibida quando a URL principal do seu blog for compartilhada
  6. Depois de alterar, Salve o modelo.
Pronto! Agora seu blog está com as meta tags totalmente atualizadas 2017.

Dúvidas? deixe um comentário abaixo.

5 estrelas - baseado em 759 votos

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.