Un blog de cumpleaños

2008-09-07T13:18:00.002+02:00

No es necesario que cambies de plantilla para celebrar el cumpleaños de tu blog.
Con unos ligeros cambios en tu plantilla puedes dejarlo con un aspecto similar a este.
Después quitas los cambios y tu blog volverá a la normalidad.

Para empezar has de añadirle la posibilidad de poner gadgets en la cabecera, pero antes Guarda tu plantilla original, así te resultará más fácil recuperar su aspecto de siempre.
Una vez hecho esto, SIN expandir artilugios, busca la zona del HTML de la cabecera, que se ve así:

<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='El de tu blog (cabecera)' type='Header'/>
</b:section>

y cambiaremos la primera línea, dejándola así

<b:section class='header' id='header' maxwidgets='2' preferred='yes'>

Como ves, he reamarcado en rojo los cambios.
Una vez hecho esto ya puedes hacer vista previa, y si carga bien guardar la plantilla.

Con este cambio, al entrar en Elementos de la página verás que hay la posibilidad de añadir un gadget en la cabecera.
Añades un elemento HTML/Javascript y en el pones los códigos de las imágenes que quieras poner ahí. (En este caso hay el pastel, los globos, las copas, y las muñecas que bailan encima de Felicidades).
Luego arrastras el gadget para que se coloque debajo de la cabecera.

Puede ser que no deje que lo coloques ahí. No problemo.
Vuelves a pinchar en Edición de HTML, y de nuevo, en la zona de la cabecera, copias el código del gadget, que se verá así

<b:widget id='HTML1' locked='false' title='' type='HTML'/>

Luego de copiado, lo pegas debajo del widget del header y lo borras de arriba.
Vista previa y ya verás los dibujos debajo de la cabecera.

Si quieres poner una cabecera especial, como hice yo, solo has de cambiar la que tengas por la nueva.
Si no tuvieras, añades la imagen Editando el elemento de la cabecera y poniéndola En lugar del titulo y el subtítulo.
Cuando lo quites, solo tendrás que Eliminar la imagen y volver a poner la que hubiera, o dejándolo sin para que se siga viendo el título de tu blog.

La canción es un vídeo de youtube que coloqué en un gadget en la sidebar y luego arrastré hacia la zona de las entradas, poniéndolo encima de ellas.

Como ves hay un elemento que ocupa todo el blog, donde están las tarjetas de reuerdo.
Eso es una widebar.
Pero, a diferencia de las que ponemos encima de las columnas laterales esta la he colocado encima de todo, poniendo su código HTML debajo del de la cabecera, (en este caso debajo del Crosscol, ya que ahí está la menubar) y dándole de ancho un 100%, para que ocupara todo el blog.
En ella, una vez colocada, puse un elemento HTML donde coloqué las tarjetas.

La widebar tiene dos códigos, el del CSS, que define su estilo y el del HTML que define su posición y sus características.

Para ponerla has de copiar este código, en la zona del CSS, por ejemplo encima de #main-wrapper.

#widebar-wrapper {
width:100%;
float:left;
padding:0;
margin-right: 20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#widebar {
margin:0;
width:100%;
padding:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

Vigila la definición del float. Si tu plantilla usa eso de $startSide, eso es lo que has de poner en esa línea, donde pone left.

A continuación, siempre SIN expandir plantillas de artiligios, baja a buscar la zona de la cabecera, donde antes has colocado el nuevo elemento, y debajo de ella, o debajo del crosscol si lo usas para la menubar, añades este código: (Recuerda que todas las zonas terminan en un </div> o con un </b:section>)

<div id="'widebar-wrapper'">
<b:section class='sidebar' id='widebar' preferred='yes'>
</b:section></div>

Vista previa para asegurarte de que el blog carga bien, pues no verás cambios, y guarda plantilla si todo va bien.

Una vez guardada, vuelves a Elementos de la página y ya verás ahí la nueva zona, con un Añadir un gadget.

A tener en cuenta:
Este código no le da a la widebar ningún borde, ya que como tiene las propiedades de la sidebar, y ésta ya tiene un borde, es ese borde el que va a tener.
Si en tu blog no tienes bordeados los elementos de la sidebar, y quieres que la widebar si que lo esté, has de añadir esta línea en #widebar-wrapper

border: 1px solid $bordercolor;

Puedes cambiarle el grosor, y el estilo, poniendo un número más alto y modificando eso de solid.

Luego el fondo.
Si tienes un fondo de color liso, puedes dejarlo o cambiarle el color, a tu gusto. Si tienes un fondo que sea una imagen, para que se vean los dibujos has de quitarlo y dejarle un color liso.

En mi caso le puse este azul que ves aquí y le añadí el código de los fuegos artificiales.

En body le dejé así la línea del background

background:#031f3a url("http://usuarios.lycos.es/laeulalia/hpbimg/fogos2h.gif");

ya que mi blog no tiene definido el bgcolor en las variables.
Si tu blog si que tiene el color del fondo en Fuentes y colores, has de dejarlo así

background:$bgcolor url("http://usuarios.lycos.es/laeulalia/hpbimg/fogos2h.gif");

o así

background:$bgColor url("http://usuarios.lycos.es/laeulalia/hpbimg/fogos2h.gif");

dependiendo de como se escriba en la variable. (para saberlo, mira como está escrita cualquiera de las otras o directamente en la zona de los Variable name= lo que ponga aquí como lo pone.

Bueno, creo que eso es todo.
Si tienes alguna duda ya sabes que puedes contactarme, ya sea dejando un comentario aquí, o enviándome un mail.

Plantilla para cumpleaños

Un blog de cumpleaños