Consejos y atributos para diseñar la plantilla de tu blog

Si estás en el proceso de crear tu propia plantilla para Blogger, te interesará este artículo ya que contiene algunos elementos útiles para que tu plantilla se vea mucho mas elaborada, junto con algunos datos y solución a los errores más comunes que les sucede a la mayoría.

Para este tutorial, me he dispuesto a hacer una plantilla a partir del tutorial anterior, para ello voy a mostrarles un antes y un después para que comparemos el resultado (El color de los contenedores en algunas imágenes es para poder diferenciar y ubicar cada elemento en la página, no se establecerán en el producto final).

Los márgenes, alineaciones y dimensiones:

Lo primero que debes considerar en la creación del blog, es el tamaño y ubicación que tendrá cada contenedor, recuerda que esto permitirá que distribuyas de forma óptima los elementos en el espacio y así podrás trabajar de forma eficiente cada sección (Véase este artículo). Procura siempre:

1. Que los márgenes siempre estén bien distribuídos.
2. El tamaño de cada contenedor debe estar claramente establecido, aprovechando pixel por pixel.
3. Antes de aplicar un márgen, establece un padding para que puedas comprobar cuánto espacio utilizará el contenedor.
4. Si lo deseas, puedes establecer los contenedores con un margen personalizado, intenta siempre que estos sean valores los correctos.
5. Recuerda que hay otros atributos que utilizan espacio y modifican el tamaño de los contenedores, como los bordes, considérelos al momento de definir las dimensiones.

Forma óptima de uso:

Para este ejemplo:

• Tamaño de la sidebar: 280px(Width)+20px(Padding)=300px
• Tamaño de las entradas: 640px(Width)+20px(Padding)=660px
• Ancho del #contenedor-general: 960px;

Si nos damos cuenta, el padding de cada contenedor nos resta 10px tanto a la izquierda como a la derecha, por lo que el ancho del contenedor tiene que ser 20px menos para poder ocupar cada pixel y no dejar espacios en blanco, la suma de 660px y 300px da 960px, el mismo valor establecido en el contenedor.

Configurando la tipografía:

Una de las cosas más importantes y que permite resaltar el contenido del blog, son las fuentes, su tamaño, su color y desde el principio debemos saber cual estableceremos.

A considerar:

1. Para el texto de las entradas, utiliza fuentes claras que no molesten en la lectura.
2. No abuses del color, intenta siempre que se adapte a los colores de la plantilla, considera esto una vez que ya tengas lista tu selección de colores y ya los hayas aplicado.
3. No uses fuentes demasiado grandes, ni demasiado pequeñas, establece un punto de equilibrio que consideres apropiado.

.
Nota: En el ejemplo he utilizado la fuente "Source Sans Pro", disponible desde Google Web Fonts (Ver guía).

Eligiendo los colores óptimos:

Establecer los colores es una de las decisiones más complicadas, ya que necesitas que combinen en el texto, en los contenedores, en el fondo del blog, etc.

Para ayudarlos un poco en esta labor les recomiendo que utilicen ColorCombos, una increíble base de combinaciones de colores óptimas para el diseño de tu sitio, aquí algunos ejemplos:

Observemos la siguiente muestra, para ello utilizaremos colores claros para el fondo del blog y contenedores, el texto tendrá un color oscuro para que haga contraste y no tendrá un impacto negativo:

Importante:

1. Nunca utilices colores primarios o colores demasiado básicos, esfuérzate en conseguir un color especial.
2. No sobrecargues la plantilla en exceso mezclando colores, utiliza sólo nos necesarios.
3. No es necesario que utilices un color único en algún elemento, puedes usar imágenes o gradientes CSS3 (Ver guía).

Manipulando otros elementos del blog:

Recuerda que tu blog posee muchos elementos que pueden ser personalizados, éstos pueden hacer la diferencia al momento de terminar tu plantilla porque con la "brocha gorda" únicamente personalizas lo general, pero los elementos tales como títulos, enlaces, listas, etc. necesitan atributos por igual.

