Como aumentar el ancho del blog - Edición de HTML wrapper (#header-wrapper, #outer-wrapper, #main-wrapper, #sidebar-wrapper, #footer)

#header-wrapper, #outer-wrapper, #main-wrapper, #sidebar-wrapper, #footer

Ejemplo de una plantilla Mínima (Diseño, Edición de HTML).
En primer término copia de la plantilla en tu pc cliqueando en Descargar plantilla completa (Diseño, Edición de HTML).
Luego de ello busca lo siguiente y modifica lo que está en negrita, fíjate en vista previa cómo queda y guardar plantilla una vez que estés de acuerdo con los resultados, o borrar cambios.


#header-wrapper {
width:860px;
margin:0 auto 10px;
border:1px solid #cccccc;
}

#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

#main-wrapper {
width: 560px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 260px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#footer {
width:860px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Modificar los valores de este ejemplo no tiene problema, pero respetando que la suma de los pixeles del main y del sidebar sean algo inferiores a los del outer-wrapper.

Read more...

Como crear una plantilla blogger desde cero (2-2)

Tal como lo mencioné en una entrada anterior, he creado un breve vídeotutorial en el que se muestra cómo construir una plantilla HTML5 para Blogger, corresponde al primer artículo de tantos que comenzaré a realizar para el blog.



Pido disculpas si no se entiende o si cometo muchos errores, es mi primer vídeotutorial hablado y soy pésimo explicando a voz. Si tienen algunas dudas pueden preguntar directamente en el vídeo o en esta entrada.

Les agradecería que se suscribieran a mi  canal de Youtube, en donde comenzaré a publicar artículos relacionados a Blogger.

Tipos de Widgets:

Esta lista permite tener acceso a los distintos gadgets para así agregarlos a una plantilla, algunos como el gadget HTML o el de encuesta requieren una previa configuración.

Type="Blog"	Permite mostrar las entradas del blog, en el tutorial es el que se trabaja desde cero.
Type="PlusOne"	Nos permite mostrar el botón +1 dentro de alguna sección.
Type="PlusFollowers"	Muestra tus seguidores en Google+.
Type="PlusBadge"	Muestra una insignia de perfil de Google+.
Type="Translate"	El traductor por defecto en Blogger (de Google).
Type="FollowByEmail"	Permite a los usuarios seguirte mediante FeedBurner.
Type="PopularPosts"	Muestra los posts populares del blog.
Type="Stats"	Permite ver las estadísticas (Básicas) de las visitas del blog.
Type="PageList"	Muestra una lista de las páginas estáticas del blog.
Type="AdSense"	Muestra anuncios de Google AdSense.
Type="CustomSearch"	Buscador personalizado de Google.
Type="HTML"	Permite insertar código HTML.
Type="Text"	Permite insertar texto en el blog.
Type="Image"	Muestra una imagen en una sección.
Type="Slideshow"	Muestra un SlideShow de fotografías.
Type="VideoBar"	Muestra una insignia de perfil de Google+.
Type="Poll"	Muestra una insignia de perfil de Google+.
Type="LinkList"	Lista simple de enlaces personalizados.
Type="TextList"	Lista simple de elementos personalizados.
Type="Feed"	Enlaces que direccionan a las feeds.
Type="NewsBar"	Muestra las últimas noticias de Google Noticias.
Type="Label"	Muestra las etiquetas del blog, en lista o nube.
Type="Subscribe"	Enlaces de suscripción al blog.
Type="BloggerButton"	Botón de Blogger para el blog.
Type="Profile"	Información del autor o lista a los perfiles de cada uno.
Type="BlogArchive"	Archivo del Blog.
Type="Header"	Logo/Nombre y descripción del blog.
Type="Wikipedia"	Buscador Wikipedia.
Type="ContactForm"	Formulario de Contacto.
Type="Followers"	Seguidores en Google.

Variables Data:

Las variables data, en Blogger son objetos que almacenan alguna información, nos otorgan con facilidad determinados elementos con la simple acción de mencionarlas.

En Blogger, poseemos una basta cantidad de estos elementos, para evitar la sobrecarga de información utilizaremos los más importantes.

Estos datos se pueden utilizar de la siguiente forma:

