50 Plantillas XHTML/CSS Gratis

Si eres diseñador web y necesitas plantillas para tus proyectos o simplemente quieres aprender a mejorar tus diseños en XHTML/CSS ahora tienes esta recopilación de templates que te ayudarán a hacerlo.

En esta recopilación de 50 Plantillas XHTML/CSS puedes encontrar todo tipo de diseños, desde los más simples a los más avanzados, disponibles todos para descargar de forma gratuita. Entre los 50 diseños encontrarás el que mejor se adapte a tus necesidades. Todos los ejemplos tienen el enlace de visualización previa y el de descarga. Además algunos incluyen un formato PSD para poder utilizarlo con Photoshop.

Una de esas colecciones para tener a mano cuando comenzamos un nuevo proyecto.

Fuente: Noupe.com

Tutorial Plantillas Blogger; Modulos de Entrada Inferiores

Vamos a continuar con el Tutorial de Plantillas para Blogger, modificando el código para poder añadir más módulos a los que trae por defecto la plantilla. En este caso añadiremos hasta un máximo de cuatro módulos debajo del espacio de cada entrada del blog. Puedes ver el resultado al final del ejercicio.

Para empezar, y como ya hemos hecho en otras ocasiones, utilizaremos la plantilla por defecto que se instala con Blogger, la denominada Mínima. Antes de nada haz copia de tu plantilla actual y utiliza un blog de pruebas preferentemente.

1.- Para insertar los módulos inferiores debajo de cada entrada, buscaremos el siguiente código:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

2.-  A continuación debemos de añadir el siguiente código marcado en verde para añadir una única columna en el espacio inferior de la entrada: 

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<div id='main-footer-contenedor'>

<div id='main1-1' style='width: 99%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col1-1' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

3.-  Para añadir dos columnas utilizaremos el siguiente código destacado en color verde:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<div id='main-footer-contenedor'>

<div id='main2' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>

</div>

<div id='main3' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

4.- Si lo que queremos es añadir tres columnas lo haremos añadiendo el siguiente código;

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<div id='main-footer-contenedor'>

<div id='main3-1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-1' preferred='yes' style='float:left;'/>

</div>

<div id='main3-2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-2' preferred='yes' style='float:left;'/>

</div>

<div id='main3-3' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-3' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

5.- Y si preferimos cuatro columnas en la parte inferior de cada entrada, entonces añadimos el siguiente código marcado en color verde:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<div id='main-footer-contenedor'>

<div id='main4-1' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-1' preferred='yes' style='float:left;'/>

</div>

<div id='main4-2' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-2' preferred='yes' style='float:left;'/>

</div>

<div id='main4-3' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-3' preferred='yes' style='float:left;'/>

</div>

<div id='main4-4' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-4' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

</div>

6.- Tambien puedes añadir todas las columnas como en el siguiente ejemplo:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

<!-- CODIGO MODULO INFERIOR :: 1 COLUMNA -->

<div id='main-footer-contenedor'>

<div id='main1-1' style='width: 99%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col1-1' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO INFERIOR :: 1 COLUMNA -->

<!-- CODIGO MODULO INFERIOR :: 2 COLUMNAS -->

<div id='main-footer-contenedor'>

<div id='main2-1' style='width: 49%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col2-1' preferred='yes' style='float:left;'/>

</div>

<div id='main2-2' style='width: 49%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col2-2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO INFERIOR :: 2 COLUMNAS -->

<!-- CODIGO MODULO INFERIOR :: 3 COLUMNAS -->

<div id='main-footer-contenedor'>

<div id='main3-1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-1' preferred='yes' style='float:left;'/>

</div>

<div id='main3-2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-2' preferred='yes' style='float:left;'/>

</div>

<div id='main3-3' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col3-3' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO INFERIOR :: 3 COLUMNAS -->

<!-- CODIGO MODULO INFERIOR :: 4 COLUMNAS -->

<div id='main-footer-contenedor'>

<div id='main4-1' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-1' preferred='yes' style='float:left;'/>

</div>

<div id='main4-2' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-2' preferred='yes' style='float:left;'/>

</div>

<div id='main4-3' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-3' preferred='yes' style='float:left;'/>

</div>

<div id='main4-4' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-footer-column' id='main-col4-4' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO INFERIOR :: 4 COLUMNAS -->

</div>

Puedes modificar varios parámetros de configuración de las columnas, como son el ancho de las mismas (modificando el valor de width:) y la alineación (modificando el valor de float y text-aling).

El resultado de añadir todos los códigos sería algo similar a esto:

Esperamos que con estos ejercicios entiendas mejor el funcionamiento de los módulos superiores e inferiores de las plantillas de blogger. Si tienes alguna duda déjanos un comentario.

