Añadir más widgets a la cabecera de la plantilla de Blogger (y II)

En una entrada anterior veíamos cómo podíamos desbloquear la cabecera de la plantilla de Blogger, para poder añadir más widgets aparte de la propia cabecera, con una técnica que no solo vale para la cabecera de la plantilla sino también para cualquier sección.

Decíamos que solo había que localizar la etiqueta que sirve para representar una sección de la plantilla (<section>),y dentro de ésta el atributo maxWidgets, que índica el número máximo de widgets que puede tener esta sección.



No obstante, hay un paso más que no comenté en esa entrada, paso sin el cual desde el menú de Diseño de Blogger (en concreto desde la pestaña elementos de página) no nos aparecerá la opción "Añadir un Gadget" en la sección que habíamos desbloqueado con los pasos mencionados en la entrada anterior.



Este paso consiste en modificar el atributo showaddelement de la etiqueta <section> para que tome el valor 'yes', en lugar del valor 'no', como podemos ver en la figura anterior.

English.

In a previous post we saw how we could unlock the head of the Blogger template to add more widgets than their own head , with a technique that not only applies to the head of the staff but also to any section.

We said we only had to locate the label used to represent a section of the template (<section>
), And within this maxwidgets attribute that indicates the maximum number of widgets that can be found.



However, there is one more step that did not mention in that entry, step, without which the menu Blogger Design (specifically from the page elements tab) does not see the option "Add a Gadget" in the section had unlocked with the steps mentioned in the previous entry.



This step is to modify the attribute label showaddelement

to take the value 'yes' instead of the value 'no', as seen in the previous figure.

Como centrar el título de la cabecera de la plantilla de Blogger dejando la imagen a la izquierda

Retomamos el tema de la personalización avanzada de plantillas de Blogger, que habíamos dejado aparcado últimamente por temas varios (tijeratazo, blog follow, liberación de una base de datos de aeropuertos del mundo).


Ultima actualización 2019: Dinorank te desplaza y enlazalia te enlaza.

En este caso, el tema que vengo a tratar es muy sencillo. Quiero crear un nuevo blog en la plataforma Blogger, y estoy realizando el diseño de su plantilla.

En la cabecera del blog (representado por el css .header de blogger) quiero poner texto y una imágen de fondo. Lo que pasa es que si se utilizan las opciones que blogger te proporciona por defecto para editar la cabecera, no existe forma de controlar la alineación del texto y de la imagen, de tal forma que en muchas ocasiones la imágen no te deja ver el texto, y viceversa. En la siguiente figura podeis ver mejor lo que estoy contando.



Por defecto, con el asistente de configuración de plantillas de Blogger no puedes arregar esto, y hacer que por ejemplo el título de la cabecera se desplace hacia la derecha, y que la imágen se quede en la izquierda de tal forma que no se pisen.

No obstante, esto sí que se puede arreglar con un poco de conocimiento de CSS, HTML y del modelo de estilos de las plantillas de Blogger. En la plantilla de Blogger, existe un estilo CSS para la cabecera denominado Header. Es necesario modificar los subelementos de este estilo (el estilo del texto, que se vuelca con la etiqueta HTML h1, y el de la imágen de fondo, con la etiqueta html image). En la siguiente figura podeis ver cómo he modificado el estilo CSS .Header .h1 ,que es el utilizado para etiquetar el título del blog, mostrado en la cabecera, para que el texto del título se desplace hacia la derecha, mientras que la imágen de fondo de la cabecera se queda en la izquierda.



El estilo CSS .Header .h1 determina las propiedades de la descripción de la cabecera, que también hemos tenido que modificar. La siguiente figura muestra los cambios aplicados para que la descripción se desplace también hacia la derecha.



Y el resultado de aplicar estos dos cambios a los estilos .Header .h1 y .Header .description lo podemos ver en la siguiente figura.



En conclusión, jugando con las propiedades right, top, width y text-align de los estilos CSS de los elementos .Header .h1 y .Header .description de la plantilla de Blogger hemos conseguido el objetivo que perseguíamos: permitir que el título y la descripción de la cabecera de la plantilla del blog no se superpongan con la imágen de fondo.

