Como adicionar Anúncios Fixos Inferiores Responsivos no Blogger

 Deseja adicionar anúncios RESPONSIVO no final do seu site do Blogger e aumentar a receita no Adsense, então este artigo será super útil para você.

Mas, antes disso, você precisa entender o básico do que são anúncios fixos, diferentes tipos de anúncios fixos e quais são as orientações fornecidas pela equipe do Adsense para a implementação adequada desses anúncios.

O que é um anúncio fixo?

Um anúncio fixo é um anúncio fixo que permanece visível exatamente na mesma posição, independentemente da rolagem do usuário pelo conteúdo. Eles geralmente são usados no cabeçalho, rodapé, barra esquerda / direita, barra lateral esquerda e direita.

Tipos de anúncios fixos

Anúncios fixos são amplamente divididos em duas categorias. Por exemplo. Horizontal vertical.

Anúncios horizontais são geralmente colocados no cabeçalho e rodapé de um site e geralmente são espalhados de uma extremidade a outra na forma de paisagem.

Os anúncios âncora que obtemos na seção "anúncios automáticos" do Adsense são um exemplo de anúncio fixo horizontal.

Anúncios fixos verticais são geralmente colocados na barra lateral de um site e, em alguns casos, fora dela. Eles são projetados de forma que fiquem na barra lateral mesmo que o usuário role a página para baixo

Benefícios do uso de anúncios fixos no Blogger

Anúncios fixos são uma ótima maneira de aumentar sua receita do Google AdSense, pois aumentam a impressão geral e a taxa de cliques [CTR] de seu website, além de melhorar seu valor de CPM com o tempo.

Aqui estão alguns dados estatísticos que comprovam o ponto acima.

1. CTR 40-60% superior: em comparação com anúncios gráficos normais
2. Melhorar a visibilidade: até 200% mais visível do que outros formatos nos mesmos canais.
3. CPM 30-70% mais alto: os anunciantes gastam mais com esses anúncios.

Também discutiremos as diretrizes para colocar anúncios fixos no Blogger, mas antes disso vamos entender como você pode adicionar anúncios fixos de rodapé ao seu site.

Antes de prosseguir com as etapas abaixo, certifique-se de fazer um backup do seu tema, para que, se você fizer algo errado, você possa restaurar facilmente o seu site à sua posição original, carregando o arquivo de backup.

Como criar anúncio flutuante responsivo no Blogger

Para adicionar um anúncio aderente na parte inferior do Blogger, siga as etapas abaixo.

Etapa 1: copie o código CSS abaixo e cole-o logo acima deste]]> </ b: skin> código ou cole-o na seção CSS adicional do seu tema

Copie o código CSS abaixo

.AT-ads { position: fixed; bottom: 0; left: 0; width: 100%; min-height: 70px; max-height: 200px; padding: 5px 0; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fefefe; z-index: 20; } .AT-ads-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: -30px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); } .AT-ads .AT-ads-close svg { width: 22px; height: 22px; fill: #000; } .AT-ads .AT-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }

Para isso, vá para a seção Tema e clique em personalização. Agora, na guia avançada, pesquise a seção Adicionar CSS. Agora cole o código CSS e salve seu tema.

Etapa 2: agora vá para o Adsense e crie um bloco de anúncios de display responsivo.

Agora copie o código data-ad-client e data-ad-slot do bloco de anúncios gráficos.

Etapa 3: copie o código HTML abaixo e substitua os dois códigos que você copiou acima

Código HTML para anúncio de rodapé fixo

<div class='AT-ads jhfdiuh0' id='AT-ads'>

<div class='AT-ads-close' onclick='document.getElementById(&quot;AT-ads&quot;).style.display=&quot;none&quot;'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>

<div class='AT-ads-content'>

<ins class="adsbygoogle"

     style="display:inline-block;height:70px;width:100%;line-height:70px;"

     data-ad-client="ca-pub-xxxxxxxxxxx"

     data-ad-slot="xxxxxxxxxxx"></ins><script>

     (adsbygoogle = window.adsbygoogle || []).push({});

</script>

</div>

  </div>

Etapa 4: agora cole o código logo acima da tag </body> do seu tema e salve-o.

Agora você adicionou com êxito os Anúncios de fundo flutuante responsivo ao site do Blogger.

Diretrizes para adicionar anúncios fixos a um site

• Deve cobrir menos de 30% da tela a qualquer momento.
• Um adesivo vertical por janela de visualização
• Um adesivo horizontal por página
• Sem movimentos associados ao cursor (o anúncio aderente deve permanecer imóvel)
• Muitos espaços em branco / limite entre o anúncio e o conteúdo, para que seja distinguível do conteúdo.

• De acordo com o Google, os anúncios fixos não devem ser implementados em sites de jogos e páginas com rolagem infinita para fornecer uma melhor experiência do usuário.

Conclusão

Anúncios fixos horizontais na parte superior e inferior funcionam bem em dispositivos móveis e os anúncios fixos verticais funcionam bem na área de trabalho. Mas não use anúncios fixos e anúncios fixos na parte inferior ao mesmo tempo, pois isso pode criar uma experiência ruim para os leitores.

Espero que este guia ajude você a adicionar um Sticky Ad de fundo flutuante responsivo ao site do Blogger. Se você gostou deste guia, não se esqueça de compartilhá-lo com seus amigos e entrar em nosso canal do Telegram para mais atualizações.