Personalizar la plantilla de blogger: utilizando la temida pestaña "edición HTML" de Blogger.

Si utilizas la plataforma Blogger para albergar tu blog, lo normal es que emplees alguna de las plantillas que Blogger te ofrece en el momento de creación del mismo, o que te descargues alguna plantilla (en formato XML) de las numerosísimas plantillas de Blogger existentes en la red.

No obstante, en ocasiones puede ser que desees personalizar el diseño de tu plantilla, y de que la pestaña de diseño de Blogger, que te permite añadir widgets y posicionarlas con el ratón, se te quede corta.



Entonces es momento de que utilicemos la temida pestaña "Edición de HTML".



Toda plantilla de Blogger tiene una estructura, más o menos común, formada por "Secciones de Plantilla". Alguna de éstas secciones son opcionales, mientras que otras son obligatorias. La distribución más común de las secciones de una plantilla de Blogger es la siguiente:



En mi caso, yo quería añadir en mi blog sobre oposiciones TIC, entre la imágen del título y la sección principal del blog un cuadro de contenido destacado. Según el esquema de la figura anterior lo tenía que introducir entre la sección header-wrapper y la sección main-wrapper.

Abriendo la pestaña "Edición de HTML", y marcando el cuadro de selección "Expandir plantilla de artilugios", tendremos acceso a todo el código xhtml de nuestra plantilla de Blogger. Mi primer intento fué intentar localizar el inicio de la sección main-wrapper de la plantilla, pero con la función Buscar de Firefox, no encontraba el texto main-wrapper. Aquí vino en mi ayuda el excelente plugin de Firefox Firebug. Firebug es el sueño de todo desarrollador web. Entre otras muchísimas funciones, entre las que se incluye la posibilidad de debugear código javascript o de monitorizar las peticiones de red realizadas por vuestro navegador, se encuentra la de que os muestre de un modo visual las secciones de vuestra página, y el código html asociado a éstas. Esto es esencial porque, si quieres modificar una determinada sección de una plantilla, muchas veces lo más dificil es localizar el código html que contiene la sección a modificar.



Para utilizar Firebug no hace falta ser ningún genio de la Informática: lo instalas, pulsas F12 para activar Firebug, activas el botón "Inspeccionar", y a partir de este momento te aparecerá un cuadro de texto en la parte inferior de la pantalla, que se actualizará conforme te desplaces con el ratón para mostrarte el código html asociado a la zona situada bajo su puntero.

Una vez realizada esta operación, pude ver que la sección donde yo quería insertar un apartado de contenido destacado se llamaba main-wrap1. Localicé el código asociado a esta sección en el menú de edición HTML de blogger, y justamente antes de éste introduje el código de mi sección.



Hay que tener mucho cuidado con la apertura y cierre de las etiquetas. La sintaxis de blogger está basada en XHTML, es decir, HTML implementado sobre XML, y como todo documento XML ha de estar bien formado: todas las etiquetas deben tener apertura y fin, etc. La sintaxis de plantillas de Blogger te permite hacer muchas filigranas, haciendo uso de sus etiquetas b:section y b:widget, y utilizando sus expresiones.

Yo me limité a introducir una serie de enlaces muy sencillos, estáticos, que quería que apareciesen destacados justo detrás de la cabecera del blog. Mi idea es resaltar algunas entradas antiguas que tuvieron cierto éxito, y que no han perdido nada de actualidad. El código que añadí a la plantilla fue el siguiente:



<!-- Sección de contenido destacado -->

<div class='status-msg-wrap'>

<div class='status-msg-body'>

<b>Contenido destacado</b>:  

<a href='http://oposicionestic.blogspot.com/search/label/examen%20de%20test'>Exámen de test</a>

<a href='http://oposicionestic.blogspot.com/search/label/sueldo'>El sueldo de un funcionario TIC</a>

<a href='http://oposicionestic.blogspot.com/search/label/funcionamiento%20del%20proceso%20selectivo'>Cómo funciona el proceso selectivo</a>

</div>

<div class='status-msg-border'>

<div class='status-msg-bg'>

<div class='status-msg-hidden'>

<b>Contenido destacado</b>:

<a href='http://oposicionestic.blogspot.com/search/label/examen%20de%20test'>Exámen de test</a>

</div>

</div>

</div>

</div>





Y el resultado final fué el siguiente:



La modificación de la plantilla de Blogger editando el código HTML de la misma es una técnica muy potente, que tiene infinidad de aplicaciones prácticas. La primera que se me ocurre, que trataré en una futura entrada de este blog, es la de personalizar la ubicación de los anuncios de Adsense en nuestras entradas. Por defecto, Blogger no te deja controlar totalmente esta ubicación, de forma que puedes introducir un anuncio al principio y / o al final de una entrada, pero no en medio.