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'> <!-- Tipo de documento --> <head> <b:include data='blog' name='all-head-content'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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> <!-- Cuerpo --> </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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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='&quot;post-body-&quot; + data:post.id'> <data:post.body/> </div> <div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;' 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 != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <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 != &quot;true&quot;'>,</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

¿Qué te pareció?

Loading...
Nombre

Adblock Adobe Flash AJAX Algoritmos Anuncios API Blogger Blogging Buscadores chrome web store Código Fuente CSS CSS 3 CV Dart Depurar Desarrollo Web Diseño Diseño Grafico Diseño Web Documentación Efectos Facebook Firefox Foros Fotografias Frances Bean Cobain Gadgets General Geolocalizar Google Google Analytics Google Chrome Google Imágenes Google Music Google Reader Google+ Herramientas Hotmail HTML HTML5 Imágenes Información Informática Instagram Internet Internet Explorer Internet Explorer 10 Javascript jQuery Kurt Cobain Librerías Marketing Microsoft Monetización Web Mozilla Firefox 8 MySQL Navegadores Noticias Optimización Web PageSpeed Insights PayPal Personal Photoshop PHP Plantillas Programación Programas Programas Web Proyectos Redes Sociales ScreensHots Scripts Seguridad SEO Servicios Web Sesiones Snippets SoniTube Spam Steve Jobs Templates Themes Thumbalizr Tips Trucos Tutoriales Twitter Utilidades Vectores Virus Web Widgets Windows 7 Windows 8 Windows Mobile Windows XP WordPress XSS Youtube
false
ltr
item
OnSoni: Crear una plantilla para Blogger (Parte 1) - Estructura básica
Crear una plantilla para Blogger (Parte 1) - Estructura básica
http://4.bp.blogspot.com/-hZFftVBu6Zw/T15yTnq1vpI/AAAAAAAAArs/JCpTbGUmUqA/s1600/estructura-plantillablogger-onsoni.jpg
http://4.bp.blogspot.com/-hZFftVBu6Zw/T15yTnq1vpI/AAAAAAAAArs/JCpTbGUmUqA/s72-c/estructura-plantillablogger-onsoni.jpg
OnSoni
http://www.onsoni.com/2012/03/crear-una-plantilla-para-blogger-parte.html
http://www.onsoni.com/
http://www.onsoni.com/
http://www.onsoni.com/2012/03/crear-una-plantilla-para-blogger-parte.html
true
8818836675902573334
UTF-8
Not found any posts Not found any related posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU Etiqueta ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Contents Ver también Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copiar todo el codigo Seleccionar todo el Código Todo el código se ha copiado en el portapapeles Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy