Quickribbon

jueves, 1 de febrero de 2007

Imágenes aleatorias en la cabecera

En relidad este pequeño truco vale tanto para imágenes como texto, pero normalmente es el tema de poder situar una cabecera aleatoria para el blog para lo que más se suele usar este tipo de scripts. Este truco consta de dos partes. Un primer script que colocaremos por ejemplo en la cabecera y justo debajo la segunda parte del código.
Evidentemente tendremos que tener al menos un par de imágenes preparadas que tendremos que subir a la red. La primera vez que usé este truco usé a blogger como host de las imágenes subiéndolas en un post y luego copiando el código, pero no se por qué, ahora con la nueva versión de bloger eso no funciona así que las podremos subir a imageshack o cualquier otro servicio de hospedaje de imágenes.

Lo primero que vamos a hacer es borrar la cabecera actual del blog para lo cual buscaremos en la plantilla un código más o menos como este:

<b:widget id='Header1' locked='true' title='Titulo del Blog (cabecera)' type='Header'/>



Eliminamos esa línea con lo que ya no se mostrará el título del blog en la cabecera. Ahora es el momento de ir a la página de diseño e introducir en la cabecera este elemento como HTML/JavaScript:

<!-- CODIGO DEL SCRIPT DE IMAGEN ALEATORIA -->
<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>
<!-- FIN DEL SCRIPT DE IMAGEN ALEATORIA -->

Guardamos los cambios y añadimos la segunda parte del código de la misma manera, pero asegurándonos de que quede justo debajo del anterior.


<!-- PARTE II: SCRIPT IMAGEN ALEATORIA -->
<script language="javascript" type="text/javascript">
var randHdr = randRange(1,3);

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

<!-- PARTE II: FIN DE SCRIPT PARA IMAGEN ALEATORIA -->

Sustituímos las zonas coloreadas de rojo por la direccón de la imagen que hemos subido y voilá. Ya tenemos una cabecera con imagen aleatoria en el blog.

Si queremos añadir más imágenes tenemos que ir añadiendo líneas de código para cada una de ellas y poner el número total de ellas en el valor randRange(1,nºtotal de imágenes)

20 comentarios:

Batto dijo...

Algo hago mal por que primero no consigo ponerlo en la cabecera el elemento de codigo Java, y luego realmente no hace nada.

Zaebos dijo...

Supongo que ya has habilitado tu plantilla para poder añadir elementos en la cabecera.. si no es así, primero mírate eso en el post anterior.

El tema es que la cabecera tiene deshabilitada la posibilidad de añadir elementos (shoaddelement="no")

Eso es lo primero que hay que hacer.

pasate por el post anterior, que es donde viene explicado.

Pepe Cohete dijo...

Sorprendentemente conocí este blog hoy por primera vez gracias a que me lo dijo Capi. Pensaba que era otra cosa, muy útil!!

Tu crees que la mayoría de los códigos valdrán para Wordpress?

Zaebos dijo...

jajaja... pues tiene gracia, porque eres uno de los admins.. jejejej


Algunos códigos si que van porque ya los he probado... pero claro, solo aquellos que tienen que ver con los estilos CSS ya que no es más que eso, un estilo. Los scripts y widgets que hace llamadas a variables de blogger... pues no van, claro.

En el blog de capi de Wordpress metimos el truquillo de Dropcaps y Citas y si que van, pero de Wordpress de momento no tengo idea... tendré que empezar a mirar por ahí tb, pero Blogger es mi debilidad... jejeje, será porque es con el que empecé y claro, es lo que más conozco.. por decir que controlo alguno... ;)

bolo dijo...

Muy útil el código, muchas gracias, ahora lo uso también en videos... el más sencillo de usar que encontré.

Zentraedi dijo...

Hola,
Tengo un "problema": soy un poco noob en esto de tunear las plantillas y esas cosas. El tema es que entre "prueba y error" pude generar una plantilla minima de 3 columnas a mi gusto (no mi total gusto pero se acerca bastante). El tema es que ahora quiero poner una cabecera variable y no entiendo como se pone un codigo html en la cabecera... pq con un "tutorial" que me enviaron pude eliminar la cabecera para así poner una cabecera a mi gusto, con el texto y formato que quiera... por eso recurro a ti para pedirte ayuda...

Muchas gracias de antemano.

Zaebos dijo...

primero tienes que hacer editable la cabecera... pasate por este otro post
http://karalletest.blogspot.com/2007/02/aadir-widgets-en-cualquier-parte.html

Kuraujio dijo...

Gracias por el tutorial ^^
pero.. tengo un problema, resulta que yo tengo ensanchada mi plantilla y cuando puse este metodo los banner me salen corridos o sea no me salen alineados a la izquierda como deverian salirme, y queda re feo o.o!!

Pistanorte dijo...
Este comentario ha sido eliminado por el autor.
Pistanorte dijo...

Un 10 ¡¡¡¡¡ Este si que es un pedazo blog de ayuda.

Guillermo dijo...

Mira lo que me sale:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "img" must be terminated by the matching end-tag "".

Como lo pongo el otro codigo? justo debajo del otro?
O como lo hago?

Hogar CRECER dijo...

Hola! No aparece NADA después de la instalación. Tengo habilitado el crosscol. No guarda los cambios y sale Mensaje de error de XML: The element type "img" must be terminated by the matching end-tag "". Le puse / al final de la url de la imagen y después apareció mensaje similar, pero con type titlle...
Podrás indicarme dónde está el error? Muchas gracias. Corina
www.hogarcrecer.blogspot.com

Scenix.Carolina dijo...

Wooow, :D
jajaja,, Me sirvio un paQetoon uff!
Chulisimo i super util el post! ;)

Besottes! (LL

Hugo Escobedo dijo...

Hice todo y quedó perfecto HASTA QUE LE DI GUARDAR Y LAS IMAGENES NO SE VEN!!! QUEDA LA CABECERA VACÍA, SUBI LAS IMAGENES AL FLICKR. AYUDA!!!

vayeciyos dijo...

Me ha ido super bien! muchas gracias.

Cómo sería para que la cabecera enlace a siempre a la home del blog??

eso sería perfecto!

Kramer dijo...

Excelente!!! Me funciona a la perfección. ¡Mil gracias! Tu blog me está ayudando mucho.
Saludos,

Anónimo dijo...

Eres grande, tío.
Muchas gracias!!

Administrador CumKasper dijo...

Muy bueno! , una pregunta...
como le cambio el width y height a las imagenes que agregue al gadget, porque ya intente insertar una instruccion de style al gadget despues de la src de la imagen pero no me funciona,

Gabriel dijo...

Buenazo su aporte gracias, ya voy en algo.

Néstor Alavez dijo...

hola ... tengo un problemita con eso del header aleatorio ... y no me han podido ayudar ... todo sale bien .. pero la imagen me sale muy pequeña y no es el header completo ... me pueden ayudar ??

Template Designed by Douglas Bowman - Updated to New Blogger by: Blogger Team
Modified for 3-Column Layout by Hoctro
Re Updated by Zona de Pruebas