19 de setembro de 2017

Como adicionar um link da fonte para quem copiar seu post

Como adicionar links de fonte automaticamente - Na Internet é muito fácil copiar o texto de um site e colá-lo em outro site. Tecnicamente, se um visitante do blog fizer cópias de um site em particular, ele deve fornecer um link para a fonte do site para o qual ele ou ela copia o texto.


Para evitar isso, vou fornecer um código que, automaticamente, se alguém copiar a seção de texto de nosso artigo, ele abrirá automaticamente o link de origem do texto que ele copiou.

Embora eu pense que isso não adianta muito porque o link da fonte pode ser removido facilmente, pelo menos proporcionará um pequeno aviso para quem copia o texto dos artigos do blog.

Adicionar link da fonte para quem copiar seu post

  1. Acesse o Painel do Blogger
  2. Vá até Tema > Editar HTML clique sobre o editor de códigos e tecle CTRL+F e procure por </body> e logo acima cole:
  3. 
    <script type='text/javascript'>
    //<![CDATA[
    // Copiando texto
    function nocopas(){var e=window.getSelection();pagelink=" Fonte: "+document.location.href,copytext=e+pagelink,newdiv=document.createElement("div"),newdiv.style.position="absolute",newdiv.style.left="-99999px",document.body.appendChild(newdiv),newdiv.innerHTML=copytext,e.selectAllChildren(newdiv),window.setTimeout(function(){document.body.removeChild(newdiv)},100)}document.addEventListener("copy",nocopas);
    //]]>
    </script>
    
    
  4. Salve o Modelo
Pronto, agora todos os artigos copiados, irão gerar um link automaticamente para o seu site.

Dúvidas? deixe um comentário abaixo

7 de setembro de 2017

Formato Grid nos Posts do Blogger

A maneira que as postagens do seu blog são exibidas pode diferenciar entre ser popular ou obscuro. Formatos que dificultam a leitura ou pareça caótico, nunca será o favorito de ninguém. É por isso que as postagens devem ser exibida de forma organizada, fácil de ler e objetiva.


É claro que vai variar de blog para blog, porém se você acha que o seu blog se encaixa em algum formato que vamos disponibilizar aqui, aproveite pois nada funciona melhor que formatos Grid para exibição organizada de postagens.

Formato Grid

As postagens listadas no formato grid proporcionam uma excelente experiência na visualização tanto para os visitantes quanto para o proprietário do blog.

Características

  • Padrão na exibição das postagens
  • Leia mais será aplicado
  • Miniaturas são aplicadas automaticamente de acordo com a primeira imagem do post
  • Código 100% seguro e usado por 99% dos blogs para habilitar o formato Grid

Benefícios

  • Carregamento rápido das postagens
  • Blog com aparência profissional
  • Melhora o SEO do blog
Embora você tenha que fazer mudanças no código do seu template para deixar compatível com o formato Grid, todo o trabalho valerá a pena assim que estiver funcionando.

