.

5 de mayo de 2014

Plantila de Blogger para aprender a retocar plantillas

Escrito por
La mayor parte de blogs de Blogger se crean con plantillas prediseñadas, bien las que ya tienes de partida en el programa o algunas de las plantillas que han creado otras personas. Pero lo cierto es que una de las ventajas que tiene Blogger respecto a Wordpress es que resulta más asequible personalizar el blog y quizás te interese aprender a retocar las plantillas de arriba a abajo. Para aprender a hacer modificaciones en tu blog resulta muy interesante poder hacer pruebas antes con una plantilla más sencilla. Y eso es lo que te presento en este artículo, un enlace para que te descargues una plantilla gratis para Blogger (que da algunos problemillas y por ello te recomiendo que leas el artículo hasta el final).

https://app.box.com/shared/bec8yy78kg



¿Qué características tiene el template que te ayuda a tu aprendizaje?
  • Template minimalista y corto. Tiene unas 1100 líneas de código, cuando una plantilla normal suele tener más de 2000 líneas y algunas se van a 3000 líneas. 
  • No hay líneas de código anidadas.
  • Los códigos HTML y CSS usados se muestran con gran claridad, incluso se incluyen los valores cuando estos son de 0, para evitar cualquier duda.
  • Se han eliminado gadgets y otros elementos accesorios del blog.
  • Diferentes segmento divididos con muchas claridad. Se diferencia perfectamente donde se termina el lenguaje CSS y empieza la estructura de la página en HTML.
  • Template multicolor. Cada zona está en e diferentes colores: te ayudará a visualizar todos los cambios que realices en la plantilla. 

¿Cómo usar la plantilla en un blog?
El problema principal que encontramos con esta plantilla es que el código que han dejado en el archivo xml cuando lo editas sin formato aparece roto. Así que hay que tener un poco de paciencia y arreglarlo. Lo que me planteo es si eso lo ha hecho alguien de forma expresa porque al mismo tiempo que vas poniendo el código en orden te obliga a ir leyendote toda la plantilla y eso te ayudará a familarizarte con el código y ver como hay algunos trozos que se repiten. Vamos a la faena.
  1. Descargarse la plantilla xml en el ordenador.
  2. Descargarse un editor de texto gatuite como por ejemplo NotePad.
  3. Abrir la plantilla xml en el NotePad, o hacer copiar y pegar. Ahora es cuando se te cae el alma al ver que las líneas no están bien cortadas, sobre todo en la cabecera.
  4. Verás que tienes dos numeraciones, la que ta automáticamente el NotePad a la izquierda y dentro del código html tienes la numeración, pero con la línea 1 partida en varios trozos, la 2 también y así sucesivamente.
  5. Con mucha paciencia tienes que ir quitando los saltos de línea para que toda la línea 1 vuelva a estar junta. Y luego borramos los números. Cuando te satures lo guardas y continuas otro día.
  6. Una vez lo tengas todo rectificado. Creas un blog nuevo para hacer pruebas y aprender.
  7. Abre la pestaña de plantillas. Vamos a editar código HTML.
  8. Borra la plantilla del blog nuevo entera.
  9. Vas al NotePad para copiar la nueva plantilla y la pegas en Blogger.
  10. Guardadas y compruebas que todo está bien.
Una vez que tengas la plantilla en el blog puede empezar el siguiente tutorial en inglés que te explica las partes del blog y cómo modificarlas. Si tienes un poco de paciencia, en blogeninternet.com lo traduciré y lo completaré, para que aprendas a crear tu propia plantilla de Blogger paso a paso.


NOTA: Para que te hagas una idea de como tiene que quedar el código, las 30 primeras líneas serían así (si copias y pegas este texto en NotePad verás cómo sólo hay 30 líneas).

<? 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 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'/>
<title><data:blog.pageTitle/></title> 

<b:skin><![CDATA[
/* ************ START OF CSS STYLING ************ */


/* ------------------------------------------------------- 
   Blogger Template Design: Generic Template
   Designer: Elque | 1 June 2007 | dzelque.blogspot.com
   ------------------------------------------------------- */


/* Variable definitions
========================
<Variable name="bodybgColor" description="Body Background Color"
type="color" default="#D0FC5D" value="#D0FC5D">
<Variable name="contentbgColor" description="Content Background Color"
type="color" default="#D5D600" value="#D5D600">
<Variable name="headerbgColor" description="Header Background Color"
type="color" default="#6060FF" value="#6060FF"> 
<Variable name="mainbgColor" description="Main Background Color"
type="color" default="#077401" value="#077401">
<Variable name="postbgColor" description="Post Background Color"

0 comentarios:

Publicar un comentario

Bienvenido, en este blog encontrarás información para crear y personalizar tu blog de Blogger o Wordpress, además de artículos sobre Internet, las nuevas tecnologías, programación con HTML y CSS, educación y otros temas. Espero que los tutoriales, artículos y recursos del blog te resulten útiles. Si quieres mantener el contacto puedes hacerlo a través de mis cuentas de Twitter o Google Plus.