Crea tu plantilla de blogger

Como crear desde cero una
plantilla de blogger
Experimentando con HTML

El blog del C.M.
http://agamezcm.blogspot.com.es
Sígueme en twitter (@agamez400)
Charlemos en Facebook: AG400
Blog ayuda blogger
Community Manager y redes sociales

A. Gámez Community Manager y economista septiembre 2012 Málaga

Ayuda para bloggers
Esta guía no hubiera sido posible sin los blogs de verdaderos gurus de
blogger, enemigos del uso del copy-past y amigos del estudio y el
desarrollo de nuevas ideas.
Hay muchos otros blogs, pero estos son los que he encontrado más
didácticos.
Ayuda bloggers
El blog de Emilio Cobos
El blog de Pedro Pablo
El Balcon de Jaime
Oloman
El blog de JMur -vagabundia

Claves de la plantilla de blogger

Si observas, cuando accedes al HTML de la plantilla de tu blog tienes de opción de
extender plantilla o no, según señales el campo correspondiente.
Cuando no extiende plantilla todo el HTML que puedes leer es el básico y clave
para diseñar la plantilla.
La plantilla no extendida del blog contiene en unas primeras líneas una serie de
órdenes e información básica, esto es antes del <head> y despues tienes
precisamente la cabecera <head>, el cuerpo <body> el pié del blog <footer> y la
(s) columna (s) que aparece (n) en los laterales, “sidebar” donde se alojan la
mayoría de widgets.
Todas estas partes llamadas secciones están incluidas en un contenedor que las
delimita.
Por último podemos observar que incluye todo el CSS que dá estilo al blog.El CSS
puede ir en un fichero aparte y enlazado desde la plantilla, pero blogger prefiere
incluirlo en la misma plantilla.

Claves de la plantilla (cont.)
Tras ésta imagen primera del HTML blog, hay una serie de códigos de
blogger que se leen si extendemos plantilla y otros códigos que no
conocemos pero que están en el servidor de blogger.
Una plantilla básica, sin adornos, sin customizar y que no incluya mayores
prestaciones que las básicas se obtiene en dos pasos:
1.- Delimitando las secciones e incluyendo en las mismas los widgets que
necesites.
2.- Diseñando el estilo CSS.
Con cada sección que vayas creando y con cada widget que vayas
adaptando a la plantilla se va añadiendo en segundo término (plantilla
extendida) los códigos de blogger necesarios para que el blog adquiera su
forma básica y sus funcionalidades.
Después en una última fase viene incluir nuevas funcionalidades, trucos,
customización extra etc.

Estructura básica blogger

Fuente: oloblogger.com

Plantilla de un blog

#body

#outer-wrapper

#header-wrapper

#main-wrapper

#sidebar-wrapper

#footer

#footer-wrapper

Fuente: blogdelujo.com

Planteamiento de una plantilla
básica de blogger.

En éste trabajo voy a ir presentando lo que he aprendido sobre como
poder diseñar una plantilla básica y que ha sido gracias a estos blogs
que incluyo en otra página.
En un segundo apartado vamos a mejorar el blog básico, para
aportarle algo de presencia.
Dedicaré un apartado al SEO, como hacer la plantilla amigable.
Los trucos, scripts, creación de menus, etc. Están en estos blogs que
enlazo en su apartado correspondiente y en otros que se encuentran
en Google buscador, para que aporten aquello que se necesite en
cada momento.

Código básico plantilla blogger
<?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:skin><![CDATA[/*
]]></b:skin>
</head>
<body>
</body>
</html>

Esta estructura que hemos de añadir no será admitida hasta no crear un
espacio que dé cuerpo: la sección

Como definir una sección
La línea que define una sección en blogger es:

<b:section id="header" class=‘header’ showaddelement=‘yes’ />

Esta línea section se inserta después de la etiqueta <body>
Como vemos al final cierra la orden “/ ” es decir /> que es
equivalente a decir </b:section>

Una vez creada la section e incluida después de <body> la plantilla
es admitida como correcta. Si accedes a la URL el blog está en
blanco y si accedes a diseño solo aparecerá un bloque “añadir
widget”.
En éste caso el campo añadido es identificado “id” como cabecera.

Hablemos sobre ‘section’
Los grandes bloques que componen un blog se denominan secciones.
Normalmente las secciones básicas son:
header main (body:el area del post) sidebar (lateral) footer (pié de plantilla)

Cada sección identificará con id el bloque a que se refiere
La etiqueta class no es obligatoria pero ayuda al definir el CSS
Showaddelement permite (yes) o impide (no) añadir nuevos elementos (widgets)
Una etiqueta opcional es maxwidget indica el número máximo de elementos que puede
contener una sección. Si no lo indica es ilimitado.

Las secciones son recipientes de los widgets y ambos section y widgets
están acotados por etiquetas div.

Section y widget composicion
div -- section --widget- /section --/widget-/div

En resumen el código completo de toda ésta composición será:

<body>
<div id='cabecera'>
<b:section class='header' id='header' showaddelement='yes'>
<b:widget id='Header1' locked='true' title=‘Título(cabecera)' type='Header'>
</b:section>
</b:widget>
</div>
</body>

<b:section class="header" id="header" maxwidgets="3" showaddelement="yes">
Aquí he incluido maxwidgets para ver como usarlo.

Alternativa a la composición

Algunas plantillas no admiten el cierre clásico de algunas etiquetas y
puede que a estas alturas, al probar con los códigos nos dé algún error
de HTML del tipo ………end tag “” (</widget> o </section> no admitido)
No hay que desesperarse éste código alternativo es la solución.
<body>
<div id='cabecera'>
<b:widget id='Header1' locked='true' title='titulo (cabecera)' type='Header'/>
</b:section>
</div>
</body>

Puedes ampliar éste tema sobre secciones en oloblogger.com

Estructura práctica de blogger

nuestra plantilla actual con un
único widget cabecera es:

Como podemos observar sobre el widget cabecera aparece otro
campo que dice “añadir widget”.
Esto es debido al parámetro showaddelement= ‘yes’
Recordemos:

Vista pantalla del blog
Si damos al comando ver blog o introducimos la URL de
nuestro blog de estudio (plantilla 2006) en pantalla solo
vemos el título del blog ( configuración), sin formato ni
ajuste de posición. Falta incluir el estilo CSS.

El código interno de blogger
Lo expuesto en ésta primera avanzadilla es solo eso una mínima parte del
código de la plantilla.
Blogger tiene un código interno en el servidor que ha añadido en el
momento de abrir / iniciar nuestro blog. Para conocerlo simplemente hay
que señalar la casilla de expandir plantilla.
Es sobre ese código interno sobre el que tenemos que actuar,
modificándolo o añadiendo órdenes para customizar nuestra plantilla.
Aunque para ello es necesario saber HTML y CSS, conociendo como
funciona o el por qué de algunas etiquetas sabremos comprender en
muchos casos las modificaciones que veamos en los blogs de ayuda

Un experimento
A estas alturas hemos creado un blog en sú mínima
expresión. Te propongo hacer una prueba que no es
mas que comprobar el nivel de bondad de nuestra
plantilla en el código estilo CSS y HTML del propio
blogger (el que tiene en su servidor).

Para ello acude a las páginas de chequeo siguientes:

http://jigsaw.w3.org/css-validator/
http://validator.w3.org/

Como comprobamos los códigos de blogger padecen
errores ¿Porqué?. Ya trataremos éste tema.

Las secciones includables
En la plantilla que hemos creado a nivel mínimo google ha
incluido unas secciones los includables.
Los includables incluyen secciones: main, title, description

La estructura de un includable es:

<b:includable id='main' var=‘(opcional)'>
[aquí irá el contenido]
</b:includable>

El primer includable: main
El primer includable aparece incrustado en nuestra plantilla:

<b:widget id='Header1' locked='true' title='plantilla 2006
(cabecera)' type='Header'>
<b:includable id='main'>

Y contiene las distintas posibilidades de la cabecera del blog.
Imágenes como fondo de cabecera, visualización de imagen,
no visualización de imagen, visualización para móviles etc.

Es quizás algo complicado por los distintos condicionantes que
recogen todas las posibilidades.

Includable: visualizacion titulo e imagen
desde móviles
El primer includable establece un condicional para imagen como
cabecera y acceso o no desde el móvil, ver imagen y titulo o ver
solo la imagen.

<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>

<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/><!—si no ocurre lo anterior: no móvil sección siguiente

Visualizacion titulo e imagen desde pc
<div expr:style='"background-image: url("" + data:sourceUrl +
""); " + "background-position: "
+ data:backgroundPositionStyleStr + "; " +
data:widthStyleStr + "min-height: " + data:height
+ "_height: " + data:height + "background-repeat:
no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
</h1>
</div>
</div>
</b:if>
<b:else/><!—si solo se ve imagen seccion siguiente

Solo se ve la imagen
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId + "_headerimg"'
expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

Y la descripcion del blog antes de la
imagen
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
</b:if>
</div>
</b:if>
<b:else/>

No hay imagen de cabecera

<div id='header-inner'><!—recuadro del título
<div class='titlewrapper'><!—Título del blog
<h1 class='title'>
</h1>
</div>
</div>
</b:if>

Includable TITLE
Este INCLUDABLE es mas simple y corto que el de MAIN. Solo
marca las condiciones necesarias para que se vea el título

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> (1)
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a> (1)
</b:if>
</b:includable>

(1) Si estamos en la página principal visualizar titulo, sino el
titulo a usar es el de la página en que estemos

Includable DESCRIPCION

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>

<data:description/>
Es la etiqueta que muestra la descripción del blog.
Podemos personalizar la descripción. Algunas ideas aquí

Veamos que pasa si incluimos widget
en la columna lateral “sidebar”

Widget columna lateral
Vamos a incluir manualmente una sección y un nuevo widget (por ejemplo el
de categorias) que irá destinado a la columna lateral.
Como verás en la imagen que incluyo después no está incluido en ninguna
columna lateral porque aún no he definido los contenedores.

div -- section --widget- /section --/widget-/div

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

Diseño actual con ambos widget

Es así como visualizamos la vista diseño de nuestra plantilla con
los dos widgets incluidos: Header y Label

Experimentemos

1º Eliminemos el widget cabecera
2º Dejamos insertado el código widget Label
3º ¿Qué código interno ha añadido blogger?

Nueva plantilla interna widget
lateral “Label”
Solo incluye un includable: <b:includable id='main'>
A continuación establece un condicional (que el widget
tenga título) y aplica una etiqueta h2 al título :

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

Abre una sección con la etiqueta <div> para administrar el
contenido del widget e inserta una serie de códigos html
<div expr:class='"widget-content " + data:display + "-label-
widget-content"'>

[códigos]
</div>

Analizando los <b:if> código interno para
widget label (I)
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<span
expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection'
expr:href='data:label.url'><data:label.name/></a>
</b:if>

<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>

</li>
</b:loop>
</ul>
<b:else/>

Analizando los <b:if> código interno
para widget label (II)
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection'
expr:href='data:label.url'><data:label.name/></a>

</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div></b:includable>
</b:widget>
</b:section>
</div>
</body>
</html>

La plantilla blogger: secciones

Definir las cuatro secciones de la plantilla:
header main sidebar footer

Definición de las secciones de plantilla

<body>
<div id='cabecera'>
<b:section class='header' id='header' showaddelement='yes'/>
</div>
<div id='cuerpo-entrada'>
<b:section class='main' id='main' showaddelement='yes'/>
</div>

<b:section class='sidebar' id='sidebar' showaddelement='yes'/>
</div>
<div style='clear:both'/>
<div id='pie-de-pagina'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

</body>

Vista diseño plantilla secciones

Crear el contenedor general
Todas las secciones, las partes del blog hay que incluirlas en un
contenedor para ello tenemos que incluir las siguiente línea justo
depués de <body>

<div id='contenedor-general'>

Cerraremos la etiqueta <div id contenedor en la linea
anterior a </body> quedando:

</div>
</body>
</html>

Aplicando un widget a cada
sección y el estilo CSS

El estilo CSS
Es imprescindible que demos un formato al blog, a sus distintas
secciones. Tipo de fuente de letra, widgets, contenedor, etc.
El estilo CSS va en plantilla antes de la líneas que se indican:
[aquí el CSS]
]]></b:skin>
</head>
<body>
En cada sección se incluye un ejemplo de CSS
Y a continuación el CSS del contenedor y del cuerpo del blog

Css contenedor y cuerpo blog
/*CSS CUERPO DEL BLOG*/
body { /*CSS DEL CONTENEDOR*/
font-family:Tahoma; /*Tipografía del blog*/ #contenedor-general {
font-size:10px; /*Tamaño fuente del blog - */ width:960px; /*Ancho del blog*/
padding:0; /* Permite que no hayan espacios en margin:0 auto 0; /*Centramos el
blanco sobre el blog*/ contenido*/
margin:0; /* Permite que no hayan espacios en padding:0; /*Evitamos espaciados
blanco sobre el blog*/ internos*/
} }

Sección cabecera - widget
<div id='cabecera'>
<b:widget id='Header1' locked='true' title='plantilla 2006 (cabecera)' type='Header'>
</b:section>
</b:widget>
</div>

/*ESTILO CSS DE LA CABECERA*/
#cabecera {
margin:0 0 30px 0; /*Márgenes de la cabecera*/
height:100px; /*Alto de la cabecera*/
}

