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;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