Adicionando o formato Grid no Blogger

  1. Acesse o Painel do Blogger
  2. Vá até Tema > Editar HTML e procure por </head> e logo acima cole:
  3. 
    <script type='text/javascript'>
    posts_no_thumb_sum = 100;
    posts_thumb_sum = 100;
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){for(var c=a.split("<"),d=0;d<c.length;d++)c[d].indexOf(">")!=-1&&(c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length));a=c.join("")}for(b=b<a.length-1?b:a.length-2;" "!=a.charAt(b-1)&&a.indexOf(" ",b)!=-1;)b++;return a=a.substring(0,b-1),a+"..."}function createSummaryAndThumb(a,b,c){var d=document.getElementById(a),e="",f=d.getElementsByTagName("img"),g=posts_no_thumb_sum;f.length>=1?(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'"><img src="'+f[0].src+'" /></a></div>',g=posts_thumb_sum):(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'" title="'+c+'"><img src="https://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/s1600/sorry-image-not-available.png" /></a></div>',g=posts_thumb_sum);var h=e+'<div class="post-summary-text">'+removeHtmlTag(d.innerHTML,g)+"</div>";d.innerHTML=h}
    //]]>
    </script>
    
    
  4. Agora procure por <data:post.body/> substitua o segundo e o terceiro trecho encontrado por esse abaixo:
  5. 
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <div expr:id='&quot;summary&quot; + data:post.id'>
                <data:post.body/>
            </div>
            <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
            <b:if cond='data:post.allowComments'>
                <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                    <data:post.numComments/>
                </a>
            </b:if>
        </b:if>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <data:post.body/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <data:post.body/>
    </b:if>
    
    
  6. Escolha um modelo abaixo e cole o código acima do </head>

  7. Formato Grid Simples
    
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType!= &quot;item&quot;'>
    <style type="text/css">
    #blog-pager{clear:both}.post{height:auto;width:30.8%;overflow:hidden;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font-size:75%;font-family:&#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;padding:0;color:#444}h3.post-title{height:26px;text-align:center;width:100%;margin:0!important;padding-bottom:4%}.date-header{display:none}.post-body a{text-decoration:none}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{color:#777;font-size:100%!important;font-family:&#39;Open Sans Condensed&#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:7% 10%}a.comment-bubble{color:#fff;text-decoration:none;font-size:100%;font-weight:700;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font-family:&#39;Open Sans Condensed&#39;,sans-serif;}a.comment-bubble:before{content:&quot;Comments: &quot;;}.post-header,.post-footer{display:none}
    </style></b:if></b:if><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
    
    

    Formato Grid Morderno
    
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType!= &quot;item&quot;'>
    <style type="text/css">
    #blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font:75% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;color:#111;padding:0}h3.post-title{text-align:center;height:22px;position:absolute;bottom:23%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0 13px}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important}.posts-thumb{width:100%;height:190px;position:relative;overflow:hidden;clear:both;border-bottom:3px solid #00C8BD;border-top:3px solid #558ABB}.posts-thumb:hover{border-top:3px solid #FF664E;border-bottom:3px solid #FEBE36}.post-body{position:relative;height:auto}.post-body a{text-decoration:none}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none}.post-summary-text{color:#555;background:#f5f5f5 url(https://1.bp.blogspot.com/-rh-PYvqjzSs/VPTARkPOSVI/AAAAAAAALC4/GyFFEnl2TO8/s1600/blueprint.png);font:100% &#39;Open Sans Condensed&#39;,sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:17% 10% 6%}a.comment-bubble{color:#fff;text-decoration:none;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font:110% &#39;Pacifico&#39;,cursive;}a.comment-bubble:before{content:&quot;Comments: &quot; url(https://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/s1600/heart-active.png);}.post-header,.post-footer{display:none}
    </style></b:if></b:if>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
    <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
    
    

    Formato Grid Minificado
    
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType!= &quot;item&quot;'>
    <style type="text/css">
    #blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important;}h3.post-title a{font:95% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;color:#fff;padding:0;text-shadow:2px 2px 3px #222}h3.post-title{height:22px;text-align:center;position:absolute;top:1%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important;}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative;}.post-body{position:relative;overflow:hidden}.post-body a{text-decoration:none;}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:108% &#39;Open Sans Condensed&#39;,sans-serif;overflow:hidden;padding:45px 10px 0;left:0;position:absolute;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1;z-index:10;}a.comment-bubble{color:#fff;text-decoration:none;font:104% &#39;Pacifico&#39;,cursive;width:100%;text-align:center;position:absolute;top:160px;left:0;text-shadow:1px 2px 1px #333;z-index:11;}a.comment-bubble:before{content:&quot;Comments: &quot;}.post-header,.post-footer{display:none}
    </style></b:if></b:if>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
    <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
    
    

    Formato Masonry (Estilo Pinterest) Bônus
    
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType!= &quot;item&quot;'>
    <style type="text/css">
    #blog-pager{clear:both;position:absolute;bottom:0;left:0}.blog-feeds{display:none}.post{height:auto;width:100%;padding:0!important;margin:0 0 30px;display:inline-block;text-decoration:none}h3.post-title a{font:bold 95% &#39;Open Sans Condensed&#39;,sans-serif;text-transform:uppercase;padding:0;color:#fff;text-shadow:3px 2px 2px #222;}h3.post-title,.comments h4{margin:0!important;text-align:center;padding:10px 0;position:absolute;top:10px;width:100%;z-index:200}.post-header{display:none}.date-header{visibility:hidden;height:0!important;width:0!important;padding:0!important;margin:0!important}.posts-thumb{width:100%;height:auto;overflow:hidden;clear:both}.post-body{overflow:hidden;position:relative}.post-body a{text-decoration:none}.post-body img{display:block;width:auto;height:auto;max-width:100%;max-height:none;min-width:100%;min-height:auto;margin:0;padding:0;border:none;outline:none;position:relative}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:120% &#39;Open Sans Condensed&#39;,sans-serif;padding:84px 10% 0;left:0;position:absolute;text-align:center;vertical-align:bottom;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;z-index:10;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1}.post-footer{display:none}a.comment-bubble{color:#fff;text-decoration:none;font:120% &#39;Open Sans Condensed&#39;,sans-serif;right:5px;z-index:222;position:absolute;top:5px;text-shadow:1px 2px 1px #333;}a.comment-bubble:before{content:url(https://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/s1600/heart-active.png);}.main-inner .column-center-inner{-moz-column-count:3;-moz-column-gap:1px;-webkit-column-count:3;-webkit-column-gap:1px;column-count:3;column-gap:1px;width:100%;padding:0!important}
    </style></b:if></b:if>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
    
    

  8. Salve o modelo
