Colocar Anúncio Responsivo e Flutuante no blog
Olá, amigos leitores!
Algumas pessoas criam blog/site apenas por hobby, mas com o passar do tempo, aquele blog/site começa a gerar milhares visitas. Com isso, vem a ideia de querer monetiza-lo, ou seja, ganhar dinheiro com seu hobby, colando anúncios de pessoas que pagam para isso. E hoje, irei mostrar a vocês como colocar anúncio responsivo e flutuante no blogger, com a opção: "close".
1. Vá para o blogger > Modelo > Editar HTML > Em seguida, copie o código abaixo e cole antes de </body>
2. Agora, altere:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPqwkSco0hOVagcqGxjj2NuhOYYfkjSoDsj4sbVpHSmFwMKSzqBvcehiLEYeMKvchw_Trf9ZdfaySWqYMW8yVUYlm6IP81eQyPf8U_9lZp1TDbxWNXJEBV6wHUTUMM2w4zbyNmf9Szvj6M/s1600/arlina-tea.png
pela imagem que desejar. É imprtante que a imagem seja responsiva, ou seja, ela deve se adaptar a versão mobile.
3. Feito isso, salve e veja o resultado.
Algumas pessoas criam blog/site apenas por hobby, mas com o passar do tempo, aquele blog/site começa a gerar milhares visitas. Com isso, vem a ideia de querer monetiza-lo, ou seja, ganhar dinheiro com seu hobby, colando anúncios de pessoas que pagam para isso. E hoje, irei mostrar a vocês como colocar anúncio responsivo e flutuante no blogger, com a opção: "close".
 |
| Colocar Anúncio Responsivo e Flutuante no blogger |
Veja o tutorial de como colocar anuncio flutuante e responsivo no blog.
1. Vá para o blogger > Modelo > Editar HTML > Em seguida, copie o código abaixo e cole antes de </body>
<script type='text/javascript'>
$(document).ready(function() {$('img#closed').click(function(){$('#bl_banner').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('fixedban').style.display = 'none';' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbETvjNRZEbVN-JTwVMV24reFLwc8pzN8D1ZHYZBDiMaJ_do1TGhaZDmBVPP4zGq3Xg2p2cL9N11WNvrD6fI5eEvRCOF9VUEWLhY_iih6aRZP5xRdDXcNKunoyScTQ8o5S3t_djQnhNtQO/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'>
<a href='#' title='Banner iklan disini'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner iklan disini' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPqwkSco0hOVagcqGxjj2NuhOYYfkjSoDsj4sbVpHSmFwMKSzqBvcehiLEYeMKvchw_Trf9ZdfaySWqYMW8yVUYlm6IP81eQyPf8U_9lZp1TDbxWNXJEBV6wHUTUMM2w4zbyNmf9Szvj6M/s1600/arlina-tea.png'/></a>
</div>
</div>
2. Agora, altere:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPqwkSco0hOVagcqGxjj2NuhOYYfkjSoDsj4sbVpHSmFwMKSzqBvcehiLEYeMKvchw_Trf9ZdfaySWqYMW8yVUYlm6IP81eQyPf8U_9lZp1TDbxWNXJEBV6wHUTUMM2w4zbyNmf9Szvj6M/s1600/arlina-tea.png
pela imagem que desejar. É imprtante que a imagem seja responsiva, ou seja, ela deve se adaptar a versão mobile.
3. Feito isso, salve e veja o resultado.