Cambio de look bloggeril

Alguno os habreis dado cuenta ya que he cambiado la cabecera del blog, bueno más que cambiarla, he añadido más. Me apetecia cambiarla, pero a la vez me daba pena quitar la primera que tuve, me encantó como me quedó y le tengo cariño (sí, se le puede tener cariño a una cabecera de blog XD). Así que pensé en intentar hacer que cada vez que se entra en el blog, salga una cabecera distitna con el nombre del blog, claro está. Estuve una mañana investigando y al final (me costó un poco por culpa del maldito código) pude hacerla, y podeis ver como queda ^^.
Me gustaría hacer algun que otro cambio, pero lo esencial ya lo tengo. Y os voy a explicar como lo hice.
Para empezar, lo que quería conseguir como os he dicho era que la cabecera del blog cambiase aleatoriamente cada vez que se entra en la página, por lo que busqué un tutorial. Encontré varios:
éste que lo probé y no lo hice funcionar, tal vez por mi estilo de plantilla.. no se
y éste, que si acabé haciendolo funcionar, aunque es un poquito más complejo. Os los vuelvo a explicar aunque lo tengais en el enlace, pero pondré las dificultades que yo tuve, por si le sirve a alguien.

Antes que nada, HACED UNA COPIA DE SEGURIDAD DE LA PLANTILLA DE VUESTRO BLOG. Por si las moscas.

Primero, preparad las imágenes a usar, que tengan las mismas medidas todas, así no quedará mal (yo use 3 de prueba y cuando vi que ya funcionaba, metí 7 más). Subidlas a photobucket por ejemplo, no suele fallar.


Primero lo que hice fue suprimir el título de la cabecera de mi blog, ya que lo iba a poner yo en mis imágenes. Hay dos maneras, se ve que depende de la plantilla funciona una u otra. Os cuento las dos (yo ya no recuerdo cual me fue bien xD de tantas pruebas que hice)

1- Para eliminar el título de la cabecera del blog, pero NO de la barra del navegador, en edición de HTML, seleccionamos 'expandir artilugios', y si quereis con ayuda del buscador del explorador busca esta línea de código:

Esto borrará el nombre de la cabecera en teoria. Y si quereis borrar también el subtítulo, borrad esta línea de código:

Creo recordar que esta forma me dio problemas, por lo que usé esta otra.

2- Teneis que buscar esta parte del código:

Y borrad los dos que pone.


En ambas opciones puede suceder que ahora la cabecera nos aparezca cortada. La solución está aumentando el padding de esta manera:
Buscais esta parte del código:

/* -- header style -- */

#header h1 {

padding: 12px 0px 130px 4px;

width: 567px;

line-height: 1;

Y modificad el tercer valor en pixels. Para saber que estais tocando lo correcto, dadle un valor muy alto, y en vista previa vereis si aumenta o no el espacio para la cabecera. Ves mirando en vista previa hasta ver el resultado que creas más conveniente.

Pero esta parte de aumentar el padding la dejaremos para el final, porque nos vamos a cargar la cabecera xD. Y en la mayoria de los casos no os va a hacer falta, solo a mi, que queria hacer una cosa que al final os contaré.

No os asusteis, se supone que habeis hecho copia de seguridad de la plantilla.

Vale pues ahora toca cargarse la cabecera entera. Y para ello hay que buscar esta parte del código, seleccionando expandir artilugios:

Y borrarla toda. Os saldrá una advertencia diciendo que se van a suprimir los artilugios, le damos a confirmar y guardar. Ahora tenemos un blog sin cabecera xD.
Aqui me surgió un problema, que yo queria cargarme la cabecera, pero me cargué la frase o descripcion que sale abajo (en mi caso es el cuadradito rosa bajo la imagen de cabecera). Y yo no quería eso. Al final os diré como solucionarlo (no de una manera muy graciosa, ya me enterare de otra).

Ahora lo que tenemos que hacer es aceptar los widgets en la cabecera. Para ello, arriba de la linea que acabamos de borrar, encontramos esto:

1" showaddelement="no">

Tenemos que modificar el 'no' por un 'yes' y donde pone 'maxwidgets='1' ', el número lo dejamos en 1 o en los widgets que queramos añadir despues, estilo publicidad, más cabeceras etc. (yo puse 5, siempre se puede cambiar)
Y quedaría así:

5" showaddelement="yes">

Dadle a guardar.

Ahora vamos a poner el código para hacer de nuestra cabecera un circo.
Ya no hay que modificar en el código HTML, vamos a insertar esta opción de la cabecera aleatoria como un widget más.
Para ello nos vamos a la parte de diseño del panel, y veremos que en la cabecera/header nos da la opción de insertar elementos. Vamos a insertar HTML, y copiamos esto:

Ahi tenemos que sustituir en todas partes donde pone URL IMAGEN 3 (o 1 o 2) y poner la dirección de la imagen que hemos subido antes, sin [IMG][/IMG] si es photobucket. No quiteis las comillas.
Hacemos esto con las 3 URL.
Si quereis poner más imágenes, solo teneis que seguir la cadena de código poniendo esto:

else if (randHdr == 4) {
document.write('')
}

Y modificando el número total de imágenes a mostrar aquí: randRange(1,3).
Por ejemplo si son 10 imagenes las que se van a mostrar quedaría así: randRange(1,10).
Y no olvideis numerar las imagenes donde pone:

else if (randHdr == 4) {
document.write('')
}

El 4 en negrita corresponde al número de imagen, pondreis 5, 6, y asi a cada imagen nueva que querais que salga.

Y ya está! Aceptar y listo!
Os debe de salir bien, podeis comprobarlo dandole a F5 en vuestra página del blog.


Vale ahora os comento el problema que tuve con esto, y el por qué de modificar el padding. Al cargarme la cabecera, te cargas también el susodicho cuadrito rosa donde pone la descripción del blog, o una frase o lo que sea.
Para volverlo a poner no encontré un código que lo hiciese, (de momento), así que tuve que irme a insertar elemento, en diseño, y ahi añadir cabecera, pero lo que hice fue esconderla, modificando el padding a 0px. De esta manera se ve solo la cabecera aleatoria y la frase del cuadrito rosa. Es como si tuviera dos cabeceras, pero una escondida :p

Y esto es todo!!
espero que os sirva ^^