Tambien puedes descargar la Plantilla utilizada para este ejemplo con todas las modificaciones realizadas. Recuerda hacer una copia de tu plantilla original y utilizar tu blog de pruebas.

 Descargar Plantilla de Ejemplo

Tambien te puede interesar:

Tutorial Plantillas Blogger; Módulos de Entrada Superiores

Indice del Tutorial Plantillas Blogger

Te esperamos en la próxima entrega del Tutorial de Plantillas para Blogger.

Tutorial Plantillas Blogger; Modulos de Entrada Superiores

Para iniciar nuestro tutorial sobre plantillas para Blogger, empezaremos por realizar algunos cambios básicos en la estructura principal de la plantilla. Estos cambios consisten en añadir a la estructura de nuestra plantilla una serie de módulos en la parte superior de la estructura, de tal forma que el resultado sería este:

Vamos a utilizar para este ejercicio la plantilla Mínima que viene por defecto cuando creamos un nuevo blog en blogger. Si vamos a la pestaña de Diseño y despues a Elementos de la Página, tendremos algo muy similar a esto:

1.- Para comenzar, vamos a la edición de HTML de nuestra plantilla en blogger (Diseño>Edición de HTML). Una vez allí marcamos la pestaña de Expandir Plantillas de Artilugios. Y buscamos el siguiente código

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

2.-  A partir de la línea marcada en rojo añadimos el siguiente código marcado en verde;

<div id='main-wrapper'>

<div id='main-top-contenedor'>

<div id='main-top1-1' style='width: 100%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top1-1' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

3.-  El resultado sería el siguiente;

4.- Si lo que queremos es añadir dos columnas en lugar de una al módulo, entonces el código que deberíamos de introducir es el siguiente (buscar la línea en rojo y a continuación pegar el código en verde):

<div id='main-wrapper'>

<div id='main-top-contenedor'>

<div id='main-top2-1' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top2-2' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2-2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

El resultado para el código de dos columnas sería el siguiente:

5.- Para introducir tres columnas el código sería este:

<div id='main-wrapper'>

<div id='main-top-contenedor'>

<div id='main-top3-1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top3-2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-2' preferred='yes' style='float:left;'/>

</div>

<div id='main-top3-3' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-3' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

6.- Y por último para introducir cuatro columnas el código que debemos de insertar es el siguiente:

<div id='main-wrapper'>

<div id='main-top-contenedor'>

<div id='main-top4-1' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-2' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-2' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-3' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-3' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-4' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-4' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

7.- Si lo que prefieres es añadir de una sola vez todos los códigos para optimizar al máximo el diseño de tu blog, entonces hazlo añadiendo el siguiente código en verde a continuación de la linea roja;

<div id='main-wrapper'>

<!-- CODIGO MODULO MENU SUPERIOR :: 1 Columna -->

<div id='main-top-contenedor'>

<div id='main-top1-1' style='width: 99%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top1-1' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO MENU SUPERIOR :: 1 Columna -->

    

<!-- CODIGO MODULO MENU SUPERIOR :: 2 Columnas -->

<div id='main-top-contenedor'>

<div id='main-top2-1' style='width: 49%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top2-2' style='width: 49%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top2-2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO MENU SUPERIOR :: 2 Columnas -->

<!-- CODIGO MODULO MENU SUPERIOR :: 3 Columnas -->

<div id='main-top-contenedor'>

<div id='main-top3-1' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top3-2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-2' preferred='yes' style='float:left;'/>

</div>

<div id='main-top3-3' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top3-3' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO MENU SUPERIOR :: 3 Columnas -->

<!-- CODIGO MODULO MENU SUPERIOR :: 4 Columnas -->

<div id='main-top-contenedor'>

<div id='main-top4-1' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-1' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-2' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-2' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-3' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-3' preferred='yes' style='float:left;'/>

</div>

<div id='main-top4-4' style='width: 24%; float: left; margin:0; text-align: left;'>

<b:section class='main-top-column' id='main-top4-4' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

<!-- CODIGO MODULO MENU SUPERIOR :: 4 Columnas -->

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

</b:section>

</div>

 

Puedes descargar la plantilla de ejemplo utilizada para este tutorial con todos los códigos insertados. Haz una copia de la plantilla actual y preferiblemente utiliza tu blog de pruebas.

 Descargar Plantilla de Ejemplo

Ahora solo depende de ti escoger cual es el diseño que más se adapta a tus necesidades para poder mejorar el diseño de tu blog.

Si quieres aprender más visita el Índice de nuestro

 Tutorial de Plantillas para Blogger

Te esperamos en la siguiente entrega del Tutorial de Plantillas para Blogger

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