La Cabecera de un blog «HACER UN BLOG «

Siguiendo con las explicaciones que te van a servir para saber qu?? hay en el c??digo del blog y como modificarlo para personalizarlo, voy a ir repasando las diversas zonas del blog en el mismo orden en que aparecen en el c??digo HTML.

Y lo primero que encontramos, tras la navbar, (esa barra de navegaci??n que nos a??ade blogger para que podamos ir de un sitio a otro del blog y que apenas podemos modificar), es la cabecera.

El header en el lenguaje del c??digo.

En el HTML, sin expandir los artilugios, as?? es como se ve ese c??digo:

Si expandes artilugios, ver??s un mont??n de c??digos m??s, pero en estos momentos no nos interesan demasiado.

Dichos c??digos sirven para indicar si la cabecera contiene una imagen, si dicha imagen est?? colocada tras el t??tulo o en lugar del t??tulo, cosas ambas que se seleccionan editando el gadget en Dise??o/Elementos de la p??gina.

Tambi??n se indica que el t??tulo ser?? el enlace al blog cuando se est?? en una p??gina distinta a la principal etc.

Como ves, en este c??digo hay algunas diferencias respecto al que te coment?? de la sidebar, en esta entrada.

En primer lugar, la secci??n es de una clase distinta, adem??s indica la cantidad de elementos, (widgets), que va a tener, solo 1 y en lugar de aquel preferred=’yes’ tenemos un showaddelement=’no’ que significa que ah?? no se va a mostrar lo de «A??adir un gadget».

En cuanto al c??digo del elemento en s?? mismo, tambi??n tiene una diferencia con los de la sidebar.

En aquello pone: locked=’false’ en ??ste pone locked=’true’

Si recuerdas la entrada que he mencionado, ese false indicaba que se pod??a mover el gadget, arrastr??ndolo, para colocarlo donde quisieras.

Con este true se indica que este elemento es inamovible.

Por supuesto todos estos detalles son modificables y puedes a??adir gadgets y cambiarlos de sitio modificando estos detalles.

Pero incluso dej??ndolos como est??n, puedes personalizar la cabecera de varias formas m??s.

A??adiendo una imagen, (lo cual puedes hacer editando el elemento o a??adi??ndola al c??digo del blog).

Quit??ndole o modificando el estilo del borde, o a??adi??ndoselo si tu plantilla no lo lleva, poni??ndole un fondo distinto al resto del blog, ya sea esa imagen que digo o un color diferente.

Moviendo de sitio las letras del t??tulo y/o del subt??tulo para que se adapten a la imagen.

Haciendo m??s ancha o estrecha, m??s alta o m??s baja, la zona que ocupa.

Y, por supuesto, modificando el tipo y color de letra que haya por defecto.

Todos estos cambios se realizan en la zona del CSS, o definiciones de estilo.

El c??digo de definiciones de estilo, de la zona de la cabecera, de una plantilla m??nima de blogger lo encontrar??s bajo este encabezado:

Bajo esas l??neas empieza el c??digo, propiamente dicho, con la definici??n de estilo del contenedor.

Como ves, las ??rdenes est??n comprendidas entre las dos llaves { } y empiezan con la almohadilla #

Estas l??neas indican que el contenedor de la cabecera tiene un ancho de 660 p??xels, el margen que tendr?? esta zona respecto al resto del blog, y que estar?? rodeada de un borde de 1 p??xel de grosor y del color de la variable correspondiente.

Le sigue las definiciones de estilo del interior de esta zona

con las que se indica que la posici??n del fondo va a ser centrada y que el margen por los lados ser?? autom??tico.

As??, si colocas una imagen que sea m??s estrecha que la zona que ocupa la cabecera, esta imagen se colocar?? centrada y se ver?? el color del fondo a los lados.

Continua con las definiciones de la cabecera propiamente dicha, as?? vemos esto:

que indica que hay un margen de 5 pixels respecto al borde exterior del contenedor por todos lados, que hay un borde de 1 p??xel de grosor, de estilo s??lido y del color de la variable, (ese borde interior mas el margen de 5 p??xels, es lo que crea el doble borde).

Tambi??n se indica que el texto, (titulo), estar?? centrado y que las letras del t??tulo ser??n del color de la variable correspondiente.

Le siguen las definiciones concretas del t??tulo: #header h1 { donde vemos el margen que va a tener ese t??tulo respecto a la zona que lo contiene, la altura de la l??nea del titulo, el espacio entre letras, la fuente y una l??nea que dice: text-transform: uppercase; que es la que indica que el t??tulo va a estar escrito completamente en letras may??sculas.

Si cambiaramos este uppercase por lowercase, se escribir??a todo en min??sculas.

Si eliminamos esta l??nea, (como he hecho yo), el t??tulo del blog se ver?? escrito tal como queramos, con las may??sculas y min??sculas que hayamos escrito en Configuraci??n o al abrir el blog.

Tras este grupo, tenemos las definiciones de estilo del enlace que incluye el t??tulo del blog al propio blog, pues esta es su funci??n si estamos en una p??gina disitinta a la principal, ya sea por haber pinchado en una etiqueta, en el t??tulo de una entrada o en los enlaces de navegaci??n que hay al final de las entradas.

En este caso vemos #header a { que es el enlace en estado de reposo y se indica el color, que es el mismo, y que no va a haber decoraciones en el texto, ni subrayados ni otros cambios.

En #header a:hover { se indica que al poner el rat??n encima del t??tulo, este va a seguir teniendo el mismo color, cosa que no sucede con el resto de enlaces, que cambian de color al poner el rat??n encima.

Al no decirle que muestre ning??n tipo de decoraci??n, no la mostrar??, al contrario que el resto de enlaces que si que muestran una l??nea que subraya las palabras que sirven de enlace.

Por supuesto estas ??rdenes son modificables. As??, si en tu blog se ve el t??tulo original, (no escrito por ti en una imagen) y quisieras que cambiara de color al poner el rat??n encima, o que se subrayara, solo tendr??as que modificar alguno de estos c??digos y se ver??a como quisieras.

??Quieres ver un ejemplo de ello?

Pasa el rat??n por encima del t??tulo del blog.

Este efecto lo he conseguido modificando este #header a:hover {

He cambiado lo que hab??a, color: $pagetitlecolor; por color:$titlecolor;con lo que en lugar de verse las letras blancas se ver??n del mismo color que el t??tulo de las entradas.

Adem??s le he a??adido un text-transform: uppercase; para que se vea todo en may??sculas un text-decoration: underline; para que se vea subrayado y un font:$menubarfont; variable que cre?? para los enlaces que hay bajo la cabecera.

Con todo ello, el c??digo original que era as??:

Ha quedado as??:

Como puedes comprobar, cada una de estas l??neas termina con un punto y coma y lo a??adido est?? entre las llaves { } de lo contrario no funcionar??a.

??Sigamos!

A continuaci??n, en #header .description { ver??s las definiciones de estilo del subt??tulo del blog si lo hubiera,

Eso no implica que si no le has puesto subt??tulo a tu blog no se ver??a este c??digo, sin?? que si tu blog tiene subt??tulo, por aqu?? podr??as modificar su posici??n y otros detalles ya que, al igual que en el t??tulo, se especifica el lugar exacto que ocupar?? en la zona de la cabecera, el color y fuente que se usar??, etc.

Y por ??ltimo en #header img { tienes las definiciones de estilo de la imagen que pudiera contener la cabecera, en las que se dice que el margen a izquierda y derecha ser?? autom??tico.

En todos estos casos estoy hablando de la plantilla m??nima original de blogger.

Si tu plantilla no es ??sta, o no est?? basada, en ??sta, quiz?? algunas de estas cosas no sean tal como las he explicado.

Y si tu plantilla no es ni est?? basada en una original de blogger es posible que algunas de estas cosas no solo no figuren en tu plantilla, sin?? que ni siquiera sea posible modificarlas sin saber exactamente como est?? construida.