Adjunto una lista de posibles elementos que decorar junto con una guía relevante:

1. Personalizar títulos en Blogger.
2. Estilos para Blockquotes.
3. Personalizar viñetas en Blogger.
4. Añadir banners en la sidebar (125x125px).
5. Personalizar enlaces en Blogger.
6. Personalizar etiquetas en Blogger.
7. Personalizar fechas en las entradas de Blogger.
8. Personalizar "Leer más" en Blogger.
9. Personalizar imágenes en Blogger.
10. Personalizar gadgets individualmente.
11. Personalizar título de los gadgets (De manera individual).
12. Resúmenes automáticos en las entradas de Blogger.
13. Condicionantes <b:if> en Blogger (Útil para mostrar/ocultar/modificar elementos bajo distintas condiciones).

Si deseas ver una lista completa de tutoriales para personalizar tu plantilla, revisa el índice del blog, encontrarás una gran variedad de artículos útiles.

Correcciones de errores:

1. El blog posee un espacio "en blanco" en la zona superior de la página: Si sucede esto, la forma más sencilla de corregirlo es suprimiendo tanto el padding y el margin del <body> y del </html>:

html, body {
margin:0; /*Márgenes nulos*/
padding:0; /*Espaciado interno nulo */
}

2. El contenido del blog no se mantiene centrado al hacer zoom: Considera establecer un ancho fijo o porcentual y márgenes laterales automáticos en el contenedor del blog:

#contenedor-general {
width:960px; /*Ancho en píxeles, puedes usar em o %*/
margin:0 auto; /* Utilizar un valor automático permite centrar un elemento block o inline-block*/
}

3. Aparece una barra de desplazamiento horizontal en el navegador y las dimensiones no sobrepasan el ancho del monitor: Si esto es un problema, podemos eliminar la barra con el atributo "overflow-x:hidden" en el cuerpo del documento web:

body {
overflow-x:hidden; /*Barra horizontal (eje x) oculta*/
}

4. Al establecer el ancho de la cabecera al 100% de la página, éste se queda del mismo tamaño que el resto de elementos: Por defecto, la plantilla mantendrá el mismo ancho que el #contenedor-general ya que ésta se ubica dentro de este elemento, para solucionar esto es necesario tomar el código y situarlo sobre este <div>:

Antes:

<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> 

Después:

<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="contenedor-general">      

5. Si quiero hacer lo mismo del ítem 4 con el pié de página, ¿Qué debo modificar?: Deberás hacer lo mismo, enviar el elemento 1 nivel arriba en la jerarquía:

Antes:

     <div id="pie-de-pagina">
         <b:section id="footer" class="footer" showaddelement="yes">
         </b:section>
     </div>

</div>

</body>

Después:

</div>
    <div id="pie-de-pagina">
         <b:section id="footer" class="footer" showaddelement="yes">
         </b:section>
     </div>

</body>

Otros recursos para facilitar la creación de tu plantilla:

1. Eliminar el clicktrap en Blogger.
2. Aumentar el tamaño del editor HTML en la nueva versión de Blogger.
3. 5 Extensiones de Firefox para usar en Blogger (Relevante Firebug).

¿Necesitas otra ayuda o consejo? Cualquier otra duda o problema en la que necesites un poco de orientación, coméntala y se incluirá en la entrada.

Nota: Esta guía se renovará constantemente para añadir otros elementos, dentro de los que están pendientes:

1. Atributos de un blog moderno.
2. Otras correcciones de errores.
3. Cómo usar Firebug en Blogger (Vídeotutorial explicativo). 
4. jQuery y uso de scripts en determinados elementos.
5. Añadir elementos tales como un menú sencillo y animado.

Los temas que aún no se han tratado y necesiten una elaboración mas detallada se crearán en una entrada adicional, y si te ha gustado este artículo por favor compártelo en tus redes sociales, publicar se ha vuelto un tanto dificil.