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

• Anúncios que pagam em Bitcoin, as melhores opções para o seu blog
• Como criar anúncios flutuantes no rodapé do site (responsivos)
• Como receber pagamento do Google AdSense sem taxas?

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

É 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