6 de fevereiro de 2017

Notificar usuário com adblock no Blogger

Tags

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



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

Como Notificar Usuário AdBlocker no Blogger

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

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

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

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

Dúvidas? deixe um comentário abaixo.

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

5 comentários

Voce tem algum template para indicar estilo esse seu? É dificil encotrar um template bom para blogger sem a barra lateral.

Olá,

O nosso template é totalmente personalizado, feito por mim mesmo. A barra lateral é bem fácil de tirar nas postagens, basta seguir esse tutorial: http://www.codigosblogger.com/2016/05/como-ocultar-sidebar-nas-paginas.html

Basta descer até o comentário do Flavio Rodrigues que você verá uma resposta minha de como ocultar somente nos posts.

Abs

Eu coloco o codigo acima de /body> e salvo e não aparece nada no site mesmo que o adblock esteja ativado, e percebi que em uma parte do codigo fica vermelh é /p>, e outra parte do codigo -> /div> fica em vermelho. será que tem algum problema com esse trechos, eu apaguei um deles para ver se aparecia mais nada aconteceu.

Muito estranho, pois seguindo todos os passos corretamente, tudo dará certo ;)

Na Versão mobile, o aviso não aparece por completo. Ou seja, ele não está se adaptando ao formato da tela. O aviso não responsável?


Abrir lista de emoticonFechar lista de emoticon