Parte 1: La base de la plantilla:En esta primera parte definiremos algunos elementos básicos y cruciales, son los que necesitaremos para nuestra primer plantilla y están definidos por colores, los cuales explicaremos posterior al código, el cual es el siguiente:
<?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 expr:dir='data:blog.languageDirection' 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>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/></title></b:if>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
</body>
</html>
Explicación del código:
- AZUL: corresponde a la declaración XML en la que trabajaremos, en este caso UTF-8 permite incluir carácteres como "Ñ", tildes y otros que en otra codificación no soportaría.
- ROJO: (Doctype) define en qué versión HTML trabajará el blog. En este caso es XHTML, el cual difiere de HTML en que las etiquetas son anidadas unas dentro de otras.
- VERDE corresponde al inicio y cierre del documento.
- NEGRITA: corresponden al inicio y cierre de nuestro head, dentro de esta sección añadiremos nuestros scripts y otros elementos que no se incluyen en el cuerpo.
- AMARILLO: permite establecer de forma dinámica los títulos de las entradas, páginas e índice del blog, originalmente el de Blogger incluye un órden diferente, el que incluyó en el ejemplo permite que el título de la entrada se anteponga al del blog por un tema de SEO (Título de entrada | Nombre del blog).
- ROSA: corresponde a nuestra hoja de estilos, en ella aplicaremos todos los atributos para nuestros selectores, clases e identificadores.
- CURSIVA: corresponden al cuerpo del blog, será todo el documento que se verá en el navegador, incluyendo contenedores y elementos cruciales.
Parte 2: Maquetando la plantilla:
Lo primero que haremos será crear "bloques", en los cuales añadiremos todo el contenido del blog, sea dinámico o estático. Para ello,
utilizaremos etiquetas <div>, las cuales permiten crear dichos contenedores.
La estructura para crearlos es la siguiente:
<div>
Contenido del bloque
<div>
Si queremos alojar uno dentro de otro debemos hacerlo de la siguiente forma:
<div>
<div> bloque dentro de otro</div>
<div>bloque dentro de otro</div>
</div>
Para poder editar de manera individual estos bloques (Contenedores), recurriremos a las
clases e identificadores, que en resúmen se utilizan de la siguiente forma:
<div id="contenedor1">
<div class="elemento-clase">Soy un contenedor que se puede repetir en el documento</div>
<div class="elemento-clase">Soy un contenedor que se puede repetir en el documento</div>
</div>
Los identificadores (id) se pueden utilizar una sóla vez en la plantilla, mientras que las clases (class) permiten definir elementos en mayor cantidad.
Sabiendo esto, podemos empezar a crear los contenedores de nuestra plantilla, los cuales corresponden a una cabecera (
header), un cuerpo de las entradas (
main), una columna lateral (
sidebar) y un pié de página (
footer), los agregaremos todos de la siguiente forma en 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">
<html expr:dir='data:blog.languageDirection' 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>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/></title></b:if>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<div id="cabecera">
El contenido de la cabecera lo añadiremos aquí.
</div>
<div id="cuerpo-entradas">
El cuerpo de las entradas lo añadiremos aquí.
</div>
<div id="columna-lateral">
El contenido de la columna lateral lo añadiremos aquí.
& nbsp; </div>
<div id="pie-de-pagina">
El contenido del pié de página lo añadiremos aquí.
</div>
</body>
</html>
Parte 3: Incluyendo el contenido dinámico (Gadgets y entradas):
Ahora que ya hemos incluido nuestros bloques, podemos
habilitar cada sección de manera individual. Para ello,
haremos uso de las etiquetas <b:section>, las cuales
permiten incluir secciones de gadgets, además de alojar el contenido de nuestras entradas.
Éstas etiquetas se escriben de la siguiente forma:
<b:section id="identificador" class="clase" showaddelement="yes">
</b:section>
Al igual que los contenedores del paso 2 llevan un ID, pero junto con éste requieren una clase.
El atributo "showaddelement" define si la sección estará habilitada para gadgets, puedes cambiar el valor por "no" para inhabilitarla y evitar que puedan añadirse gadgets.
Observemos
un ejemplo concreto en nuestro código:
<?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 expr:dir='data:blog.languageDirection' 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>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/></title></b:if>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<div id="cabecera">
<b:section id="header" class="header" showaddelement="yes" /> </div>
<div id="cuerpo-entradas">
<b:section id="main" class="main" showaddelement="yes" />
</div>
<div id="columna-lateral">
<b:section id="sidebar" class="sidebar" showaddelement="yes" />
</div>
<div id="pie-de-pagina">
<b:section id="footer" class="footer" showaddelement="yes" />
</div>
</body>
</html>
Si las secciones no incluyen gadgets, se cerrarán en la misma línea.
Parte 4: Añadir el cuerpo de las entradas del blog y otros gadgets:
Para incluir las entradas, título del blog y otros elementos con sencillas líneas podrás incluir estos gadgets.Lo primero es conocer la
síntaxis de cada gadget:
<b:widget id="HTML1" locked="true" title="Mis seguidores" type="HTML"/>
Los widgets están definidos por la etiqueta </b:widget>, y el tipo se define según el atributo "type" destacado en rojo; los demás atributos corresponden a lo siguiente:
- id="HTML1": Corresponde al identificador del gadget, permite diferenciarlos y así poder trabajarlos mediante CSS.
- locked="true": Establece si el gadget puede cambiar de posición o si se puede suprimir, valores true o false.
- title="Mis seguidores": Es el título de gada gadget, puedes reemplazarlo por el que desees.
Importante:
Hay algunos gadgets, como el Gadget HTML, el de encuestas, blogroll etc.
que no pueden ser insertados de forma manual, ya que éstos necesitan una configuración previa la cual se almacena en una base de datos.Estos son
los tipos básicos de gadgets en Blogger que pueden ser incluídos manualmente en la plantilla y que incluiremos para que nuestro blog ya empiece a tomar forma:
- Entradas del blog: obligatoriamente se requiere una instalación manual ya que Blogger no permite definirlo mediante "Añadir gadget". El tipo que define este gadget es "Blog"
- Cabecera de página: Corresponde al título y descripción del blog, se puede incluir de manera tanto manual como automática y se define con el tipo "Header".
Para incluir los gadgets, vamos a añadir la síntaxis de éstos dentro de la sección que hayamos destinado:
<?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 expr:dir='data:blog.languageDirection' 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>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/></title></b:if>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<div id="cabecera">
<b:section id="header" class="header" showaddelement="yes">
<b:widget id="Header1" locked="true" title="Cabecera del blog" type="Header"/>
</b:section>
</div>
<div id="cuerpo-entradas">
<b:section id="main" class="main" showaddelement="yes">
<b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog"/>
</b:section>
</div>
<div id="columna-lateral">
<b:section id="sidebar" class="sidebar" showaddelement="yes">
<b:widget id="Label1" locked="false" title="Categorías" type="Label"/>
</b:section>
</div>
<div id="pie-de-pagina">
<b:section id="footer" class="footer" showaddelement="yes">
</b:section>
</div>
</body>
</html>
Parte 5: Editar con CSS todo el blog:
En esta parte aprenderemos a dar atributos a toda la plantilla y además veremos paso a paso una elaboración descriptiva del proceso.
Esto requiere principalmente práctica, conocimientos de CSS e imaginación, así es recomendable que te apoyes con las guías de CSS , contienen algunas cosas básicas para que puedas entender un poco mejor como se utilizan los atributos en los elementos.
Recordemos una vez más que
la zona que define esta hoja de estilos está entre <b:skin> y </b:skin>, en esta sección anidaremos todos los atributos que hayamos creado.
Importante: Los códigos destacados en verde deberás eliminarlos, están en el código para que puedas entender cada atributo al pié de la letra.
Lo primero que debemos hacer es aplicar algunos atributos básicos al body (Al cuerpo del documento), en donde definiremos tipografía, tamaño de fuente, márgenes y paddings, etc:
body {
font-family:Tahoma; /*Tipografía del blog*/
font-size:10px; /*Tamaño de la fuente del blog - Afecta porcentualmente a textos de distinto tamaño*/
padding:0; /* Permite que no hayan espacios en blanco sobre el blog*/
margin:0; /* Permite que no hayan espacios en blanco sobre el blog*/
}
Ahora, procederemos a dar un orden a cada contenedor que hayamos creado.Supongamos que nuestra plantilla será de tipo "fixed"(Layout con ancho fijo. Puede ser también "Fluid"), por lo que el código XHTML anterior deberá sufrir algunas modificaciones,
añadiremos un contenedor que mantenga todo el cuerpo centrado y a la vez agregaremos
una corrección para que el pié de página no se deforme con la flotación de la sidebar:
<?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 expr:dir='data:blog.languageDirection' 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>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/></title></b:if>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<div id="contenedor-general">
<div id="cabecera">
<b:section id="header" class="header" showaddelement="yes">
<b:widget id="Header1" locked="true" title="Cabecera del blog" type="Header"/>
</b:section>
</div>
<div id="cuerpo-entradas">
<b:section id="main" class="main" showaddelement="yes">
<b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog"/>
</b:section>
</div>
<div id="columna-lateral">
<b:section id="sidebar" class="sidebar" showaddelement="yes">
<b:widget id="Label1" locked="false" title="Categorías" type="Label"/>
</b:section>
</div>
<div style="clear:both" />
<div id="pie-de-pagina">
<b:section id="footer" class="footer" showaddelement="yes">
</b:section>
</div>
</div>
</body>
</html>
Ahora en nuestra hoja de estilos añadiremos los atributos para dar un orden a cada elemento:
#contenedor-general {
width:960px; /*Ancho del blog*/
margin:0 auto 0; /*Centramos el contenido*/
padding:0; /*Evitamos espaciados internos*/
}
#cabecera {
margin:0 0 30px 0; /*Márgenes de la cabecera*/
height:100px; /*Alto de la cabecera*/
}
#cuerpo-entradas {
float:left; /*Alineación de las entradas a la izquierda*/
width:650px; /*Ancho de las entradas*/
padding:10px; /*Espaciados internos*/
}
#columna-lateral {
float:right; /*Alineación de la sidebar a la derecha*/
margin:0; /* Sin márgenes */
width:280px; /*Ancho de la sidebar*/
}
#pie-de-pagina {
padding:10px; /*Espaciados internos*/
margin:30px 0 0 0; /*Márgenes*/
}
Ahora te toca a vos jugar con los atributos!!!
Hay algunas cosas que no se han hablado en este tutorial e igualmente se han aplicado en el resultado final. Podemos revisar el siguiente índice para más detalles:
