El otro dia, me mando un correo el amigo del blog ZONA-CIENCIA preguntandome como se hacia lo de la cabecera que cambia en este blog. Pues bien, para el y para todos/as vosotros/as os lo voy a explicar en este post. Es algo complejo, pero con un poco de paciencia seguro que os saldra bien. Primero, vamos a la plantilla html y colocamos el siguiente script antes de </head>:
ver el script
<script type="text/javascript">
//<![CDATA[
/*
Image Cross Fade Redux steve@slayeroffice.com
http://slayeroffice.com/code/imageCrossFade/xfade2.html
*/
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,1000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,1000);
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
//]]>
</script>
A continuación de lo que hemos puesto, agregamos un poco de estilo y ponemos esto:
ver codigo CSS
<style>
#imageContainer {
margin: auto;
position: relative;
}
#imageContainer {
height: VALOR ALTOpx;
width: VALOR ANCHOpx;
}
#imageContainer img {
left:0;
position: absolute;
top:0;
}
</style>
Ahora buscamos en la plantilla, y donde pone #header-wrapper añadimos lo que esta en rojo:
#header-wrapper { display: none; }
Por ultimo, buscamos otra vez en la plantilla <div id='header-wrapper'> y justo encima de esto, añadimos:
<div id="imageContainer">
<img src="URL IMAGEN 1" /> <img src="URL IMAGEN 2" />
</div> |
Donde esta en rojo, poneis las urls de las imagenes de la cabecera. Si quereis añadir 3 o mas, solo hay que poner mas veces la linea <img src="URL IMAGEN" />
Ahora, con este look tan renovado, dareis un aire mas atractivo a vuestro blog y a quienes lo visitan. Porque recordad: el contenido es importante, pero la estetica lo es tambien.