De manera inline: Nos permiten utilizar los objetos como atributos, por ejemplo:

<div expr:id='"post"+ data:post.id'>

Lo que resulta en:

<div id='post30422323223'>

Mediante etiquetas: Permiten incluirlas en cualquier parte válida, por ejemplo:

<div class="titulo-entrada"><data:post.title/></div>

Resultando:

<div class="titulo-entrada">Título de la entrada</div>

Locales: 

Requieren alguna ubicación concreta, o ciclo para poder funcionar (Ej: data:post.title requiere estar dentro del ciclo de las entradas), de lo contrario no se encuentran inicializadas y por lo tanto no arrojarán resultados o bien se mostrará una alerta en la plantilla.

Dentro del ciclo de entradas:

<data:post.url/>	Devuelve la URL de la entrada.
<data:post.title/>	Devuelve el título de la entrada.
<data:post.snippet/>	Devuelve un resúmen de la entrada.
<data:post.thumbnailUrl/>	Devuelve la primera imagen del post, cortada a 72px, cuadrada (Requiere imagen subida a Picasa/Blogger).
<data:post.firstImageUrl/>	Devuelve la primera imagen detectada en el post sin alterar.
<data:post.dateHeader/>	Devuelve un rango de fechas para organizar las entradas.
<data:post.timestamp/>	Devuelve la hora de una entrada.
<data:post.author/>	Devuelve el nombre del autor que escribió la entrada.
<data:post.authorProfileUrl/>	Devuelve la URL del perfil del autor de la entrada.
<data:post.id/>	Devuelve el identificador numérico de la entrada.
<data:post.canonicalUrl/>	Devuelve la URL canónica de la entrada.
<data:post.timestampISO8601/>	Devuelve la fecha de la entrada según la ISO8601.
<data:post.emailPostUrl/>	Enlace para enviar entrada por Email.
<data:post.location.mapsUrl/>	Devuelve la URL de la geoubicación de la entrada (Requiere incluir al crear la entrada).
<data:post.location.name/>	Devuelve el nombre de la geoubicación de la entrada (Requiere incluir al crear entrada).
<data:post.editUrl/>	Devuelve la URL para editar rápidamente la entrada.

Dentro del gadget type="Blog":

<data:newerPageUrl/>	Devuelve URL "Entradas recientes" o "Entrada siguiente" dependiendo el caso.
<data:newerPageTitle/>	Devuelve nombre "Entradas recientes" o "Entrada siguiente".
<data:olderPageUrl/>	Devuelve URL "Entradas antiguas" o "Entrada anterior" dependiendo el caso.
<data:olderPageTitle/>	Devuelve nombre "Entradas antiguas" o "Entrada anterior".
<data:homeMsg/>	Devuelve mensaje "Página principal".

Dentro del ciclo de etiquetas (Dentro de entrada):

<data:post.label/>	Devuelve la(s) etiqueta(s) dentro de la entrada, requiere ciclo post.labels.
<data:label.url/>	Devuelve la URl de cada etiqueta, requiere ciclo post.labels.

Globales: 

Pueden ser utilizadas dentro de cualquier elemento y a diferencia de las locales, es que no requieren ninguna dependencia para funcionar:

