Cabecera del blog cambiante (al azar)


Con unos pocos pasos podemos hacer que la cabecera del blog (header) tenga una imagen distinta cada vez que alguien entra a la página. En este caso la cabecera tendrá cinco imágenes distintas para poder mostrar cada vez que alguien entra al blog.
Primero necesitas tener las imágenes que vas a utilizar para el header, todas deben tener el mismo tamaño (ancho y alto) y deben estar alojadas en algún servicio de alojamiento. Si no sabes cuál es la medida de la cabecera de tu blog entra a Plantilla | Edición de HTML y busca esto (ojo, este código es de ejemplo, no todas las plantillas son iguales por lo que puede ser diferente en todos los casos):
#header-wrapper {
width:660px;

En este caso el ancho de la cabecera es de 660px, si tuviera una altura predeterminada dira también height, sino puedes usar la altura que quieras.

Ya teniendo las imágenes entra a Plantilla | Edición de HTML y busca 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. Luego guarda los cambios, te avisará que se suprimirá un artilugio, dale aceptar.

A continuación entra a Diseño y verás 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;
}
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. Puedes ver un ejemplo funcionando en este blog de pruebas, al entrar verás una cabecera, presiona F5 para que se recargue la página y verás otra distinta.

Si quisieras 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 fíjate 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.




Este excelente tutorial le pertenece al Potro de Ciudad Blogger. Cualquier duda y dificultad, deberán pasar por su blog y consultarle, tarea difícil puesto que parece que ya no actualiza su blog desde hace un año... una verdadera pena porque aprendí mucho gracias a él desde que comencé mi odisea por Blogger... En fin, publiqué este tutorial para no perderlo si alguna vez el blog del Potro desaparece algún día y para compartirlo con ustedes ya que es muy útil.

¡Gracias por leer!
Gabriella Yu

También te podría interesar...

Comentarios

  1. Muchas gracias por tremendo aporte. Nunca fue mi fuerte la edición web, y este tutorial es muy explicativo. (h)

    ResponderBorrar
    Respuestas
    1. De nada. Los tutoriales del Potro son de lo mejor que he visto y aprendí mucho de ellos en su momento. ¡Me encanta la edición web!
      Un placer haberte iluminado. ¡Cuídate y besos! :>)

      Borrar

Publicar un comentario

En este blog encontrarás dramas asiáticos y anime en latino o castellano para ver online o descargar a través de Drive, Mega, Telegram y Mediafire.

Si este blog te da buenos momentos, te pido que traigas más visitantes o permitas que se vean los anuncios para apoyarlo.

Y no dudes en agradecer o preguntar por aquí si tienes alguna duda... ¡No sabes lo mucho que animan los comentarios! Y también te pido que tengas paciencia hasta que pueda contestarte porque tengo una vida muy ocupada.

¡Disfruten viendo lo que más les gusta en cualquier momento y en cualquier lugar!

X Queridos visitantes: Únanse a las redes sociales del blog para estar en contacto si algún día es eliminado de nuevo.