Como Instalar Anuncios Adhesivos en Blogger

En la actualidad ver anuncios adhesivos dentro de un blog se a vuelto común entre los blogger o sitios web que desean destacar espacios publicitarios en una barra adhesiva.

Estos bloques adhesivos a menudo lo encontramos en sitios populares o sitios web que brindan espacios publicitarios con el propósito de obtener trafico de visitas al destacar un enlace de publicidad en un determinado lugar.

Cualquier bloque adhesivo instalado en su sitio web debe tener un botón de cierre en el contenido del bloque adhesivo para que no resulte invasivo para los visitantes del blog.

En este tutorial aprenderemos a como colocar un bloque de publicidad ya sea para usar un banner con un enlace url especifico o para utilizarlo como bloque de anuncios de alguna plataforma que nos paga por colocar su publicidad como Adsterra, Adsense, entre otros.

Tenemos 2 opciones para colocar bloques adhesivos de publicidad en blogger:

1º Anuncios Adhesivos con Banner.  Abrir Blogger / Tema / Editar HTML aquí debemos buscar el código de cierre </body> y agregar arriba el siguiente código:

<style type='text/css'>
.stickywrap{width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:9999}
.stickyzone{text-align:center;display:block;max-width:970px;height:auto;overflow:hidden;margin:auto}
.stickyzone img{max-width:100%;height:auto;vertical-align:middle}
.stickyclose{cursor:pointer;text-align:center}
</style>
<script type='text/javascript'>
$(document).ready(function({$('img#closed').click(function(){$('#bl_banner').hide(90);});});
</script>
<div id='stickyb' class='stickywrap'>
<div><a id='close-stickyb' onclick='document.getElementById(&apos;stickyb&apos;).style.display = &apos;none&apos;;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVDNPx2yCnZVjk1j593IGGl2d-rI1Kcd3-ESvk5VHcwbi7XGwkM2jbCUEEkghsGU8iste-SCcDroNkQt4dZQs261cpoq3T71ytvWJe8n1I89rgBLhhdWrgTSoWPzdpzOeMJ0SE1WTD-Er7L7lBai-M9IoRG9HAGEU3Fxai1M5pBJ1MpW2GeEmDYOVmI0Xl/s1600/sevenclose.png' title='Close this ad' class='stickyclose'/></a></div>
<div class='stickyzone'>
<a href='URL-ENLACE' rel='nofollow' target='_blank' title='NOMBRE-ANUNCIO'><img alt='NOMBRE-ANUNCIO' src='URL-IMAGEN'/></a>
</div>
</div>

Editar las secciones resaltadas con Mayúsculas y ajustarla a su blog. Después de eso, guardar los cambios y ver resultado.

URL ENLACE: Aquí colocar el enlace url del anuncio.

NOMBRE ANUNCIO: Aquí colocar el nombre del anuncio.  

URL IMAGEN: Aquí colocar el enlace url de la imagen del banner.

2º Anuncios Adhesivos de Plataformas de publicidad, Abrir Blogger / Tema / Editar HTML aquí buscar el código de cierre </body> y agregar arriba el siguiente código:

<style type='text/css'>
.stickywrap{width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:9999}
.stickyzone{text-align:center;display:block;max-width:970px;height:auto;overflow:hidden;margin:auto}
.stickyzone img{max-width:100%;height:auto;vertical-align:middle}
.stickyclose{cursor:pointer;text-align:center}
</style>
<script type='text/javascript'>
$(document).ready(function({$('img#closed').click(function(){$('#bl_banner').hide(90);});});
</script>
<div id='stickyb' class='stickywrap'>
<div><a id='close-stickyb' onclick='document.getElementById(&apos;stickyb&apos;).style.display = &apos;none&apos;;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVDNPx2yCnZVjk1j593IGGl2d-rI1Kcd3-ESvk5VHcwbi7XGwkM2jbCUEEkghsGU8iste-SCcDroNkQt4dZQs261cpoq3T71ytvWJe8n1I89rgBLhhdWrgTSoWPzdpzOeMJ0SE1WTD-Er7L7lBai-M9IoRG9HAGEU3Fxai1M5pBJ1MpW2GeEmDYOVmI0Xl/s1600/sevenclose.png' title='Close this ad' class='stickyclose'/></a></div>
<div class='stickyzone'>
<a href='URL-ENLACE' rel='nofollow' target='_blank' title='NOMBRE-ANUNCIO'><img alt='NOMBRE-ANUNCIO' src='URL-IMAGEN'/></a>
</div>
</div>

Para colocar un bloque de anuncios de plataformas de publicidad externas como Adsense, Adsterra entre otros elimine la sección del código "<a href='URL ENLACE' title='NOMBRE ANUNCIO'><img alt='NOMBRE ANUNCIO' src='URL IMAGEN'/></a>" y reemplácela por el bloque de anuncios de su plataforma de publicidad. El código de publicidad debe estar 👉 Perseado a XML antes de ser implementarlo en su diseño HTML. Luego hacer clic en guardar cambios y ver los resultados en el blog.