<data:blog.pageType/>	Devuelve el tipo de página actual (index,static_page,item,error_page,archive).
<data:blog.pageUrl/>	Devuelve la URL actual (Ej: http://wwww.blog.blogspot.com/p/pag-actual.html).
<data:blog.pageTitle/>	Arroja el título de la página actual (Ej: Blog : Título entrada).
<data:blog.blogId/>	Devuelve el ID de tu blog (Ej: 6894142822305456206).
<data:blog.metaDescription/>	Devuelve la meta descripción del blog.
<data:blog.canonicalUrl/>	Devuelve la URL canónica del blog.
<data:blog.homepageUrl/>	Devuelve la página principal del blog.

Ciclos/Iteraciones:

Traemos contenido almacenado dentro de una matriz en Blogger, a diferencia de otros lenguajes sólamente definimos el ciclo, no lo programamos.

Existen varios bucles en Blogger, como por ejemplo en el gadget del tipo BlogList, pero tampoco los mencionaremos para que cada uno se encargue de buscarlos dentro de cada gadget que haya agregado.

Estructura:

<b:loop values="data:elementos" var="elemento">
        <!--Contenido iterado-->
</b:loop>

Ciclo de etiquetas (Para mostrar las etiquetas dentro de una entrada):

<b:loop values='data:post.labels' var='label'>
        <!--Traer las etiquetas de una entrada, requiere estar dentro del ciclo de las entradas y para mostrar cada etiqueta se requiere data:post.label-->
</b:loop>

Ciclo de etiquetas (Todas las etiquetas):

<b:loop values='data:labels' var='label'>
       <!--Permite mostrar todas las etiquetas del blog, requiere estar dentro de un gadget de tipo Label-->
</b:loop>

¿Sencillo no? Puedes de esta forma generar el contenido de tu blog.

Condicionales/Bifurcaciones:

Estructura simple (If):

Esta estructura nos permite condicionar si la condición es true, o false, pero no ambas.

<b:if cond='Si esto es == true'>

       <!--Se mostrará este contenido en el blog--> 

</b:if>

Estructura compuesta (If/Else):

Esta sentencia nos permite condicionar para ambos casos, si se cumple se ejecuta, y si no, se ejecuta lo que se encuentre debajo de <b:else/>.

<b:if cond='Si esto es == true'>
       <!--Se mostrará este contenido si la condición se cumple-->
<b:else/>
       <!--Se mostrará este contenido si la condición NO se cumple.-->
</b:if>

Algunos ejemplos con distintas formas de uso:

<b:if cond='data:blog.pageType == "index"'>

       <!--Mostrar esto en el índice del blog-->

<b:else/>

      <!--Mostrar esto en el resto de elementos, como páginas y entradas-->

</b:if>

<b:if cond='data:post.thumbnailUrl'>
       <!-- Este ejemplo, a diferencia del anterior, bifurca cuando la variable data existe-->
</b:if>

<b:if cond='data:post.thumbnailUrl == "URL_DE_LA_MINIATURA"'>
       <!-- Un ejemplo con la misma variable anterior, que indica que si el texto de la derecha es la URL de la miniatura, se mostrará algún código-->
</b:if>

<b:if cond='data:post.author= "Víctor Calderón"'> 

      <!-- En este ejemplo, preguntamos si el que escribió este artículo es Victor Calderón, se mostrará un fragmento que nosotros escojamos-->

</b:if>

<b:if cond='data:postNum == 2'>

      <!-- El post es el 3ero en la página principal, en él se mostrará algo, requiere que en el ciclo de entradas agreguemos el atributo index='postNum'-->

</b:if>

Includable/Include:

Esta maravillosa función, que muy poco mencioné en el vídeotutorial nos permite crear zonas de código reutilizables, o bien para mantener el código mucho más organizado.

La forma de uso se basa, en construir un elemento <b:includable> y en él añadir el código que queramos, debe llevar un identificador y la variable en donde se aplica.

Un ejemplo para el gadget de entradas:

<b:includable id="estructuraentradasindice" var="post">
      <div class="post_indice"> 

          <div class="titulo_entrada"><a expr:href="data:post.url"><data:post.title/></a></div>
          <div class="resumen_entrada"><data:post.snippet/></div>
          <div class="miniatura"><data:post.thumbnailUrl/></div> 
      </div> 
</b:includable>

Y para utilizarlo dentro de un ciclo:

<b:loop values="data:posts" var="post">
      <b:include name="estructuraentradasindice"/>
</b:loop> 

Nota: Existe en el widget de entradas, el <b:includable> que tiene como valor var="top", quiere decir que dentro de este se encuentran todos los demás.

Enlace del vídeo:

http://youtu.be/6xcPf0YEi4g

Información: Esta entrada se irá actualizando debido a que faltan una inmensidad de códigos, pero estos son los que más necesitan.

Actualización: Código fuente del vídeotutorial:

Código fuente del primer vídeotutorial para crear plantillas para Blogger. GitHub Gist

 Desarrollo en Blogger •  Vídeotutoriales

Read more...

Como crear una plantilla blogger desde cero (1-2)

Crear una plantilla para Blogger, todo lo que debes saber

Por Víctor Calderón el martes, abril 17, 2012

Esta entrada es antigua, pueden obtener documentación reciente mediante el siguiente enlace:

Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger 

¿Recuerdan que hace algún tiempo atrás hablabamos de crear plantillas desde cero para Blogger? En el intento de hacerles mas fácil su aprendizaje he decidido hacer nuevamente este tutorial y sintetizarlo en una sola guía, además de incluir algunos elementos básicos para que puedan conocer a fondo todos los códigos que sean de importancia.

Durante la guía explicaremos algunos códigos propios de Blogger, para qué son y para qué sirven, también veremos XHTML puro y CSS; definiremos cómo interactuan cada atributo y aplicaremos ciertos parámetros para que puedan obtener un resultado bastante bueno.

Aclaro primeramente que el tutorial está desarrollado nuevamente, el código base está reducido a sólo unas líneas para que el objetivo de la guía se cumpla.

El tutorial:

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 == &quot;item&quot;'>
<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:

• El valor destacado en 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.
• El valor destacado en rojo, corresponde al Doctype, éste define en qué versión HTML trabajará el blog. En este caso usaremos XHTML, el cual difiere de HTML en que las etiquetas son anidadas unas dentro de otras, no como en el HTML estándar, el cual no establece un órden correcto entre etiquetas.
• El código destacado en verde, corresponde al inicio y cierre del documento, el cual incluye otros atributos y declaraciones esenciales.
• Las etiquetas en 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.
• El código en 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 incluyo 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).
• El código en rosa, corresponde a nuestra hoja de estilos, en ella aplicaremos todos los atributos para nuestros selectores, clases e identificadores.
• Las etiquetas en 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 para empezar 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>Soy un bloque dentro de otro</div> 
   <div>Soy un 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. (Más información sobre CSS en esta página).

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 == &quot;item&quot;'>
<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>

