Crea tu plantilla de blogger

Como crear desde cero una plantilla de blogger

Experimentando con HTML

El blog del C.M.

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

http://agamezcm.blogspot.com.es

Ayuda para bloggers

Ayuda bloggers

El blog de Emilio Cobos

El blog de Pedro Pablo

El Balcon de Jaime

Oloman

El blog de JMur -vagabundia

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.

http://www.ayuda-bloggers.info/

http://www.ayuda-bloggers.info/

http://emiliocoboscmc.blogspot.com.es/

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

Fuente: blogdelujo.com

#body

#outer-wrapper

#header-wrapper

#main-wrapper

#sidebar-wrapper

#footer

#footer-wrapper

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:section class='header' id='header' showaddelement='yes'> <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:

<b:section class='header' id='header' showaddelement='yes'>

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

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






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

El primer includable: main

El primer includable aparece incrustado en nuestra plantilla:

<b:section class='header' id='header' showaddelement='yes'><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'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </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:include name='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'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </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í

http://www.gemablog.com/2009/06/personalizar-la-descripcion-del-blog.html

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

div -- section --widget- /section --/widget-/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/>

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

Analizando los <b:if> código interno para widget label (II)

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

<div id='columna-lateral'> <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 CSSEs 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 {font-family:Tahoma; /*Tipografía del blog*/font-size:10px; /*Tamaño fuente del blog - */padding:0; /* Permite que no hayan espacios en blanco sobre el blog*/margin:0; /* Permite que no hayan espacios en blanco sobre el blog*/}

/*CSS DEL CONTENEDOR*/#contenedor-general {width:960px; /*Ancho del blog*/margin:0 auto 0; /*Centramos el contenido*/padding:0; /*Evitamos espaciados internos*/}

Sección cabecera - widget<div id='cabecera'> <b:section class='header' id='header' showaddelement='yes'><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<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>

/*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*/}

Vista diseño del blog actual

El blog está listo

Para ver con más detalle aquí

http://agrplantilla1.blogspot.com.es/

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)

body { font-family:Tahoma; font-size:14px; color:#666; padding:0; margin:0; overflow-x:hidden; }

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

ul li {list-style:square;}

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

#cabecera {color:#ffffff;margin:0 0 30px 0;height:100px;}#cabecera a {color:#FFFFFF;}#header {width:50%;float:left;font-family: 'Exo', sans-serif;}

#header h1 {font-size:30px;Margin-left: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{padding:10px;color:#FFFFFF;margin:30px 0 0 0;width:100%;}

CSS mejorado para la plantilla (II)

.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:120px;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%;}

CSS obtenido de ayuda blogger.info

Fondo para la plantillaCualquier 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/s1600/fondoblogger1.png); color:#666; padding:0; margin:0; overflow-x:hidden; }

Fondo cabecera blogCon 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;}

Referenciashttp://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

Education

Transcript of Crea tu plantilla de blogger