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.

Este es un blog follow: u comment i follow

Este blog es un blog "follow".

¿Qué significa esto? Significa que he eliminado de todos los enlaces html del blog, en especial de los comentarios, el atributo rel = "nofollow", medida ésta que se creó en su día para eliminar los comentarios spam de los blogs, pero que pienso que hoy en día no es necesaria con la existencia de los formularios captcha (palabras de confirmación en formato imágen, y por tanto no inteligibles para un bot de Internet de forma que deban ser rellenadas por un usuario humano).

¿Y qué se consigue con que éste sea un blog follow? Sobretodo incentivar la participación en el blog, mediante la escritura de comentarios, de aquellos lectores que tengan un blog y deseen adjuntar un enlace a éste en los comentarios. El enlazar a tu blog es una recompensa por el algoritmo que Google utiliza para indexar los contenidos de la web: Page Rank, que asigna relevancia (y por tanto prioridad en el listado de resultados mostrados para una búsqueda concreta) en función del número de sitios que enlacen a otro. Un sitio es más relevante cuanto más sitios enlacen a él (esto es simplificar mucho, pues se tienen en cuenta otros factores, pero nos sirve para entendernos).

Así que nada, blogeros, animaros a comentar que éste es un blog follow.

English.

This blog is a blog "follow."

What does this mean? It means I've removed all html links blog, especially the comments, rel = "nofollow" , a measure that was created at the time for removing comment spam from blogs, But I think today is not necessary with the existence of forms captcha (word format confirmation image, and therefore not intelligible to an Internet bot so that must be filled by a human user).

What is achieved that this is a follow blog? Especially encourage participation in the blog, by writing comments, readers who have a blog and want to attach a link to it in the comments. The link to your blog is a reward for the algorithm that Google uses to index the contents of the site Page Rank, which assigns importance (and therefore priority in the list of results displayed for a particular search) depending on the number of sites linking to another. A site is more relevant the more sites link to it (this is to simplify a lot, it takes into account other factors, but helps us to understand).

So nothing, bloggers, to encourage you to comment that this is a follow blog.


Carta abierta al gobierno de Zapatero

Acabo de enviar el siguiente comentario en el blog de Leire Pajín. Como no creo que lo publiquen, le daré difusión a través de este propio blog.

Soy funcionario, grupo A. Me vais a bajar el sueldo el 10,5% según lo que cuenta el diario El País. Yo con mi sueldo pago la guardería de mis dos niños, mi hipoteca, y comemos toda mi familia, pues mi mujer está en paro. ¿Es esto progresivo? En el IRPF, que sí es justo y progresivo, pago menos que una persona que gane lo mismo que yo que sea soltero. Como lo vais a hacer, yo lo voy a sufrir mucho más que el soltero sin cargas.

Otra cosa: destino todo mi sueldo a vivir, al llegar a fin de mes no ahorro nada. Los políticos, entre los que tú te encuentras, ahorrais todo vuestro sueldo, o lo invertís. Así que no me contento con que os rebajeis el sueldo el 15% vosotros. Renunciad a las dietas, y pensaré que dais ejemplo. A tí te dan 1000 y pico euros en concepto de dietas para desplazarte a vivir a Madrid. Cuando yo me fuí a Madrid a cobrar 1200 euros de funcionario del estado, tenía de sueldo menos de lo que tu tienes de dietas.

Más cosas: yo no puedo compatibilizar mi trabajo con actividad privada, y con otra actividad pública si no de dedico más de 20 horas adicionales. ¿Por qué tu si puedes tener dos sueldos, el de tu partido y el de senadora? ¿No son incompatibles ambos cargos? Es como si yo cobrara por adjudicar contratos (un senador debe luchar por la sociedad) y también por ejecutarlos con una empresa privada (tu partido).

No creo que llegueis a publicar esto.
Saludos.

Insertar HTML en Blogger

En entradas anteriores ya hemos comentado que la plataforma de Blogger, de forma interna en sus plantillas, trabaja con XHTML, que es una implementación de HTML sobre el lenguaje XML.

Esto se traduce en que las normas para escribir páginas web es mucho más extricta que en otros entornos (basados en HTML, que es menos ríguroso que XHTML).

Además de tener mucho cuidado con cerrar todas las etíquetas, esto se vuelve especialmente engorroso cuando queremos insertar código HTML para que Blogger lo muestre en una entrada. Para poder hacer esto, hay que "escapar" el código, y si el bloque HTML es muy largo, esto se convierte en un engorro.

La alternativa sencilla es utilizar servicios como el de Simplebits.

Se trata de un formulario web muy simple, en el que puedes introducir en un cuadro de text el código html que deseas insertar en tu blog, y tras pulsar el botón "procesar" se te muestra en otro cuadro de texto el código convenientemente "escapado", para que Blogger (o cualquier otro motor) no te de problemas.

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.

Extraer direcciones http de un texto con expresiones regulares

He desarrollado una aplicación, que algún día pienso liberar como software libre (cuando tenga una interfaz de usuario medio decente, que permita que cualquier usuario pueda utilizarla, y no ahora que no tiene interfaz gráfica y consiste en una serie de scripts) que permite monitorizar el estado de un determinado asunto o temática, extrayendo enlaces relacionados con éste de una de las principales redes sociales: Twitter. Teneis ejemplos de posts creados automáticamente con este software aquí.

¿Cómo funciona este programa? Supongamos que montáis una página sobre juegos y apuestas. Os gustaría ofrecer a vuestros lectores información candente sobre estos: apuestas on-line, peñas virtuales, lotería, bono-loto, casas de apuestas por internet, comisiones, etc. ¿Cómo lo haríais? ¿Buscando en Google?

Desde luego es una alternativa, pero mi programa lo que trata de hacer es explotar el auge de las Redes Sociales. Cuando una persona pone un enlace en una Red Social (ya sea a través de un post en twitter o en el muro de facebook, o con un social-bookmark de Del.icio.us), es porque éste enlace le ha parecido lo suficientemente bueno como para compartirlo. Digamos que pasa una primera criba: alguien lo ha leido y lo recomienda.

El primer paso para buscar enlaces relacionados con una materia es definir una lista de tópicos y palabras clave que representen esta materia: la base de datos de conocimiento. Ahora mismo esta base de conocimiento se crea mediante un fichero de texto plano. Ahí podeis incluir los tópicos que deseais monitorizar en la Web 2.0: apuestas, lotería, juegos on-line, poker, etc.

Seguidamente, el programa busca en las redes sociales por estos términos de búsqueda, analiza el texto, extrae enlaces, y construye un post con todos los enlaces localizados en relación con éste término de búsqueda.

El proceso de generación automática de posts lo he tenido paralizado un tiempo porque la expresión regular que utilizaba para extraer enlaces del texto de los tweets estaba fallando.

La expresión regular original era esta:

http://.*?$

Esta expresión regular estaba claramente incorrecta, porque si el proceso encontraba textos como el siguiente: "Enlace interesante en http://url.org sobre cualquier tema", al tratar de extraer el enlace obtenía algo así: "http://url.org sobre cualquier tema". Es decir, detectaba el principio del enlace, pero no el final.

Lo he conseguido arreglar sustituyendo la expresión regular anterior por esta otra:

http://[^\\s]+{1,}

Entraré en más detalle sobre expresiones regulares en posts sucesivos. Lo cierto es que ahora sí funciona el proceso.