En 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.
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/AVvXsEjohKLvV_FbWiNSAi6hmQkts-AdBRABf_IyRpjWyIY7Dil0OClZpgPOBm2bAUAcNqRo6fbR-hpJfcwBwUIPXJtNG4bUGiZkWaVV28qS1SeL6K5Ep7drBWwhhZbfq_GCNvN4Y6nll14XTcE/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.
No hay comentarios.:
Publicar un comentario
No se olviden de comentar y sugerir temas.
Recuerden un Blog se alimenta de sus comentarios.