CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

JavaScript/jQuery - Ajustar tamanho de banner

Por Benedito Silva Júnior - publicado em 08/08/2016


O ajuste correto do tamanho dos banners, além de evitar danos ao layout, ajuda a potencializar o alcance dos anúncios de seu site. Sites responsivos pedem banners responsivos!

O código abaixo faz com que banners sejam exibidos de acordo com o tamanho disponível na tela, com o auxílio das Media Queries CSS:

<style> @media(min-width: 10em) { .topo-lucrei { width: 300px; height: 250px; } } @media(min-width: 30em) { .topo-lucrei { width: 320px; height: 100px; } } @media(min-width: 62.5em) { .topo-lucrei { width: 320px; height: 100px; } } @media(min-width: 90em) { .topo-lucrei { width: 728px; height: 90px; } } </style>

Acima configuramos o "topo-lucrei" de acordo com a largura da página.

Abaixo modificamos o script fornecido pelo Google, acrescentando os códigos "ca-pub" e "data-ad-slot" de sua conta no Adsense:

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> <ins class="adsbygoogle topo-lucrei" style="display:inline-block" data-ad-client="ca-pub-1234567891234567" data-ad-slot="1234567890"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo