jueves, 13 de mayo de 2010

La Cabecera de un blog "HACER UN BLOG "

LA CABECECERA DEL 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:

/*Header
---------------
*/

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

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor
}

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

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

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:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center:
color: $pagetitlecolor;
}

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í:

#header a:hover {
color:$pagetitlecolor;
}

Ha quedado así:

#header a:hover {
color: $titlecolor;
text-transform: uppercase;
text-decoration: underline;
font: $menubarfont;
}

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.


0 comentarios:

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones