Barra anuncio fija sobre el pie del blog

Podría usarse para anunciar o destacar cualquier cosa que necesitemos ante nuestras visitas.

En este ejemplo colocaremos un mensaje animando a suscribirse al feed, que se mostrará sobre la parte inferior del blog y permanecerá fijo aun cuando hagamos scroll, pero que tendrá la posibilidad de ocultarse con un simple click.

[1] Una vez logueados en nuestro panel de Blogger, nos situamos en la pestaña de "Edición Html" y localizamos dentro del código (sin expandir artilugios) la etiqueta: ]]></b:skin> y justo sobre ella, pegamos este código CSS:

#ftr_bar {
background:#166D80;
border-top: 3px solid #69A7B4;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
#ftr_bar .left {
float: left;
text-align: center;
font-family: Arial;
font-size: 13px;
font-weight: bold;
font-style: normal;
color: #fff;
width:92%;
}
#ftr_bar .right {
float: right;
text-align: center;
width: 30px;
}
#left_bar a {
background: url(http://img440.imageshack.us/img440/4518/icorsstransthumb1ea9.png) no-repeat;
text-decoration: none;
color: #fff;
padding:5px 0px 5px 30px;
}
#left_bar a:hover {
text-decoration: underline;
color: #fff;
}

[2] Algo más abajo veremos la etiqueta </head> justo antes de esta, colocamos este script:

<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_bar").style.visibility = "hidden";
}
//]]>

</script>

[3] Al final prácticamente del código de la plantilla, veremos la etiqueta </body> y justo sobre ella pegaremos este código:

<div id='ftr_bar'>
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/blogspot/hnBy' target='_blank'>Suscribete y recibe lo ultimo del Escaparate</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='elescaparatederosa.blogspot.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://img229.imageshack.us/img229/1809/closethumb1zd4.png' style='cursor:hand;cursor:pointer;'/></span>
</div>

Modificaciones:
En el paso [1] podemos cambiar el color de fondo de la barra y el color y anchura del borde:

#ftr_bar {
background:#166D80; [Color de fondo aquí]
border-top: 3px solid #69A7B4; [Color y anchura del borde superior de la barra]

Así como la imagen del icono de rss, sustituyendo la url por la de el nuevo icono:

#left_bar a {
background: url(http://img440.imageshack.us/img440/4518/icorsstransthumb1ea9.png)

En el paso [3] cambiamos la url del feed que en el ejemplo es la de mi blog (en color naranja), por la del blog donde vamos a colocar la barra; y el texto (destacado en verde) por el que queramos mostrar.
La url destacada en azul es la del icono de cierre, también puede cambiarse por la de nuestro propio icono.

Podéis ver el resultado en este blog de pruebas.

ElHackerZ