ChatoBlog

Primero lo primero.
Nuestro objetivo es diferenciarnos, así que deberemos prescindir de utilizar las plantillas clásicas del Blogger. Sitios de plantillas hay por montones en la red, pero lo que si, debemos asegurarnos de que estas plantillas soporten XML, que es con lo que trabaja el Blogger actualmente. Un buen sitio para sumergirnos en nuestra búsqueda de la plantilla ideal es BTemplates, dudo mucho que después quieran visitar otro.

Por lo general, lo que descargaremos será un .zip con un archivo XML; algunas plantillas descargán además ficheros con archivos .js, .css que son los que hacen posible el funcionamiento de algunas características especiales del blog. Por lo pronto, lo único que nos interesa es tener a la mano el archivo XML.

Cargando la plantilla
Lo siguiente es reemplazar la plantilla antigua por la nueva, para ello deberemos entrar a la opción "Edición de HTML" dentro de "Diseño" del panel de control de nuestro blog. A continuación debemos subir el archivo XML que descargamos en "Carga una plantilla desde un archivo de tu disco duro", le damos "Subir" y guardamos la plantilla; con esto ya habremos completado la primera parte.

Empezaron los problemas
Si hasta aquí ya les gusta y están contentos con el resultado pues no hay más que hacer, pero algo me dice que no pues todavía los veo por aquí. Muy bien, algo muy recomendable ya en este punto, es ser precavidos y recordar siempre hacer una copia de seguridad antes de aplicar cualquier cambio, me lo van a agradecer.

Para lo siguiente ya se hace necesario conocimientos básicos de CSS, de programas como Photoshop, Fireworks y Dreamweaver... o al menos tener muchas ganas de amanecerse y a cocachos aprender.

Pirateando tu propio blog
Si queremos modificar la plantilla a un nivel mas avanzado necesitamos ver como es que esta hecha y tener control sobre los estilos CSS y las imágenes. Quizá para una persona mas curtida de estos temas sea tan sencillo como revisar el código fuente para darse cuenta del asunto, pero para el resto de los mortales aquello nos sigue resultando un tanto alienígena.

Bien, no hay porque tirar la toalla, lo que único que necesitamos es una referencia visual que nos muestre de una manera práctica como nuestros cambios van afectando a nuestra plantilla, así que lo que haremos es guardar una copia html en nuestra máquina, y con ella, todos los archivos necesarios que hacen que se muestre como se ve. ¿Cómo? ¡Sencillo!, abrimos un navegador, entramos a nuestro blog y le damos "Archivo/Guardar como..." (Firefox) ó "Página/Guardar cómo..." (IExplorer).

Así de fácil habremos obtenido el html, los CSS y las imágenes de un porrazo y sin mucho esfuerzo.

Optimizando
Usualmente las plantillas trabajan con un CSS vinculado externamente, pero también hay casos en que los encontrarán los CSS incluidos dentro del código fuente, así que como consejo les recomendaría que lo separen y vinculen para poder trabajar con mayos comodidad e independencia. Otro asunto que podríamos aprovechar ya que estamos ahí, es verificar que en efecto estén todas las imágenes que necesitamos dándole un vistazo a los estilos, una manera rápida de darse cuenta de cuales faltan es fijándose en la URL: si están con ruta local sí, si con ruta absoluta no.

Editando los estilos
A partir de ahora Dreamweaver es nuestro amigo. Modificamos y probamos; ojo, sólo modificamos estilos y mas bien, teniendo como referencia el html podemos ubicar rápidamente el estilo que esta aplicado sobre la zona en cuestión que seleccionamos. De que ayuda, ayuda.

El problema de las imágenes
Si, es casi seguro de que al modificar algún estilo nos demos con la sorpresa de que gran parte de lo que modificábamos debe su apariencia al uso de alguna imagen. Bueno, seguro ya se olían que la cosa no iba a ser fácil, así que este es el momento preciso para la cafeína o del estimulante que les haga mayor efecto.

Lo que haremos es tomarle un "pantallazo" al blog con el popular botón de "Print Screen" y creamos un nuevo documento en Photoshop (si es que tienen la imagen en memoria no va a ser necesario preocuparse por las dimensiones ni resolución, aparecen automáticamente) y pegamos.

La solución que se me ocurrió fue rehacer toda la plantilla en Photoshop para lo cual necesitaba tener esta imágen como referencia para respetar las dimensiones y las formas (ya que sino serían modificaciones más difíciles de manejar) para luego sobre una archivo 100% editable ver que cambios le podía hacer en el diseño.

Con paciencia, nos dedicamos a "parchar" las partes que necesitamos; el éxito del resultado dependerá de la paciencia/meticulosidad/pericia de cada uno.

Una vez terminado el proceso, debemos ser cuidadosos de exportar las imágenes con los nombres que les corresponden y a no ser que sepamos como editar los estilos, también respetar los tamaños. Algo que me sirvió de ayuda para esto último es jalar las imágenes originales al archivo de Photoshop y colocarlas encima para poder definir los límites de corte.

¡Listo Calixto!
Ahora lo único que nos quedaría por hacer subir nuestras imágenes y estilos a un servidor y entrar en el panel de control del blog/Diseño/Edición de Html para borrar los estilos antiguos (si es que hubieran) y añadir la línea de código que vincula el nuevo archivo CSS que utilizamos.