31 de janeiro de 2018

Como ativar o Ads.txt no Blogger

Recentemente o Google apresentou a versão beta do Search Console, que conta agora com um novo recurso chamado de Ads.txt. E vamos aprender agora a adicionar o Ads.txt no Blogger.


O que é Ads.txt?

O Ads.txt é uma iniciativa do Interactive Advertising Bureau Tech Lab (IAB) para melhorar a transparência na publicidade programática. Os editores podem criar seus próprios arquivos ads.txt para identificar quem está autorizado a vender os inventários deles. Os arquivos são rastreáveis e disponibilizadas publicamente para compradores, fornecedores de terceiros e trocas.



No Blogger esta opção de Ads.txt já existia, mas agora você pode editar o Ads.txt da forma que você quiser ou se estiver recebendo uma mensagem como esta:

Seus ganhos estão em risco - Um ou mais de seus arquivos ads.txt não contém o ID do editor AdSense. Corrija esta questão agora para evitar ter um impacto sério em sua receita.

No painel do Google Adsense, é sugerido que você ative o Ads.txt.

Como ativar o Ads.txt no Blogger?

  1. Acesse o Painel do Blogger
  2. Vá até Configurações > Preferências de pesquisa > Monetização > Ads.txt personalizado
  3. Em seguida, clique em Editar, selecione Sim e preencha-o da seguinte forma:
  4. google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0
Substitua o pub-0000000000000000 por seu ID do Adsense e clique em Salvar alterações.



O ID do Adsense pode ser encontrado no painel do Google Adsense, como na imagem abaixo.


Pronto, se quiser verificar a ativação do Ads.txt no seu blog, basta acessar http://www.seublog.com/ads.txt

Dúvidas? deixe um comentário abaixo.

29 de janeiro de 2018

Widget Artigos Relacionados Fixo na Lateral do Blog

Instalar um Widget de artigos relacionados é muito importante para um blog, pois irá chamar a atenção do usuário para continuar navegando e gerando mais tráfego. Pensando nisso, este widget que compartilho hoje é muito lindo e discreto.


O funcionamento deste widget é quase o mesmo que o widget comum de artigos relacionados instalado abaixo do post, o que trará alguns artigos relacionado ao título do artigo.


