Como instalar una barra flotante en el blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

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.