¡Hola, querid@s arrinconad@s!

Como trabajo todos los días, habrán momentos en que demoraré en la actualización del blog o en responder sus comentarios, así que les pido paciencia, sepan que sí o sí cumpliré y seguiré con el blog cueste lo que me cueste. ¡Gracias!
Gabriella Yu

martes, 3 de enero de 2017

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


2 comentarios :

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

    ResponderEliminar
    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! :>)

      Eliminar

DEJA TU COMENTARIO, SIEMPRE CON RESPETO O LO ELIMINARÉ.
ANTES DE PREGUNTAR ALGO, BUSCA PRIMERO LA RESPUESTA EN LOS COMENTARIOS ANTERIORES.

SI QUIERES INSERTAR UNA IMAGEN USA ESTE CÓDIGO:
[img]URL de la imagen[/img]
SI QUIERES INSERTAR UN VIDEO USA ESTE CÓDIGO:
[video]URL del video[/video]
NO INCLUYAS MATERIAL INADECUADO O TU COMENTARIO SERÁ ELIMINADO.

SI NO RESPONDO TU COMENTARIO UN DÍA DESPUÉS DE QUE LO PUBLICASTE, SEGURO QUE ESTOY MUY OCUPADA CON MI TRABAJO O QUE NO TENGA INTERNET, ASÍ QUE PIDO DISCULPAS POR LAS DEMORAS Y RUEGO QUE SEAS PACIENTE HASTA QUE PUEDA RESPONDERTE. ¡GRACIAS!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer
Related Posts Plugin for WordPress, Blogger...