Cómo crear un anuncio o aviso flotante para el blog

Aviso o anuncio flotante que permanece fijo al navegar por el blog

 

 

Artículo publicado en el blog, ya cerrado, El Balcón de Jaime (2007-2011) donde encontramos una gran variedad de trucos de mucha ayuda para los bloggers. Visitar el Balcón de Jaime.

 

ARTÍCULO
Aviso o anuncio flotante que permanece fijo al navegar por el blog

Tras haber visto cómo incluir en el blog un cartel o aviso automático al pie de todas las entradas, descubriremos este otro truco de sencillísima configuración. Se trata de un recuadro que permanece flotando en una esquina del blog y que puede cerrarse con un solo clic.

Puedes ver el resultado en este blog de pruebas, desplazándote a través de la entrada para comprobar que el anuncio "flota" sea cual sea la posición a la que llegues.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el script:

<div id="blanuncio">
<a href="" onclick="blcartel_cierra(); return false"><img title="Cerrar nota" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimwCC3znP6SNf2XyoidMdRpukB6C0zP5su-25ARLhq7bH04-e0WGEf2W22QKxaVkwKln1WT_DAwfq3fV5nIOj-pQygdOU9twh89lWdOQGAkjhyphenhyphen6wwcol0U2uGHzXl2_EbxGHxTCpY08fyk/s320/blcerra.png" border="0" /></a> CONTENIDO AQUI
</div>

<script type="text/javascript">
var blbtn_cerrar=1.1
var blcartl_1 = 30
var blcartl_3="fromtop"
var blcartl_2 = 5
function blcartl_Activo(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function blcartl_nuevo(llamo) {
var blcartel_aparien = llamo + "="
var blcartel_cam = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(blcartel_aparien)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
blcartel_cam=unescape(document.cookie.substring(offset, end))
}
}
return blcartel_cam;
}
function blcartel_cierra(){
if (blbtn_cerrar)
document.cookie="remainclosed=1"
document.getElementById("blanuncio").style.visibility="hidden"
}
function blcartel_posicion(){
barheight=document.getElementById("blanuncio").offsetHeight
var blcartel1 = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var blcartt = document;
function blavis(id){
var bblaviso=blcartt.getElementById(id);
if (!blbtn_cerrar || blbtn_cerrar && blcartl_nuevo("remainclosed")=="")
bblaviso.style.visibility="visible"
if(blcartt.layers)bblaviso.style=bblaviso;
bblaviso.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
bblaviso.x = blcartl_1;
if (blcartl_3=="fromtop")
bblaviso.y = blcartl_2;
else{
bblaviso.y = blcartel1 ? pageYOffset + innerHeight : blcartl_Activo().scrollTop + blcartl_Activo().clientHeight;
bblaviso.y -= blcartl_2;
}
return bblaviso;
}
window.stayTopLeft=function(){
if (blcartl_3=="fromtop"){
var blcartel2 = blcartel1 ? pageYOffset : blcartl_Activo().scrollTop;
ftlObj.y += (blcartel2 + blcartl_2 - ftlObj.y)/8;
}
else{
var blcartel2 = blcartel1 ? pageYOffset + innerHeight - barheight: blcartl_Activo().scrollTop + blcartl_Activo().clientHeight - barheight;
ftlObj.y += (blcartel2 - blcartl_2 - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 6);
}

ftlObj = blavis("blanuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", blcartel_posicion, false)
else if (window.attachEvent)
window.attachEvent("onload", blcartel_posicion)
else if (document.getElementById)
window.onload=blcartel_posicion
</script>
<style type="text/css">
#blanuncio {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2tuhlMvCJKAU7oI7JkjJJSycf9iZxH2oX10oUfrD7gVkPfnRj8BuISwsw-hyXvRAlH9eZEf_912JYYU4J3qovLvF506w5Mp4DN26vCT9bsWfDE3OfXurZiviZCAj7YKaKcvApwQSMD0m1/s320/blfondd.png") repeat scroll left top transparent;
border:1px solid #CCCCCC;
padding:2px;
position:absolute;
visibility:hidden;
width:576px;
z-index:100;}
#blanuncio img {margin-right: 8px;}
#blanuncio a:link, #blanuncio a:hover, #blanuncio a:visited {color: #000000;}</style>

Reemplaza CONTENIDO AQUI por el contenido (texto) que tendrá el anuncio.

Puedes personalizar el ancho que tendrá el recuadro del anuncio editando el valor 576px en la línea resaltada en verde, al final del código.

Para cambiar la imagen de fondo del aviso, borra la línea marcada en azul e inserta la dirección de tu imagen.

Finalmente, si deseas editar la imagen de cierre borra la primera URL del script (resaltada en verde) e introduce la URL de tu icono.

En caso de no saber el procedimiento para obtener la URL de una imagen, accede a esta entrada.

Una vez editados los parámetros, procederemos a guardar el gadget.

Fuente: http://elbalcondejaime.blogspot.com/2010/04/aviso-o-anuncio-flotante-que-permanece.html

Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.