Y 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 == &quot;item&quot;'>
<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>

Importante es conocer que 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: 

Si ya haz llegado a esta parte del tutorial y te haz preguntado por qué las entradas, título del blog y otros elementos no se pueden percibir, verás que 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, los demás como el gadget de etiquetas, el del título del blog y entradas no habría problema.

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: Las entradas y sus elementos se verán dentro de este gadget, 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 == &quot;item&quot;'>
<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>

 Si previsualizas el blog, te darás cuenta que ya es posible apreciar la navbar, el título del blog y las entradas, además de las categorías en la parte de abajo del blog.

Parte 4: 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í que recomiendo encarecidamente que te apoyes con las guías de CSS del blog, 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*/
}

Resultado:

Ahora, procederemos a dar un orden a cada contenedor que hayamos creado.

Supongamos que nuestra plantilla será de tipo "fixed", 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 == &quot;item&quot;'>
<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*/
}

El blog se debería ver así:

Ahora te toca a tí jugar con los atributos, en el índice del blog hay varios tutoriales de CSS, puedes ayudarte con ellos o empezar con el siguiente ejemplo que diseñé para ustedes, es algo básico pero puede servirles:

Ver demo

Código Fuente:

<?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 == &quot;item&quot;'>

    <title><data:blog.pageName/> | <data:blog.title/></title><b:else/><title><data:blog.pageTitle/></title></b:if>

    <b:skin><![CDATA[


     body {
    font-family:Tahoma;
    font-size:10px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ldcSIvkA0gn-CUhOD9by17X7qfKpqCJxMbVeW8Q1KT7Hs5C4fls7Fg4RbJVMB8slkp8wOQtOK-Ai4i-sR3nVHBmouRTRxYXE7txqocQcNpH6MzcLfzuG2AUC8JVX6M2KgQjBCmRMQvM/s1600/fondo-mosaico.png);
    color:#666;
    padding:0;
    margin:0;
    overflow-x:hidden;
    }

a {
text-decoration:none;
color:#0d586d;
}

ul li {list-style:square;}

#navbar {display:none;}

#contenedor-general {
width:960px;
margin:0 auto 0;
background:#F7F7F7;
border:1px solid #white;
padding:0;
}