Instalando o Widget 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 > Editar HTML clique sobre a caixa e tecle CTRL + F e procure por ]]></b:skin> e imediatamente acima do trecho encontrado, adicione o código abaixo:
  3. 
    /* Widget Artigos Relacionados Fixo By CodigosBlogger.com */
    #chslidingbox{background:#fff;width:100%;max-width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out}
    .chslidingbox-title{background:#9eb2c0;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
    .chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
    a#chslidingbox-close,a#chslidingbox-close{margin-right:15px}
    .chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}
    .chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
    .chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0}
    .chslidingbox-container >div >span{font-size:14px}
    .show{bottom:84px}
    .hide{bottom:-145px}
    .related-post{font-size:70%}
    .related-post h4{font-size:150%;margin:0 0 .5em}
    .related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none}
    .related-post-style-2 li{padding:0 10px 10px 10px;overflow:hidden}
    .related-post-style-2 li:first-child{border-top:none}
    .related-post-style-2 .related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0}
    .related-post-style-2 .related-post-item-title{font-weight:700;font-size:130%;line-height:normal}
    a.related-post-item-title{color:#95a5a6;transition:all .4s ease-out}
    a:hover.related-post-item-title{color:#2ecc71;text-decoration:none}
    .related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}
    
    
  4. Em seguida, copie o código abaixo antes de </body>
  5. 
    <b:if cond='data:blog.pageType == "item"'>
    <script type='text/javascript'>
    //<![CDATA[
    $(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{right:"0px"}:{right:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
    //]]>
    </script>
    </b:if>
    
  6. Em seguida encontre o trecho <data:post.body/> e imediatamente abaixo do trecho encontrado, cole o código abaixo:
  7. 
    <b:if cond='data:blog.pageType == "item"'>
    <div class='show' id='chslidingbox'>
        <div class='chslidingbox-title chslidingbox-www'>
          <span style='float:left;margin:0 15px;'>Recomendamos também</span>
            <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>×</a></span>
            <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>−</a></span>
            <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>+</a></span>
        </div>
        <div class='chslidingbox-container'>
    <div class='related-post' id='sliding-tab'/>
    <script type='text/javascript'>
    var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
    "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop></b:if>];
    var relatedPostConfig = {homePage: "<data:blog.homepageUrl/>",widgetTitle: "<h4></h4>",numPosts: 2,summaryLength: 0,
    titleLength: "auto",thumbnailSize: 45,noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId: "sliding-tab",newTabLink: true,moreText: "",widgetStyle: 2,callBack: function() {}};
    </script>
    <script src='https://cdn.rawgit.com/ebrahimpleite/cb_cdn/master/wdfixorecomendadoscb.js' type='text/javascript'/>         
    </div>
    </div>
    </b:if>
    
Opcional. SE preferir, ou caso não funcione o 4 passo, você pode adicionar o mesmo código acima do trecho </b:includable>, ficando assim:

<b:includable id="post" var="post">
...
...
...
<!-- CÓDIGO AQUI -->
</b:includable>

Alterar a quantidade de postagens exibidas no Widget

numPostos: 2: Número de postagens que serão exibidas no widget.

Salve o modelo e veja os resultados.

Dúvidas? deixe um comentário abaixo

21 de janeiro de 2018

3 Passos para ativar o HTTPS no Blogger [Método Nativo]

Há alguns dias atrás postei aqui no blog como adicionar o certificado SSL em seu domínio personalizado usando o CloudFlare. Pois bem! O fato é que o Blogger vem testando a liberação desse recurso no Draft Blogger e já pode ser solicitado e ativado por quem prefere não utilizar o Cloud Flare.


Veja também:
Motivos para usar o CloudFlare no Blogger

Como solicitar o HTTPS Nativamente no Blogger

  1. Acesse o Draft Blogger
  2. Vá até Configurações do seu blog desejado e na aba Básico em HTTPS clique em habilitar o HTTPS conforme na imagem abaixo.
  3. Aguarde alguns minutos e atualize a página novamente.
Se tudo der certo, a mensagem em amarelo irá sumir e o seu blog já estará funcionando o HTTPS. Após a ativação, marque também a opção de Redirecionamento para HTTPS como SIM.

Dúvidas? deixe um comentário abaixo

11 de janeiro de 2018

Habilitar HTTPS em domínio personalizado no Blogger com CloudFlare [Grátis]

Neste tutorial você vai aprender como habilitar o HTTPS (SSL) no seu domínio personalizado no Blogger e aumentar o seu tráfego orgânico nos buscadores.


Como sabemos, por padrão, o Blogger não permite a ativação do HTTPS em domínios personalizado. Para que isso funcione, vamos precisar adicionar o nosso blog no CloudFlare. Mas não precisa ficar receoso, já que o CloudFlare é uma plataforma CDN 100% segura muito utilizada no mundo todo e ainda ajuda muito na otimização de um blog.

O que é CloudFlare?

O CloudFlare é um serviço de CDN que cria uma cópia em cache do seu site e distribui ela por centenas de servidores ao redor do mundo, reduzindo a carga no seu servidor principal primário e aumentando a velocidade de carregamento das suas páginas enviando elas a seus visitantes a partir do servidor proxy mais próximo dele. Com o CloudFlare ativo as suas páginas poderão abrir até 30% mais rápidas do que o habitual, além de garantir que o seu site permaneça online, mesmo que o servidor primário falhe.

Benefícios de usar CloudFlare no Blogger

  • O blog carrega até 30% mais rápido
  • Utiliza até 60% menos de transferência mensal
  • Tem até 65% menos de pedidos
  • Protege contra ataques maliciosos
  • Ativa HTTPS (SSL) grátis no blogger

Adicionar blog no CloudFlare e ativar SSL no domínio personalizado

Antes de tudo entenda que o procedimento pode demorar até 48 horas para fazer efeito.

Crie uma conta no CloudFlare e uma vez criada a conta, basta adicionar o seu blog, siga os passos nas imagens abaixo.

Adicione o endereço do seu blog e clique em Scan DNS Records. Ele vai escanear todo o DNS do seu blog e te fornecer novas entradas Nameserver para substituir, isso servirá para que o CloudFlare se comunique com o seu blog.

Após ele Escanear, prossiga clicando em Continue. Após isso ele fornecerá novos entradas Nameserver para você adicionar.

Você terá que alterar o seu Nameserver na empresa onde registrou o domínio, por exemplo se for na Registro.br você vai entrar no painel e clicar em Alterar Servidores DNS.


E após clicar ali, se ainda não tiver nenhum informado, clique em Informar servidores DNS e informe as entradas que o CloudFlare forneceu.


Pronto agora aguarde até 2 horas para propagar os registro e volte ao CloudFlare e clique em Recheck Nameservers e se ocorrer tudo bem, o CloudFlare ficará verdinho e passará para o status de Ativo.


Com o CloudFlare ativo, agora vamos ativar o SSL.

No CloudFlare, clique na aba Crypto e vá até Automatic HTTPS Rewrites e marque como On.


Acesse agora a aba Page Rules e vamos adicionar duas rotas, para isso clique em Create Page Rule:


A primeira será "http://www.seublog.com.br/*" e a baixo clique em + Add Seting e selecione Always Use HTTPS, depois marque Salve and Deploy.


A segunda será "http://seublog.com.br/*" e a baixo clique em + Add Seting e selecione Always Use HTTPS, depois marque Salve and Deploy. Mesma coisa do primeiro porem sem o "WWW".

Pronto agora é só aguardar até 24 horas para surgir efeito.

É importante verificar o código fonte do seu template para ver se não existe nenhuma imagem ou link Javascript em HTTP sendo usada no código, pois com o protocolo SSL ativo, todas as imagens usadas no template, deverá ser HTTPS para manter a segurança.

Agora você tem um blog mais otimizado com o CloudFlare.

Dica Extra:
Para Otimizar o seu blog com o CloudFlare, clique na aba Speed e marque todas as opções do Auto Minify.


Se você chegou até aqui, Parabéns! Seu blog está muito mais otimizado agora e seguro com Certificado SSL 100% grátis e não precisa mais se preocupar.

Dúvidas? deixe seu comentário abaixo.

29 de dezembro de 2017

Adicionar Botão do Pinterest nas Imagens do Blogger

Com este tutorial você conseguirá colocar um botão de Salvar do Pinterest nas imagens de seus posts. A função deste script é ler as imagens que você publicar e adicionar o botão do Pinterest automaticamente ao passar o mouse.


Como adicionar o Botão do Pinterest nas imagens do Blogger

O truque é bem fácil e rápido de ser implementado no Blogger.

  1. Acesse o Painel do Blogger
  2. Vá até Tema > Editar HTML do seu blog desejado, clique sobre o Editor e tecle CTRL+F5 e procure por </body> e imediatamente acima do trecho cole:
    
    <script async='' data-pin-color='white' data-pin-hover='true' src='//assets.pinterest.com/js/pinit.js'/>
    
    
  3. Salve o modelo
Pronto, o script já está implementado e provavelmente funcionando em seu blog.

Dúvidas? deixe um comentário abaixo

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;https://cdn.rawgit.com/ebrahimpleite/cb_cdn/7f1c77de/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