Sección cuerpo de entrada: widget
<div id='cuerpo-entrada'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>

/*ESTILO CSS DE LAS ENTRADAS*/
#cuerpo-entrada {
float:left; /*Alineación de las entradas a la izquierda*/
width:650px; /*Ancho de las entradas*/
padding:10px; /*Espaciados internos*/
}

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

/*ESTILO CSS DE LA COLUMNA LATERAL*/
#columna-lateral {
float:right; /*Alineación de la sidebar a la derecha*/
margin:0; /* Sin márgenes */
width:280px; /*Ancho de la sidebar*/
}

Seccion footer:widget
<div style='clear:both'/>
<div id='pie-de-pagina'>
<b:section class='footer' id='footer' showaddelement='yes'>
<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'/>
</b:section>
</div>

/*ESTILO CSS PIE DEL BLOG*/
#pie-de-pagina {
padding:10px; /*Espaciados internos*/
margin:30px 0 0 0; /*Márgenes*/
}

El blog está listo

Para ver con más detalle aquí

Mejorando el diseño de la plantilla
de blogger

Afinando el CSS

Mejorar la plantilla básica pasa por mejorar el CSS. El descrito hasta el
momento es el mínimo necesario, tiene que mejorarse y si no se es un
entendido en CSS lo mejor es ver plantillas y probar.
Nada mejor que el código fuente de cada home-blog como fuente de
información, además de los blog de ayuda a blogger.

