Como criar anúncios flutuantes no rodapé do site (responsivos)

Muitas pessoas observaram a crescente utilização do código AdSense em anúncios flutuantes no rodapé em diversos sites, e após isso começou a busca incessante por plugins ou códigos que exibem essa alternativa.

Veja também

A maioria das pessoas inicia um blog como hobby, mas também existe o objetivo de monetizar ele, ganhar dinheiro, dependendo do nicho.

anúncios flutuantes no rodapé como fazer?

É importante observar que antes de aplicar qualquer técnica que prejudique a experiência do usuário observe as Políticas de Anúncios do Google, como mencionado em nosso artigo, Better Ads Standards para todos.

Outra observação importante é que em modo responsivo (em dispositivos mobiles) esse método não pode conflitar com os anúncios automáticos do Google.

Para evitar isso, é preciso simplesmente ir em sua conta Adsense, em anúncios escolher o site, entrar em editar, em seguida desmarcar a opção Âncora, impedindo então que anúncios que ficam fixos na borda da tela do usuário. Clique em Aplicar ao Site.

Configurando anúncios flutuantes no rodapé do site

É importante que esses e qualquer anúncio em banner que “flutuam” devem possuir um botão Fechar explícito. O botão Fechar serve como alternativa para não atrapalhar a experiência do usuário, por estar preso involuntariamente à um conteúdo bloqueado por um banner flutuante.

Veja a seguir o script que permitirá esse tipo de anúncio em seu site entre as tags <meta></meta> do arquivo header.php do seu tema ou no topo do arquivo principal de qualquer outro site.

<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>

A seguir o código que deve ser inserido no final do arquivo footer.php do seu tema do WordPress ou no rodapé do arquivo principal de qualquer outro site.

<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
<div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='http://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'> 
<div>

<!-- O ANUNCIO ENTRA AQUI -->

</div>

O seu código AdSense deve ser configurado como Horizontal Responsivo, caso você for utilizar uma imagem ou outro código, é aconselhável que use o tamanho 728 x 90 pixels.

Repare que o botão fechar está em imagem, e no código acima por esse link:

http://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif

Você pode usar o botão fechar que preferir, no entanto que use, para dar a opção ao usuário de fechar o anuncio como manda as diretrizes do Google.

Gostou do artigo? Deixe suas dúvidas ou sugestões nos comentários abaixo, vai me ajudar muito.

Deixe o seu e-mail abaixo e fique por dentro de todas as dicas e segredos da web em primeira mão

É empreendedor digital, trabalha com tecnologia web, design gráfico, desenvolvimento web e marketing digital

4 COMENTÁRIOS

  1. Fala Edu! Cara, gostei muito desse artigo, estava mesmo a procura desse script. Alguns amigos me falaram que esse tipo de formato só é permitido a alguns tipos de sites. você tem alguma informação sobre isso? Gostaria muito de utilizar esse formato mas agora fiquei com receio. Meu site já tem 3 anos de existência e não quero levar um BAN do Adsense agora! rsrsrs… abraços.

    • Obrigado. Muitos grandes portais usam esse método. Segundo as políticas do Google o anúncio fixo não pode passar de 30% da tela e deve haver o botão fechar explicitamente exibido, mas, por outro lado, existe uma grande discussão sobre a utilização desse método. Ponha na balança para ver se você precisa mesmo desse código junto com os seus outros blocos. Lembre-se, para o Google Menos é mais, dependendo da sua audiência!

  2. Olá amigo! Excelente tutorial, pois era exatamente o que estava procurando. Só fiquei com uma dúvida: o botão fechar, como colocar outro? Vi que o amigo citou o link, mas no código em si ele está em outro formato, certo? Como seria a alteração?

    Grato.

    • Obrigado, e desculpe, o código estava incompleto, agora está retificado com o botão fechar em imagem. Para substituir o botão fechar basta substituir por outro link de imagem.

DEIXE UMA RESPOSTA

Por favor digite seu comentário!
Por favor, digite seu nome aqui