1er bobo-tutorial: ensanchecer Blogger

Como diría Jedebiah Springfield, he ensanchecido el blog. Y es que una de las cosas que menos me gustaba del diseño por defecto es el espacio de escritura en una estrecha columna central, dejando amplios márgenes a los lados inservibles. ¿A qué se debe esto? No lo sé. Sea cual sea la respuesta, otros diseños (blogs de Wordpress, por ejemplo) no parecen considerarla. El diseño tradicional de Blogger está bien si lo que se pretende es publicar un vídeo y decir: "¿Qué os parece?", pero cuando los escritos sobrepasan las 1000 palabras los posts quedan demasiado largos y para evitarlo hay que a) ponerlo a letra muy pequeña o b) aprender a cambiar el diseño.

Yo he venido optado por la opción a). Pero como me daba un poco de vergüenza ser informático y no intentar al menos aprender cómo funcionaba esto, me he puesto manos a la obra. Y bien, ya he entendido como funcionan los diseños o templates de Blogger. Bueno, he entendido cómo funciona el diseño de MI página, que puede no ser el mismo para otros diseños que Blogger ofrece. De todos modos un buen diseño debe poder permitir cambiar el aspecto general realizando pocos cambios, así que no debe ser muy difícil ensanchecer otros blogs.

Para ponerme a prueba, he decidido ensanchar los márgenes de un blog amigo (El Rincón de Pinar). Con un poco de idea, Dreamweaver 8 (vale cualquier editor de texto) y Gimp2 (aceptamos Paintbrush) en menos de 10 minutos he ensanchecido el mismo. Y como me aburro, explico cómo. Quizá haya mejores tutoriales en la red para hacer lo mismo. Creo que no.

Empecemos por el sentido común y leemos el código del template¹. Vemos que hacia el principio pone algo como layout. Buscamos layout. Vemos que significa diseño o composición... pues por ahí tenemos que toquitear.

/* layout
----------------------------------------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: left;
font: $bodyFont;
}

Width significa anchura. La anchura de outer-wrapper (envoltorio externo, es decir lo de más de fuera) es 760 loquesea (px significa pies xuntos para nuestros propósitos). Como queremos que sea más grande, ponemos 900 pies xuntos. Como se ve, no hace falta tener ni idea de informática. Por eso hay tantos tutoriales en linea de informática. Sigamos, empero, con el nuestro.

#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y left top;
}

#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Content es contenido. El envoltorio del contenido también medía 760px. Ya sabemos que ahora tiene que medir 900. El main-wrapper es el envoltorio principal. Ahí se enmarcan nuestros posts. Como queremos hacerlos más grandes, lo cambiamos a 600px. Para esto es necesario hacerse con una calculadora: 760 es a 483 como 900 a x. Yo he puesto 600px porque no gasto calculadora.

Ya hemos acabado. Si ahora salvamos y vemos qué pasa (las pruebas mejor hacerlas en una página en el disco duro), veremos que muy posiblemente, no hemos acabado. Los colores y lineas no cuadran con el texto. La gracia está en que las imágenes que dan color y ornamentan el blog están pensadas para unos tamaños determinados. Por eso no basta con cambiar el tamaño de los márgenes: debemos adecuar las imágenes a los nuevos tamaños. Generalmente estas imágenes corresponden a la cabecera y pie del blog y algún tipo de imagen que separe el texto (main) de la barra lateral (sidebar). En mi caso es una imagen como ésta, que se repite en el eje vertical (y). En caso de dudas, lo mejor es escribir la dirección de cada imagen en el navegador para ver de qué se trata. Así sabemos en qué parte del código debemos reemplazar.

#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif) no-repeat left bottom;
}

#header {
background: #634320 url(http://www.blogblog.com/thisaway/bg_header.gif) repeat-x left bottom;
}

Estas son la imágenes que componen la cabecera. Ambas tienen 760px de longitud. Bueno, necesitaremos bajarlas, editarlas para que tengan 900px y buscar un servidor donde alojarlas. Si tenemos Blogger, entonces también tendremos PicasaWeb². Luego reemplazaremos la url del template por la que nos ofrezca el servidor. url significa "una ristra de letras" para nuestros propósitos. Lo mismo haremos para la(s) imagen(es) que usamos como separador. Ejemplos:

Separador: antes y despues.
Separador(es) de Pinar: antes (I, II, III) y después (I, II, III).
Nuevo código de mi separador.

#content-wrapper {
position: relative;
width: 900px;
background: #f7f0e9 url(http://img382.imageshack.us/img382/8864/bgmainwrappercc0.gif) repeat-y left top;
}

Y ya hemos acabado. En mi caso, ha sido también necesario cambiar las imágenes del pie del blog (footer). Dificultad no tiene ninguna, como todo buen tutorial on-line. De hecho, poner la etiqueta informática a esto da un poco de grima, pero prefiero no inventar más etiquetas hasta tener nuevos posts del tema. Próximo tutorial: "cómo ofrecer la suscripción a etiquetas del blog con divertidos dibujos inclusive".
Tampoco lo he encontrado en Google.

ACTUALIZACIÓN

No copies y pegues el código de este post en el template de tu blog, aunque los colores de tu blog coincidan con los de el mío. Antes, preocúpate de subir las imágenes de fondo a tu propio servidor de almacenamiento de imágenes (como ImageShack). De lo contrario, estarás utilizando MIS imágenes, y el día menos pensado te puedes quedar sin ellas.

¹ Si no sabes dónde encontrar el template de tu blog, mejor saltarte todo el post.
² Picasa no es recomendable, puesto que sólo almacena ficheros JPEG. Yo gasto ImageShack, en el cual no sé si confiar, después de haberme hecho la jugada de impedir postear imágenes en el blog sin razón alguna. Cosa que, por supuesto, llenó de ranas el mismo. Tras enviar un correo solicitando una explicación encuentro que ya está todo de nuevo arreglado. Por si acaso, hay otros servidores de alojamiento como Hotlinkfiles y Filenanny.