Se você utiliza um template personalizado no seu blogger, pode ser que esse tutorial não funcione corretamente. Neste caso volte o backup que você fez antes de iniciar o processo e seu blog voltará como era antes de fazer esse tutorial.

É isso, se deu tudo certo, a implementação do formato Grid tem seus prós e contras, porém as vantagens que ele oferece para o seu blog compensa as desvantagens.

Dúvidas? deixe um comentário abaixo

6 de setembro de 2017

Widget Tempo de Leitura nas Postagens do Blogger

Um recurso a mais para o seu blog. Trazemos hoje esse widget para ser colocado nas postagens do Blogger, ele serve para marcar quanto tempo o visitante vai levar para ser a sua postagem.

Eu já utilizo esse script há alguns meses aqui no blog e funciona perfeitamente. O que ele faz é ler todo o seu artigo e calcular o tempo aproximado que o usuário vai levar para ler a postagem.


Houve muitos pedidos para eu trazer esse tutorial, é bem simples, mas siga com bastante atenção!

Adicionar tempo de leitura nas postagens do Blogger

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 <span class='post-timestamp'> você encontrará mais de um, no segundo trecho encontrado, adicione o seguinte códigologo após o fechamento:
  3. 
    <b:if cond='data:blog.pageType == "item"'>
    <span class='time-read'>
    <i class='fa fa-clock-o'/> Tempo de leitura: <span class='eta'/>
    </span>
    </b:if>
    
    
  4. Agora procure por </body> e acima cole:
  5. 
    <script src='https://cdn.rawgit.com/ebrahimpleite/cb_cdn/master/TempoLeitura.js'/>
    
    
  6. Salve o modelo
Obs. Caso o ícone do relógio não apareça, adicione a biblioteca de ícones antes do </body>

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

Pronto, agora suas postagens vão estimar o tempo de leitura.

Dúvidas? deixe um comentário abaixo

1 de setembro de 2017

Adicionar Widget Compartilhar Posts com Contador no Blogger

Um widget para compartilhar posts é muito importante em um Blogger, além de aumentar o tráfego do seu site, melhora o posicionamento do mesmo.


Neste tutorial vou ensinar como colocar um widget moderno e funcional em seus posts do blogger. É o mesmo da imagem acima.

Para adicionar, vamos usar um plugin chamado donReach Social Tools, esse plugin é fácil de usar, personalizar, responsivo e o melhor: GRATUITO! Além de ter um design agradável fazendo com que os visitantes compartilhem mais seus posts.

Como adicionar Widget Compartilhar com Contador no Blogger

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 blog desejado e clique em Editar HTML, clique sobre o editor e tecle CTRL+F e procure por ]]></b:skin> logo acima cole:
  3. 
    /* CodigosBlogger Widget Compartilhar */
    .don-share .don-share-total .don-count {
    font-size: 40px !important;
    text-align: center !important;
    font-weight: 600 !important;
    color: #86898d !important;
    border-right: 1px solid #eee !important;
    padding-right: 18px !important;
    margin-right: 20px !important;
    margin-bottom: 0 !important;
    padding-top: 15px !important;
    }
    .don-share .don-share-total .don-count:after {
    line-height: 30px !important;
    color: #a6a6a6 !important;
    font-weight: 300 !important;
    font-size: 12px !important;
    text-transform: capitalize !important;
    content: "Compartilhe!" !important;
    }
    .don-btn {
    background-image: none !important;
    box-shadow: none !important;
    }
    .don-share i {
    font-size: 16px !important;
    }
    .don-share .don-share-total:after {
    display: none !important;
    }
    .don-share .don-share-total {
    margin: 0 !important;
    }
    .don-share {
    padding: 10px 0 0 20px!important;
    } 
    [class*=' don-share-'], [class^=don-share-]{
        margin-top: 15px !important;
    }
    
    
  4. Agora procure por <data:post.body/> (normalmente é no segundo trecho encontrado) e logo acima cole:
  5. 
    <b:if cond='data:blog.pageType == "item"'>
    <div class='don-share' data-limit='3'>
      <div class='don-share-total'/>
      <div class='don-share-facebook'/>
      <div class='don-share-twitter'/>
      <div class='don-share-pinterest'/>
    </div>
    </b:if>
    
  6. Procure por </body> e logo acima cole:
  7. 
    &lt;script type=&#39;text/javascript&#39;&gt;
    (function() {
    var dr = document.createElement(&#39;script&#39;);
    dr.type = &#39;text/javascript&#39;; dr.async = true;
    dr.src = &#39;http://codigosblogger-com.umbler.net/js/shareCodigosBlogger.js&#39;;
    (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dr);
    })();
    &lt;/script&gt;
    
  8. Salve o Modelo
Pronto, agora seus posts tem um compartilhador totalmente moderno e com contador.

Dúvidas? deixe seu comentário abaixo
5 estrelas - baseado em 759 votos

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