Blog

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

[jetpack_subscription_form show_only_email_and_button=”true” custom_background_button_color=”undefined” custom_text_button_color=”undefined” submit_button_text=”Subscribe” submit_button_classes=”wp-block-button__link has-background has-luminous-vivid-amber-background-color” show_subscribers_total=”false” ]

Edu Figueiredo

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

Este post tem 9 comentários

  1. Dhyego Petty 27 abr 2020 Responder

    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.

    1. Edu Figueiredo 4 maio 2020 Responder

      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. Wil 4 maio 2020 Responder

    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.

    1. Edu Figueiredo 4 maio 2020 Responder

      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.

  3. Tabets e Smartphones 23 set 2020 Responder

    Ajudou pra caramba amigo já esse formato em grande sites. Me cobraram 150 pra fazer pra mim! Obrigado!

  4. Valmir 31 mar 2021 Responder

    Man muito, muitoo, muitoooo obrigado por compartilhar este código! Procurei por muito tempo. Cara, obrigado de verdade!!!! Parabéns pelo excelente blog!!!!

  5. Daniel 10 fev 2022 Responder

    Tem como fazer ele assim não fechar e sim só esconder em abaixo ?

  6. Lipe 8 abr 2022 Responder

    Obrigado cara, me ajudou muito vlw mesmo

Deixe um comentário

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.