#cabecera {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb38vdUu0UWfIFZK8mcr__6VuhdypqVuUbn9Si85I0lzOLXSsSpVbYaFJcR5J8eRWR-7DpepNfnwXdylymQDbZyW4h_q4RnkPdUYAQoaezCda-8sxAEvmUtgDLms2qWEtjdKn5yAus3C0/s1600/fondo-mosaico-cabecera.gif) repeat-x;
color:#FCFCFC;
margin:0 0 30px 0;
height:100px;
}

#cabecera a {
color:#FCFCFC;
}

#sub-cabecera {
margin:0 auto;
width:960px;
padding:20px 0 0 0;
}

#header {
width:50%;
float:left;
font-family: 'Exo', sans-serif;
}

#header h1 {font-size:30px;}

#cuerpo-entradas {
float:left;
width:650px;
padding:10px;
border-right:1px solid #CCC;
box-shadow:0 0 20px #ccc;
}

#columna-lateral {
float:right;
margin:0;
width:280px;
}

#pie-de-pagina {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM_LBVLegd1_gyyTsKEFYpmfVQxIzZEWtSoN32Qyn8Y-Ppuefqh4tqUGPGfCDqwa3i0DJrriZMlg0lF-2eSCZYX-LrOS1FgdoJF1jacaJf4PRNg1He7tbyFl7PFyQInI2Ev1rPHg9fukY/s1600/fondo-mosaico-footer.gif) repeat-x;
padding:10px;
color:#FCFCFC;
margin:30px 0 0 0;
width:100%;
}

.post {
border-top:1px solid #CCC;
padding-bottom:20px;
}

.post h3 {
font-size:20px;
margin-left:-20px;
font-family: 'Exo', sans-serif;
background:#0d586d;
color:#FCFCFC;
padding-left:10px;
box-shadow:3px 3px 0 #222, -4px -4px 0 #CCC;
}

.post h3 a {color:#FFF;}

.jump-link a {
color:#FFF;
max-width:100px;
background:#0d586d;
padding:1px;
display:block;
border-radius:2px;
text-align:center;
margin:5px;
}

.post-footer {
padding:4px;
background:#FCFCFC;
box-shadow:0 0 1px #CCC;
}

.ads {
margin:10px auto;
width:97%;
}

    ]]></b:skin>

<link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'/>
    </head>

    <body>

  <div id='cabecera'>
<div id='sub-cabecera'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb2E4CNmlv5n14nG3DGgewFpKp2G8W3qLT2UDM4XhpAvhmx7xAePz7okpsHIGT4MosR5OR4SrkiAkI2bitXq7v5YqpRqX4mfH3Rg7jDw_ino8pWVt3l9N8ADMPVEoj5OsYlLrz71WLlhc/s1600/ads-top.png' style='float:right;'/>

             <b:section class='header' id='header' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Plantilla desde Cero (cabecera)' type='Header'/>
</b:section>
         </div>
         </div>

      <div id='contenedor-general'>
          <div id='cuerpo-entradas'>

             <b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

          </div>

          <div id='columna-lateral'>

<div class='ads'>
<a href='#'><img src='http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
<a href='#'><img src='http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
<a href='#'><img src='http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
<a href='#'><img src='http://4.bp.blogspot.com/-_Ab1jipToss/TYjNKgEWWeI/AAAAAAAAAjs/umSnT6KTd5c/s1600/banner125.jpg'/></a>
</div>

             <b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Categorías' type='Label'/>
</b:section>

          </div>

          <div style='clear:both'/>



    </div>

         <div id='pie-de-pagina'>

<center><span style='font-size:14px;color:white;'>Este es un ejemplo de plantilla diseñado para Ayuda Bloggers</span></center>

             <b:section class='footer' id='footer' showaddelement='yes'/>

         </div>

    </body>

    </html>               

Hay algunas cosas que no las he hablado en este tutorial e igualmente las he aplicado en el resultado final del ejemplo, puedes revisar el siguiente índice para más detalles:

• Personalizar Viñetas en Blogger
• Fondos Semitransparentes en Blogger
• Estilos para texto citado en Blogger
• Usar Google Web Fonts en Blogger
• Agregar banners en la sidebar
• Añadir contenido en la cabecera en Blogger

Los demás artículos puedes verlos visitando el índice completo del blog. Cualquier problema, duda o consulta por favor hacerla en los comentarios.

Read more...