🚫 Como Instalar um Script Anti-Adblock no Blogger (E Proteger sua Receita)

Se você monetiza seu blog com anúncios (como o Google AdSense), sabe que os Adblockers são um desafio constante. Estudos mostram que uma parcela significativa dos leitores usa bloqueadores, o que impacta diretamente sua receita.

Pensando nisso, criamos um método simples e robusto para implementar um script anti-adblock no seu Blogger. Este script detecta o bloqueio de anúncios e exibe um pop-up amigável, solicitando ao leitor que desative a extensão para visualizar o conteúdo.

Siga este passo a passo para instalar o código em seu tema.

Passo 1: Adicionar o Estilo (CSS) do Pop-up

O CSS define a aparência e o posicionamento do modal (o pop-up) que aparecerá quando um Adblocker for detectado.

Acesse o Painel do Blogger.
Vá em Tema e clique em Personalizar.
Vá em Avançado e selecione Adicionar CSS.

Cole o código CSS abaixo na caixa.

CÓDIGO CSS (Passo 1)

/* Estilo do modal Anti-Adblock */
#adblock-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    display: none;
    place-items: center;
    font-family: Arial, sans-serif;
    text-align: center;
}
#adblock-modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 400px;
    margin: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
#adblock-modal-content h3 {
    color: #e65151; 
    margin-top: 0;
    font-size: 1.5em;
}
/* Transição para suavizar o desfoque do conteúdo */
.post-body, .post-wrapper, .entry-content {
    transition: filter 0.3s ease-in-out;
}

Clique em Salvar.

Passo 2: Inserir a Estrutura HTML do Modal

Agora, adicionaremos a estrutura do pop-up. É crucial que ela seja inserida em um local estratégico para que o JavaScript consiga ativá-la.

No Painel do Blogger, vá em Tema.
Clique no menu de três pontos ao lado de "Personalizar" e selecione Editar HTML.
Use CTRL + F (ou CMD + F no Mac) e procure pela tag de abertura do corpo do site: <body>.

Cole o código HTML abaixo LITERAMENTE logo após a tag <body>.

CÓDIGO HTML (Passo 2)

        <div id="adblock-modal-overlay">
    <div id="adblock-modal-content">
        <h3>🚨 Bloqueador de Anúncios Detectado!</h3>
        <p>Agradecemos seu interesse em nosso conteúdo!</p>
        <p>Pedimos gentilmente que <strong>desative o seu Adblocker</strong> para o nosso site. Os anúncios nos ajudam a manter o conteúdo gratuito e de qualidade.</p>
        <p style="color: #555555; font-size: 0.9em;">Após desativar, por favor, recarregue a página.</p>
        
        <button onclick="window.location.reload();" style="background-color: #007bff; border-radius: 4px; border: none; color: white; cursor: pointer; margin-top: 15px; padding: 10px 20px;">
            Recarregar Página
        </button>
    </div>
</div>

Mantenha a página aberta e vá para o próximo passo.

Passo 3: Implementar o Script de Detecção (JavaScript)

O JavaScript é o motor da ferramenta. Ele tenta carregar o script principal do AdSense e, se o carregamento falhar, ativa o modal.

Ainda na tela Editar HTML, use CTRL + F e procure pela tag de fechamento do corpo do site: </body>.

Cole o código JavaScript abaixo LITERAMENTE ANTES da tag </body>.

CÓDIGO JAVASCRIPT (Passo 3)

        <script>
// <![CDATA[
function checkAdBlocker() {
    const modalOverlay = document.getElementById('adblock-modal-overlay');
    // **IMPORTANTE:** Caso o modal não desfoque seu post, ajuste os seletores abaixo (post-body, post-wrapper, etc.)
    const postBody = document.querySelector('.post-body, .post-wrapper, .entry-content');
    
    // Tenta carregar o script principal do AdSense
    const adScript = document.createElement('script');
    adScript.type = 'text/javascript';
    adScript.async = true;
    adScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    
    // Se o carregamento FALHAR (onerror), o AdBlocker está ativo
    adScript.onerror = function() {
        // 1. Bloqueia a rolagem da página
        document.body.style.overflow = 'hidden';
        
        // 2. Tenta escurecer o conteúdo principal
        if (postBody) {
             postBody.style.filter = 'blur(3px)';
             postBody.style.pointerEvents = 'none';
        }
        
        // 3. Mostra o modal de alerta
        if (modalOverlay) {
            modalOverlay.style.display = 'grid'; 
        }
    };
    
    // Insere o script de teste no DOM para acionar a detecção
    const firstScript = document.getElementsByTagName('script')[0];
    firstScript.parentNode.insertBefore(adScript, firstScript);
}
// Executa a verificação após a janela carregar
window.onload = checkAdBlocker;
// ]]>
</script>

Clique em Salvar Tema.

Passo 4: Teste Final

Para ter certeza de que tudo está funcionando:

Abra seu blog em um navegador onde o Adblocker (uBlock Origin, AdBlock Plus, etc.) esteja ATIVO.
Aguarde 1 ou 2 segundos. Se a instalação foi feita corretamente, o conteúdo do post deve ficar levemente desfocado e o pop-up deve aparecer, bloqueando a interação com a página.

Se o pop-up não aparecer, volte ao Passo 3 e verifique se o script foi colado corretamente antes do </body>!

Com esta solução, você garante que seus leitores estejam cientes do valor que os anúncios trazem e protege sua principal fonte de renda. Boa sorte com a publicação!