Titulos de posts de Blogger optimizados para buscadores ( SEO )

Los principales navegadores, como Google o Yahoo, una de las cosas en las que más se fijan a la hora de indexar contenidos, y categorizarlos como relevantes para determinadas "palabras clave" es en el título, y las palabras contenidas en éste.

Si has creado tu blog con Blogger, por defecto esta plataforma construye el título de las páginas de tus entradas bajo la forma "título del blog" : "título de la entrada". Cuando el buscador analice las páginas de tu blog para indexarlas, la primera parte del título es la que más peso tendrá, y en ésta siempre aparecerá el nombre del blog (no el título de la entrada, que se supone que es el que tendrá las palabras clave de mayor relevancia del post).

Se puede cambiar este comportamiento por defecto de las plantillas de Blogspot, de forma que el título de la página esté formado primero por el título del post, y luego por el nombre del blog. Para eso, solamente hay que editar el código XHML de la plantilla. En primer lugar hay que buscar un texto como el siguiente:


<title><data:blog.pageTitle/></title>


Y sustituirlo por éste otro:


<b:if cond='data:blog.url == data:blog.homepageUrl'>

<title><data:blog.pageTitle/></title>

<b:else/>

<title><data:blog.pageName/> ~ <data:blog.title/></title>

</b:if>



Guardando a continuación los cambios. Así de simple.

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.

Lo más básico de las plantillas de blogger

Si eres usuario habitual de Blogger, verás que dentro de las herramientas de configuración de un blog dado, en la pestaña Diseño, hay una subpestaña titulada "Edición de html".

Es a través de esta subpestaña por la que se puede editar y/o modificar una plantilla de blogger.

Una plantilla no es más que el lenguaje que la herramienta de blogging de Blogger (un pequeño gestor de contenidos especializado para la creación de blogs) utiliza para la definición de la apariencia del blog, y los componentes que lo constituyen.

En la pestaña edición de html podeis ver el código fuente de la plantilla Blogger de vuestro blog. Podreis comprobar que el inicio de la plantilla es siempre del tipo:

Del inicio de la plantilla de Blogger me gustaría destacar algunos conceptos básicos:

a) Una plantilla de Blogger es un documento XML. Esto implica que la plantilla debe cumplir las normas de sintaxis de XML. Cabe destacar, por contraposición a HTML, que toda etiqueta debe ser cerrada. Así, si por ejemplo incluímos la siguiente etiqueta en la plantilla, dentro de las etiquetas y (en otra entrada explicaré para que sirve esta etiqueta)

<meta name="verify-v1" content="7/uAH5PWkJbXjEG+tQPRrNNMFwME1hAp14jVF5R3m7g=">

Obtendremos un mensaje de error por parte de Blogger, que no nos dejará guardar el cambio:

La razón es que hay que cerrar la etiqueta, que es algo tan simple como añadir un carácter slash (/) antes del final de la etiqueta (esto es en XML etiquetas autocerradas).

b) El lenguaje (basado en XML) de las plantillas de blogger usa las mismas etiquetas que el lenguaje XHTML, como refleja la entrada xmlns='http://www.w3.org/1999/xhtml'.

c) El lenguaje de marcado de las plantillas de blogger usa unas etiquetas propias, etiquetas que sirven para indicar acciones al procesador de la plantilla de lado del servidor. Esto lo indica la entrada xmlns:b='http://www.google.com/2005/gml/b'. Todas las etiquetas que veamos de la forma son de este tipo.

d) El lenguaje de las plantillas de blogger también usan las etiquetas XML definidas por Google para la manipulación de datos (xmlns:data='http://www.google.com/2005/gml/data') y para la construcción de expresiones (xmlns:expr='http://www.google.com/2005/gml/expr')

Así que, en conclusión, para construir (o modificar) una plantilla de blogger, solo hay que empollarse las etiquetas XHTML, B (de Blogger), DATA (de Google) y EXPR (de Google).