Curso Blogger: aprende a utilizar las hojas de estilo

En anteriores entregas aprendimos un poco de HTML básico que nos sirviera de base para luego comprender mejor la plantilla Blogger. Después pasamos a la acción creandonuestra primera plantillay por últimolos contenedores de la cabecera, el cuerpo, una barra lateral y el pie del Blog.

La idea es no copiar y pegar el código que "nos dan hecho", esta vez se trata de conseguir entender bien cómo y porqué se hace cada cosa en Blogger.

Con el mismo espíritu de dominar el código que lo conforma y la filosofía del "poco a poco", hoy vamos a aplicar estilos al cuerpo del Blog.

Muchos Bloggers desean cambiar el estilo del fondo de su Blog, su cabecera, el pie, la barra lateral... sin embargo, ante la falta de tiempo y de conocimientos suelen copiar y pegar códigos que existen por Internet para satisfacer sus necesidades. Esta vez te propongoaprender realmentecómo cambiar la presentación, los estilos y saber con exactitud porqué y dónde hay que tocar. Acompáñame con un ejemplo práctico, sencillo, explicado sin terminología técnica y con sencillez para que aprendas a dominar Blogger y en este caso, el uso de las hojas de estilo.

Vamos a dedicar una entradapara cada contenedor que creamosen nuestro Blog de pruebas. Si no has creado un blog de pruebas, igualmente podrás leer la guía para adquirir los conocimientos, ¡aunqe no hay nada como la práctica para aprender mejor los conceptos!.

NOTA IMPORTANTE:Se evita utilizar terminología compleja o excesivamente técnica en esta guía para acercar con la mayor simplificación posible el código a todas las personas que deseen conocerlo. No se va a utilizar en ningún momento palabras o nomenclatura de programación convencional, esta guía va dirigida a aquellos que no tienen ninguna o poca experiencia en programación de páginas web.

¿Qué vamos a hacer?

Como tenemos creados nuestros primeros contenedores del Blog (el contenedor para la cabecera, el cuerpo, la barra lateral y el pie), primero le vamos a dar "presentación", "estilo", al "fondo" de nuestro Blog.

Primerorepasaremos la teoría, la iremosconceptualizandoy finalmente realizaremos unejemplo práctico paso a paso.

¿Qué es y dónde se encuentra el cuerpo del Blog?

El verdadero cuerpo del Blog es el "Body", es el "fondo" de todo lo que vamos a poner en nuestro Blog:

?xml version="1.0" encoding="UTF-8" ?!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'

head

titledata:blog.pageTitle//title

b:skin![CDATA[

/b:skin

/head

body

AQUÍ ESTÁ EL CUERPO DE TODO EL BLOG, EL "FONDO" DE TODO EL BLOG.

/body

/html

Su extensión va desde el comienzo de la etiquetabodyhasta su cierre con/body.

Es importante no confundir el cuerpo del Blogbody, con el contenedordiv id="cuerpo".Entendamos bien las diferencias para comprender cómo funciona elbody.

¿Cómo funcionan el Body y los contenedores div del Blog?

Simplificándolo, elbodyes el labase donde se "dibujan", donde "flotan", los contenedoresdiv.

Por ello elbodycontiene en su interior a todos los contenedores que creamos:

body
data:blog.title/

div id="cabecera"

/div

div id="cuerpo"

/div

div id="barra-lateral"

/div

div id="pie"

/div

/body

Así pues, el "contenedor"div id="cabecera" ,div id="cuerpo" ,div id="barra-lateral",div id="pie"se encuentran sobre la base delbodyy "se dibujan" o "flotan" en su interior.

Como puedes ver, elbodyde la plantilla en Blogger, es el "lienzo" donde irás colocando y dibujando loscomponentes que desees dentro de loscontenedores que crees.

Así pues, con elbodyy losdivtenemos montado todo el "esqueleto", la "estructura" que nos servirá para después ir metiendo los componentes que deseemos utilizar (cajas de búsqueda, entradas del blog, anuncios, imágenes, cajas de suscripción, iconos, menús.... todo lo que puede verse en un Blog).

¿Cómo se ve esta estructura en el Blog una vez "puesta"?:

Sencillamente dándole una presentación para que se "vea". Con el ejemplo de plantilla que llevamos hecho hasta el momento, tenemos toda la "base", "esqueleto", "estructura" (como prefieras llamarlo) definidida, pero no se puede ver nada porque no tiene una presentación que haga que se vea en pantalla.

Este es el ejemplo que estamos manejando actualmente:

?xml version="1.0" encoding="UTF-8" ?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
htmlxmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'

head

titledata:blog.pageTitle//title

b:skin![CDATA[/*

/b:skin

/head

body
data:blog.title/

div id="cabecera"

b:section id="header" class="header" showaddelement="yes" /

/div

div id="cuerpo"

b:section id="main" class="main" showaddelement="yes" /

/div

div id="barra-lateral"

b:section id="sidebar" class="sidebar" showaddelement="yes" /

/div

div id="pie"

b:section id="footer" class="footer" showaddelement="yes" /

/div

/body

/html

Si estás utilizando el Blog de pruebas, podrás ver que cuando le indicas "ver Blog", a pesar de todo el código escrito no aparece nada en pantalla, sólo el título:

Esto es porque todavía no le hemos aplicado estilos a nada, nada tiene presentación todo es "invisible" pero está ahí ;)

Hay que utilizar "reglas" o "normas" de presentación que se detallan en la hoja de estilos para "decirle" al cuerpo de la plantilla y a los contenedores cómo deben mostrarse en el navegador, qué presentación deben tener.

¿Dónde están las hojas de estilo para mi plantilla?

Volviendo a la plantilla de pruebas, al igual que en cualquier plantilla Blogger normal, se encuentran dentro de las etiquetasb:skin![CDATA[y su cierre/b:skin contenidas en elheado cabeza del Blog. Cuando termina elheadcon su etiqueta de cierre/headdespués viene elbodyo cuerpo de la plantilla que antes explicamos (donde se "dibujan" los contenedores div que almacenarán los conponentes de la plantilla).

?xml version="1.0" encoding="UTF-8" ?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
htmlxmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'

head

titledata:blog.pageTitle//title

b:skin![CDATA[

/*Aquí dentro van a ir los estilos para la presentación del Blog.*/

/b:skin

/head

body
data:blog.title/

div id="cabecera"

b:section id="header" class="header" showaddelement="yes" /

/div

div id="cuerpo"

b:section id="main" class="main" showaddelement="yes" /

/div

div id="barra-lateral"

b:section id="sidebar" class="sidebar" showaddelement="yes" /

/div

div id="pie"

b:section id="footer" class="footer" showaddelement="yes" /

/div

/body

/html

Es en el interior de las etiquetasb:skin![CDATA[y su cierre/b:skindonde dictaremos las "reglas" o "normas" que la presentación de cada componente debe tener en el Blog, lo que hará que pueda verse con la presentación que deseemos.

NOTA: Hay más formas de trabajar con hojas de estilo en Blogger que utilizando ![CDATA[ pero escapan al ámbito de la guía. Si estás interesado en ellas, en diarios de la nube tengo realizadas diversas guías sobre cómo trabajar con hojas de estilo.

¿Cómo se aplican los estilos en Blogger?

Se pueden aplicar referenciando directamente a una clase principal como es la delbodycomo haremos en el ejemplo de hoy, o por medio del atributo class (clase). Se refiere a una clase que exista en la hoja de estilos.

Esto que suena "extraño" es así de sencillo, para entendernos, conceptualmente esto es cómo se hace :

---- HOJA DE ESTILOS CONCEPTUAL ----

b:skin![CDATA[

#Clase en hoja de estilos para contenedor 1{

ancho:10 píxeles;

alto:10 pixeles;

color: rojo;

}

/b:skin

---- FIN HOJA DE ESTILOS CONCEPTUAL ----

---- DENTRO DELbody EJEMPLO CONCEPTUAL----

body

div id ="Clase en hoja de estilos para dar formato al contenedor 1"

div Contenedor principal con el título/div

/div

/body

---- FIN DELbodyEJEMPLO CONCEPTUAL----

He delimitado la hoja de estilos con el texto---- HOJA DE ESTILOS CONCEPTUAL ----y---- FIN HOJA DE ESTILOS CONCEPTUAL ----.

EXPLICACIÓN DEL EJEMPLO CONCEPTUAL:

En elcontenedordiv id ="Clase en hoja de estilos para dar formato al contenedor 1"queremos que se le de el estilo de la#Clase en hoja de estilospara dar formato al contenedor 1(ancho de 10 píxeles,alto de 10 pixeles ycolor: rojo) que contiene el títuloContenedor principal con el título.

Es decir, en la hoja de estilos hemos dicho cómo debe dibujarse un título, con qué ancho, alto y color para luego indicar dentro del contenedor que queremos aplicar ese estilo al textoContenedor principal con el títulopor medio de que eldiv id =tiene el mismo nombre que hemos definido para su estilo en la hoja de estilos:Clase en hoja de estilos para contenedor 1.