Tutorial Plantillas Blogger; Introduccion

Para mostrar esta serie de tutoriales utilizaremos la plantilla básica que viene por defecto con Blogger; el Template Minima.

Entendiendo Blogger; La Distribución Gráfica.

Todas las plantillas que utiliza Blogger se caracterizan por su distribución. Estas están organizadas de la siguiente forma gráfica;

1. Header o título principal; en donde irá el título del blog, el logo y otros elementos como una barra superior de navegación, módulos de suscripción, etc.
   
2. Main o sección central de articulos; sección principal del blog donde se publican los post. En esta sección es habitual incluir la fecha de publicación del post, el autor, las etiquetas relacionadas con el post, módulos de artículos relacionados, diferentes tipos de suscripciones, sección de comentarios, artículos destacados, etc.
   
3. Sidebars o columnas laterales; en donde se suelen colocar diferentes elementos como el blogroll, articulos destacados, módulos de etiquetas y categorías, suscripción rss, feed de noticias, etc. Las Sidebars pueden ir colocadas tanto a la derecha como a la izquierda del blog.
   
4. Footer o pié de página; en donde podemos encontrar los créditos del blog, las normas de privacidad, enlaces a los directorios en los que ha sido incluido el blog, aplicaciones con las que ha sido desarrollado, información sobre el autor, etc.
   

Estos son los elementos en los que se divide cualquier plantilla de Blogger. 

Si accedemos a la edición de HTML de la plantilla, podemos comprobar como se divide el código que conforma el aspecto gráfico de la plantilla. A grandes rasgos se trata de dos códigos trabajando a la par; 

• código HTML, que se encarga de la estructura de la plantilla y en donde encontraremos dos grandes secciones; un HEAD y un BODY. 
  
• código CSS que se encarga del aspecto gráfico como los colores, tramaños de fuentes, márgenes, imágenes de fondo, etc. El códgido CSS va insertado dentro de la sección del HEAD del código HTML.
  

Estructura de las Plantillas; HTML/CSS y HEAD/BODY

[1]  Como comentamos, en el HEAD nos encontramos el código CSS.

Este código dá forma gráfica a la plantilla, además de otros elementos como pueden ser las metatags, las definiciones de variables, los créditos de la plantilla y códigos similares. 

De momento los que más nos interesarán son los códigos CSS. Estos códigos vienen comentados precedidos de los símbolos /* y a través de estos comentarios podemos saber cual es la función de dicho código. Para cerrar los comentarios se utiliza */. Vienen divididos por categorías con lo cual no es muy dificil de seguir; primero encontraremos el Header, despues Outer-Wrapper, Headings, Posts, Comments, Sidebar Content, Profile, Footer, y otros similares, dependiendo de la plantilla que utilicemos. 

Como puedes comprobar estos códigos coinciden en gran medida con las partes de la distribución gráfica de la plantilla que veíamos antes, con lo cual no es muy dificil saber que parte de la plantilla estamos modificando al cambiar estos valores. 

A su vez, cada sección del CSS tiene una serie de variables definidas que corresponden a determinados elementos ubicados en el BODY denominados ID. Por ejemplo para la sección del CSS del /* Header */ tenemos las siguientes definiciones de variables y sus correspondientes parámetros (destacamos en rojo la variable y en verde los parámetros de dicha variable):

#header-wrapper {

  width:660px;

  margin:0 auto 10px;

  border:1px solid $bordercolor;

  }

#header-inner {

  background-position: center;

  margin-left: auto;

  margin-right: auto;

}

#header { 

  margin: 5px;

  border: 1px solid $bordercolor;

  text-align: center;

  color:$pagetitlecolor;

}

#header h1 {

  margin:5px 5px 0;

  padding:15px 20px .25em;

  line-height:1.2em;

  text-transform:uppercase;

  letter-spacing:.2em;

  font: $pagetitlefont;

}

#header a {

  color:$pagetitlecolor;

  text-decoration:none;

  }

#header a:hover {

  color:$pagetitlecolor;

  }

#header .description {

  margin:0 5px 5px;

  padding:0 20px 15px;

  max-width:700px;

  text-transform:uppercase;

  letter-spacing:.2em;

  line-height: 1.4em;

  font: $descriptionfont;

  color: $descriptioncolor;

 }

#header img {

  margin-$startSide: auto;

  margin-$endSide: auto;

}

En este código tenemos las variables precedidas por el símbolo #. Estas variables son referenciadas en el BODY a través de una ID, y debemos diferenciarlas de las clases, las cuales se escriben como se muestra a continuación (en rojo marcamos las clases y en verde sus parámetros):

.sidebar { 

  color: $sidebartextcolor;

  line-height: 1.5em;

 }

.sidebar ul {

  list-style:none;

  margin:0 0 0;

  padding:0 0 0;

}

.sidebar li {

  margin:0;

  padding-top:0;

  padding-$endSide:0;

  padding-bottom:.25em;

  padding-$startSide:15px;

  text-indent:-15px;

  line-height:1.5em;

  }

.sidebar .widget, .main .widget { 

  border-bottom:1px dotted $bordercolor;

  margin:0 0 1.5em;

  padding:0 0 1.5em;

 }

Es importante diferenciar entre ID y clase, pues las ID son únicas y no puede haber dos ID con el mismo nombre, mientras que las clases pueden aplicarse a elementos diferentes, utilizando el mismo nombre de clase. 

Esta misma estructura se repite para las demás variables de CSS. Si estás familiarizado con el código CSS y su funcionamiento enseguida comprenderás como funciona en una plantilla para Blogger.

[2] En la sección BODY encontramos la distribución de los distintos elementos de la plantilla, como pueden ser los widgets, estructura de los post, comentarios, etc. Para poder incluir comentarios en el BODY, debemos de expresarlos de la siguiente forma:

<!-- Comentario en el BODY-->

incluyéndolos entre los símbolos <!-- y -->.

En la sección BODY nos vamos a encontrar una serie de elementos interesantes de entender, para comprender como funcionan las plantillas de Blogger. Estos elementos son entre otras cosas los códigos de los widgets que vamos añadiendo a la estructura de nuestra plantilla. 

Un ejemplo dentro del BODY en donde tenemos un elemento widget sería este:

<div id='sidebar-wrapper'>   <!-- Inicio de la SideBar-->

<b:section class='sidebar' id='sidebar' preferred='yes'> <!-- Inicio de la Sección -->

<b:widget id='Text1' locked='false' title='Webmasters Deluxe' type='Text'>  <!-- Inicio del Widget-->

<b:includable id='main'>

    <b:if cond='data:title != &quot;&quot;'>    <!-- Titulo del Widget-->

    <h2 class='title'><data:title/></h2>        <!-- Tamaño del Titulo del Widget-->

  </b:if>

  <div class='widget-content'>    <!-- Contenido del Tipo de Widget-->

    <data:content/>

  </div>         <!-- Fin Contenido del Tipo de Widget-->

  <b:include name='quickedit'/>

</b:includable>

</b:widget>  <!-- Fin del Widget-->

</b:section> <!-- Fin de la Sección -->

</div> <!-- Fin de la SideBar-->

Hemos diferenciado en color rojo tanto la variable como la clase que son llamadas en el código CSS del HEAD. Si quieres duplicar este widget, tan solo tendrías que duplicar este código y modificar el nombre de la ID por ejemplo a class='sidebar-1' y de esta forma tendrías la misma sección duplicada manteniendo el diseño por defecto otorgado a través de la clase class='sidebar' a través del código CSS.

Como se puede observar la estructura de la plantilla es una repetición de estructuras de código a base de widgets y otros elementos. Este esquema varía según el tipo de widget que añadimos y los datos que contiene. Por ejemplo en el código de arriba hemos añadido un widget de tipo texto. 

A lo largo de estos tutoriales veremos los diferentes tipos de widgets y como implementarlos en la plantilla a través de su código, para que puedas comprender en profundidad el funcionamiento del código de un widget dentro de la plantilla de Blogger.

Por el momento solo debes de tener claro estos cuatro conceptos:

1. Las plantillas de Blogger utilizan dos códigos; HTML y CSS.
   
2. El Código HTML es la estructura, el Código CSS es el diseño.
   
3. El Código HTML está dividido en HEAD y BODY. En el HEAD es en donde se encuentra el CSS
   
4. Desde el BODY llamamos al CSS del HEAD a través de ID (únicas) y clases (multiples).
   

Si tienes claros estos conceptos, ya puedes empezar a crear tu primera plantilla para Blogger. 

Te esperamos en la próxima entrega de estos Tutoriales de Plantillas para Blogger.

Ver el Indice de Tutorial de Plantillas Blogger