Crear una plantilla para Blogger (Parte 1) - Estructura básica

En este artículo enseñare como crear una plantilla para blogger fácilmente, sin necesidad de conocimientos avanzados, tomando en cuenta su lenguaje XHTML, su estructura básica y su estilo CSS.

1. Estructura básica

Un ejemplo de está estructura que realizamos en imagen es nuevo propio diseño, realizado bajo:

Un header (cabecera) con título y descripción.
Un contenedor con la columna principal y una sidebar (barra lateral).
Y el footer (píe de página) con créditos y otra información.

Como lo son la mayoría de las plantillas, especialmente las de blogger.

2. Estructurando

Vamos a realizar la estructuración de una plantilla para blogger, para eso, necesitaremos empezar un documento válido realizado bajo XHTML como 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[/* ----------------------------------------------- En este espacio, puedes añadir un comentario o los créditos de tu plantilla, este mensaje no será visible en el blog. ----------------------------------------------- */ ]]></b:skin> </head> <body>  </body> </html>]

Con eso obtendríamos un documento XHTML valido para blogger, pero totalmente vació, sin contener los elementos que permiten mostrar el contenido del blog, esta será la base principal de nuestra plantilla.

3. Explicando Etiquetas

Ahora vamos a explicar las etiquetas, las cuales tienen una apertura (<etiqueta>) y un cierre (</etiqueta>), esto es básico en HTML y deberías saber la estructura de una página HTML, de todas maneras explicaré:

<head>: Es la sección en la que insertas contenido como scripts, en ella no se almacena el cuerpo del blog.
<body>: Corresponde al cuerpo del blog, acá insertaremos todo el contenido, entradas y la estructura general del blog.
<b:skin>: Esta sección sirve para alojar todo el CSS del blog, en ella depositaremos todos los estilos y atributos.
<title>: Es el texto que aparecerá en la barra de direcciones, por defecto mostrará el nombre de la entrada y después el del blog.
<html>: significa el inicio (y final) del documento.

Con esas etiquetas será más que suficiente.

4. El contenido

Ya tenemos nuestra estructura básica y ya sabemos para que sirven las etiquetas que necesitaremos para ahora añadir el cuerpo/contenido de nuestro blog. Vamos a proceder con insertar el cuerpo, el siguiente código contiene la estructura y las columnas mostradas en maqueta que realizamos en la imagen al inicio del tutorial, (Pega el siguiente código después de <body>):

[<div id='outer-wrapper'> <div id='header-wrapper'> <div id='header'> <h1><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h1> </div> </div> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'/> </div> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'> <b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </div> <div class='clear'/> </b:includable> <b:includable id='post' var='post'> <div class='post hentry'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'> <data:post.body/> </div> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <span class='fn'><data:post.author/></span> </b:if> </span> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a> </b:if> </b:if> </span> <span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if> </b:if> </b:if> </span> <span class='post-icons'> <b:include data='post' name='postQuickEdit'/> </span> </div> <div class='post-footer-line post-footer-line-2'><span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> </div> </div> </div> </b:includable> </b:widget> </b:section> </div> </div> <div class='clearfooter'/> <div id='footer-wrapper'> <div id='footer'> <b:section class='footer' id='footer' showaddelement='yes'/> </div> </div>]

La codificación es sumamente larga, así que no pude agregar muchas funcionalidades, pero con ese código bastará para formar la mayor parte.

5. Explicando Los ID

header-wrapper: Es la cabecera del blog, en ella se podrá insertar un logo y/o un elemento extra.
main-wrapper: Es el contenedor de las entradas.
sidebar-wrapper: Es el contenedor de la sidebar (Columna lateral).
content-wrapper: Contiene todo el contenido del blog, como sidebar y entradas.
footer-wrapper: Es el pié de la página.

6. Explicando las Class

post: Corresponden a las entradas.
comment-link: Enlace de los comentarios.
post-footer: Pié de la entrada.
post-body: Es el cuerpo de la entrada.
post-labels: Etiquetas de la entrada.
jump-link: Enlace "Leer más".
post-author: Nombre del autor de la entrada.
post-timestamp: Fecha de la entrada.

7. Visualización de la plantilla

Juntando todos esos elementos obtendremos una plantilla como la siguiente:

En la parte de diseño, los elementos se visualizarán de la siguiente forma:

Por ahora así se vera.

Continuará... en Crear una plantilla para Blogger (Parte 2) - Diseño CSS