CSS mejorado para la plantilla (I)
#contenedor-general {
body { width:960px;
font-family:Tahoma; margin:0 auto 0; #cuerpo-entradas {
font-size:14px; background:#F7F7F7; float:left;
color:#666; border:1px solid #white; width:650px;
padding:0; padding:0; padding:10px;
margin:0; } border-right:1px solid #CCC;
overflow-x:hidden; box-shadow:0 0 20px #ccc;
} #cabecera { }
color:#ffffff;
a{ margin:0 0 30px 0; #columna-lateral {
text-decoration:none; height:100px; float:right;
color:#0d586d; } margin:0;
} #cabecera a { width:280px;
color:#FFFFFF; }
ul li {list-style:square;} }
#header { #pie-de-pagina
width:50%; {
float:left; padding:10px;
font-family: 'Exo', sans-serif; color:#FFFFFF;
} margin:30px 0 0 0;
width:100%;
#header h1 {font-size:30px; }
Margin-left:30px; }

CSS mejorado para la plantilla (II)
.jump-link a {
.post { color:#FFF;
border-top:1px solid #CCC; max-width:120px;
padding-bottom:20px; background:#0d586d;
} padding:1px;
display:block;
.post h3 { border-radius:2px;
font-size:20px; text-align:center;
margin-left:-20px; margin:5px;
font-family: 'Exo', sans-serif; }
background:#0d586d;
color:#FCFCFC; .post-footer {
padding-left:10px; padding:4px;
box-shadow:3px 3px 0 #222, -4px background:#FCFCFC;
-4px 0 #CCC; box-shadow:0 0 1px #CCC;
} }

.post h3 a {color:#FFF;} .ads {
margin:10px auto;
width:97%;
}

CSS obtenido de ayuda blogger.info

Fondo para la plantilla
Cualquier imagen que nos guste podemos recortar una
pequeña porción, lo que nos interese y subirlo a nuestro
servidor de imágenes, Picasa por ejemplo.
Cada imagen tiene una dirección URL solo tenemos que
insertarla en el css del cuerpo de la plantilla.
Ejemplo:
body {
font-family:Tahoma;
font-size:10px;
background:url(http://3.bp.blogspot.com/-
sCB8iHObJvI/UEeH1NoQbhI/AAAAAAAAAVo/8HFCQceEOos/s160
0/fondoblogger1.png);
color:#666;
padding:0;
margin:0;
overflow-x:hidden;
}

Fondo cabecera blog
Con la misma estrategia que hemos empleado para el fondo
del blog podemos actuar en la cabecera, solo tener en cuenta
el ancho que quieres para la cabecera a la hora de recortar la
imagen..
Utilizo simplemente paint print.
Después insertar en el CSS de #cabecera:

#cabecera {
background: url(http://1.bp.blogspot.com/-
0RLG7R9ba1M/UEeKQxTY44I/AAAAAAAAAV4/fLfUFZ8N5ks/s1600
/fondotitulo.gif) repeat-x;
color:#FFFFFF;
margin:0 0 30px 0;
height:100px;
}

Referencias
http://www.oloblogger.com/2009/05/plantilla-blogger-crear-secciones.html
http://www.oloblogger.com/2009/05/plantilla-blogger-crear-secciones_12.html
http://www.oloblogger.com/2009/05/plantilla-blogger-crear-secciones-iii.html
http://www.ayuda-bloggers.info/2012/08/consejos-y-atributos-para-disenar-
la.html
http://www.blogdelujo.com/2011/10/bordes-o-lineas-de-separacion-en.html
Tutorial de blogger

Crea tu plantilla de blogger

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Crea tu plantilla de blogger

Similar a Crea tu plantilla de blogger (20)

Último

Último (20)

Crea tu plantilla de blogger