Imagen Flotante con opción de cerrar en Blogger

E

n algunas ocasiones de seguro necesitaremos este truco en nuestro Blog, ya sea para publicitar algo, felicitar a alguien o simplemente saludar  a nuestros seguidores en días festivos como Fiestas Patrias, Navidad, Fin de Año,etc,etc.Click aqui para ver el resultado en mi blog de intercambio.

Clic en el enlace para visualizar el efecto: Vista previa

Entonces manos a la obra : abrimos nuestra cuenta de Blogger y vamos a Plantilla / Edición HTML y  antes de <\head> copia y pega esto:

<script type='text/javascript'>
//<![CDATA[
var ftr_arr = new Array();
var ftr_clear = new Array();
function ftrFloat(ftr) {
ftr_arr[ftr_arr.length] = this;
var ftrpointer = eval(ftr_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.ftrsrc = document.all? document.all[ftr] : document.getElementById(ftr);
this.ftrsrc.height = this.ftrsrc.offsetHeight;
this.ftrheight = this.cmode.clientHeight;
this.ftroffset = ftrGetOffsetY(ftr_arr[ftrpointer]);
var ftrbar = 'ftr_clear['+ftrpointer+'] = setInterval("ftrFloatInit(ftr_arr['+ftrpointer+'])",1);';
ftrbar = ftrbar;
eval(ftrbar);
}

function ftrGetOffsetY(ftr) {
var ftrTotOffset = parseInt(ftr.mtasrc.offsetTop);
var parentOffset = ftr.ftrsrc.offsetParent;
while ( parentOffset != null ) {
ftrTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ftrTotOffset;
}
function ftrFloatInit(ftr) {
ftr.pagetop = ftr.cmode.scrollTop;
ftr.ftrsrc.style.top = ftr.pagetop - ftr.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ftr_imagen").style.visibility = "hidden";
}
//]]>

</script>


Luego antes de </body> copia y pega lo siguiente: 

<a href="URL del enlace">
<div id='ftr_imagen'>
<img border='0' class='close' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisbbNsRG2neGlHOn_BtnYLeHxWSH3Um5wBey2vFoaB7XwpVVfsny565hmjjRbovOTe6V3SURUil2s5W_768V9OGTkd1n317yowpRz27DPabWeS11YxLjpp7RrQAJehvAmkkWaIjUvZgW8/s200/iconClose.gif'/>
</div>
</a>

Nota.- la primera  linea que esta de rojo y azul es opcional si quieren ponerle un vinculo a la imagen, si no lo desean simplemente la borran, de ser así también borren el cierre </a>

Para finalizar copiamos y pegamos lo siguiente : antes de   ]]></b:skin>

#ftr_imagen {
background: url(URL de la imagen flotante) no-repeat;
bottom: 0px;
right: 0px;
width: 128px;
height: 128px;
position: fixed;
}
.close {
float: right;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}

Agregamos la URL de la imagen en la linea que esta de azul

Nota.- podras configurar lo siguiente:
Width= ancho
Height= alto
Right (derecha) o Left (izquierda)

También para que no se demoren localizando las etiquetas ejecuten el buscador: CTRL+G ,digitan  </head> y le dan Enter, y en instantes lo buscara por ustedes.