miércoles, 30 de enero de 2013

Poner cualquier imagen en la cabecera del blog


Para saber cuál es la medida de la cabecera de tu blog entra a Plantilla | Edición de HTML y busca esto:
#header-wrapper {
width:660px;
En este caso el ancho de la cabecera es de 660px, si tuviera una altura predeterminada dira height, sino se puede usar cualquier altura

Ya teniendo las imágenes entra a Plantilla | Edición de HTML y SIN "expandir artilugios" buscar esta parte:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nombre del Blog (cabecera)' type='Header'/>
</b:section>

Ahora cambia el 'no' que está en negrita por 'yes' y elimina lo que está el color rojo. Después guardá los cambios.
A continuación entra a Diseño y vas a ver que la cabecera ha desaparecido, en su lugar aparece un recuadro que dice Añadir un gadget, da click ahí y selecciona HTML/Javascript. Ahí pega lo siguiente:
<script>
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>

<script language="javascript" type="text/javascript">
var randHdr = randRange(1,5);

if (randHdr == 1) {
document.write('<img src="URL DE LA IMAGEN 1">')
} else if (randHdr == 2) {
document.write('<img src="URL DE LA IMAGEN 2">')
} else if (randHdr == 3) {
document.write('<img src="URL DE LA IMAGEN 3">')
} else if (randHdr == 4) {
document.write('<img src="URL DE LA IMAGEN 4">')
} else if (randHdr == 5) {
document.write('<img src="URL DE LA IMAGEN 5">')
}
</script>

Ya sólo cambia lo que está en rojo por la URL de la imagen y listo. (A la URL la obtenés almacenando tu imagen en un host de internet, es decir subiendo la imagen a algún contenedor en la web. Yo uso "Google Code" ahí creas un "proyecto", vas a "New Daowload" para subir la imagen y pones "save"... una vez que se subió, haces click en en enlace de tu imagen, copias la direccion URL y listo)

Para agregar o quitar imagenes de la cabecera sólo quita o agrega (según sea el caso) esta línea del código del script:
else if (randHdr == 6) {
document.write('<img src="URL DE LA IMAGEN 6">')
}

Si agregas más fijate que la línea que agregas tenga un número consecutivo, en este caso el 6
De igual modo si agregas o quitas imágenes cambia esta parte del script:
randRange(1,6)

Donde está el 6 es el número de imágenes que se mostrarán.

1 comentario:

  1. Hola, no se si atiendes todavía, hice lo de la cabecera, la quite para añadir un gadget y algo sale mal, se elimino la cabecera, añadí el gadget, le copio el script, etc., pero no sale en el blog, es decir, creo que se quedo sin cabecera.

    ResponderEliminar