En este post y en los sucesivos, os pongo los trucos que he ido a aplicando a mi Blog para cambiar el aspecto y darle un toque más personal. Cuando comencé a personalizar mi Blog me di cuenta que blogger ofrecía multitud de plantillas con diversos estilos pero que en general contaban con los mismos elementos para añadir, estos se diferenciaban simplemente en los colores y el texto. Para darle otro toque había que incorporar elementos con código en JavaScript y modificar la plantilla con la edición de HTML de la misma.
En el primer post os pongo la manera con que se puede mostrar una imagen diferente en la cabecera cada vez que se entra en el Blog.
Para ello debemos incorporar el siguiente código Javascript, que cargará una lista con las rutas de las imágenes que queréis mostrar, esta ruta deberá ser una URL a la imagen correspondiente. Para ello podéis subir las imágenes en Blogger, y obtener su URL, abriendo la imagen en una nueva ventana y copiando la dirección que aparece en la barra de direcciones.
En cada entrada de quotes debeis introducir una URL, que tendrá el siguiente formato:
http://{directorio del servidor donde este alojado}/{nombre de la imagen}.jpg
y el código que teneis que añadir es el siguiente:
<script type='text/javascript'>
quotes = new Array(6)
quotes[0] = "URL DE LA IMAGEN"
quotes[1] = "URL DE LA IMAGEN"
quotes[2] = "URL DE LA IMAGEN"
quotes[3] = "URL DE LA IMAGEN"
quotes[4] = "URL DE LA IMAGEN"
quotes[5] = "URL DE LA IMAGEN"
aleat = Math.random() * (quotes.length)
aleat = Math.floor(aleat);
var ref;
ref = document.getElementById('header-wrapper');
ref.style.background='#e0e0e0 url(' + quotes[aleat]+ ') no-repeat 41px 0px'
</script>
Cada vez que cargue la página se generará un número aleatorio que será el índice de la lista, con este índice obtendremos la URL que sustituirá a la dirección de la imagen inicial de la plantilla.
Tened en cuenta que estamos sustituyendo la imagen que por defecto está en la plantilla del Blog, por lo que para que no haya descuadre, las imágenes que elijáis deberán ser del mismo tamaño que la que tiene inicialmente la imagen de la cabecera.
A la vez, tener cuidado cuando subís imágenes a Blogger y que está seleccionada la opción de "Reducir hasta ajustar", que puede producir que la imagen se vea con tamaño diferente al que tenía antes de subirla.
Este código javascript puede añadirse como un elemento HTML/Javascript sin Título o entre las etiquetas <head></head> del código HTML.
lunes, 26 de mayo de 2008
Cómo personalizar Blogger parte 1 - Imágenes aleatorias en la cabecera
Suscribirse a:
Enviar comentarios (Atom)
7 comentarios:
Hola soy yo Javi le puedes decir a la gente que conoces que me visite me hare seguidor tuyo.
Un saludo
Buen blog, el artículo esta muy bueno :):):):):):)
Buen blog, el artículo esta muy bueno :):):):):):)
dating by school girls [url=http://loveepicentre.com/]free dating site in australia[/url] free swingers az personals http://loveepicentre.com/ archaeometry an positives and negatives of tl dating
HOla:
Es muy bueno tu blog,pero,tengo una duda,las imágenes aleatorias no se cargan,me sale un error Mensaje de error de XML: The markup in the document following the root element must be well-formed.
No sé dónde poner el código java,en que parte del código HTML debo buscar para pegar el java????
Gracias de antemano
Debes entrar en Blogger y editar tu plantilla directamente en el código. Para cercionarte que estamos modificando la imagen correcta busca en el código si existe la region header-wrapper, si lo buscas y te da resultado pega el código. al final del código de la plantilla, por encima del fin de la etiqueta body. Además tendrás que sustituir las direcciones de las imágenes y el número de imágenes si tienes más o menos de 6. Este ejemplo funciona con las plantillas facilonas de blogger si acambias a una plantilla mas avanzada tendrás que maquetar los estilos correspondientes,
Publicar un comentario