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.

Adsense: generar ingresos con tu blog

No nos engañemos. Con un blog es muy difícil ganar dinero. Ahora bien, si tu blog funciona bien, y tienes un cierto número de visitas, sí que es posible que al cabo del año consigas recaudar al menos para cubrir los gastos derivados de comprar un dominio, pagar un alojamiento dedicado (en lugar de utilizar servicios gratuitos como el de blogger, etc.)

Si no tienes un número de visitas razonable, la solución más simple es utilizar un servicio de publicidad contextual, en el que se pagará por el número de enlaces visitado por tus visitantes. En este sentido, Google Adsense es el referente (y aunque muy criticado, el más extendido).

El primer paso para poner publicidad de Adsense en tus páginas, es crear una cuenta de Adsense. Esta cuenta, como la casi totalidad de productos de Google (existe alguna excepción, como es el caso de Youtube), deberá ir ligada a una cuenta de correo Gmail.

Para darte de alta en Adsense, deberás visitar su página principal (http://www.google.com/adsense)



Seguidamente, deberás pulsar el enlace "Registrese ahora", y rellenar una serie de datos relacionados con el servicio que hará uso de la publicidad Adsense (el blog en el que la vas a incrustar) y con el pago de los ingresos (datos bancarios, domicilio del beneficiario de los pagos, etc.).

Solo aclarar que el proceso de registro en Adsense no es ni mucho menos automático. Entre que se rellenan los datos del formulario de la página de Adsense, y que la gente de Adsense se pone en contacto contigo para comunicarte que se acepta tu solicitud, pueden transcurrir un par de semanas.

Una vez que se te facilita la cuenta de Adsense, y que puedes entrar en ésta para crear anuncios e insertarlos en tu página (la propia web de Adsense te genera el código html/javascript que debes insertar), el último paso será verificar tu cuenta bancaria (si decides recibir los pagos por transferencia, y no por cheque). Para ello, la gente de Adsense te hará un ingreso testimonial y aleatorio(unos pocos céntimos de euro o centavos de dólar), y tu tendrás que introducir la cuantía del mismo en la web de Adsense.



Pantalla de administración de bloques de anuncios de Adsense.



Propiedades de un bloque de anuncios determinado.




Generación del código fuente a insertar en tu página web con Adsense.

Centro para webmasters de Google

En posts anteriores hemos visto la herramienta Google Webmaster Tools, que permite realizar diversas operaciones relacionadas con el posicionamiento en Google de nuestra web. Aunque pienso seguir tocando en futuros posts las diferentes funcionalidades de Google Webmaster Tools, ésta no es la única herramienta que Google pone a disposición de los desarrolladores de sitios web en general y blogs en particular.

A través de la dirección http://www.google.com/webmasters/ podéis acceder al centro web para webmasters de Google.



De las diferentes herramientas que puedes encontrar en el Centro Web para Webmasters, en este post voy a destacar dos de ellas: el Asistente Informativo sobre el Estado de Indexación de un Sitio y la Utilidad para añadir una URL al sitio de Google.

Empecemos por la segunda de ellas. Si queremos que Google indexe nuestro sitio web, y todavía no hemos creado ningún sitemap y por tanto no le hemos reportado a Google a través de su herramienta Webmaster Tools, esta opción nos permite enviar la URL principal de nuestro blog al rastreador de Google.





Una vez que hemos reportado a Google la URL de nuestro blog, con la herramienta que acabamos de ver (o bien a través de Google Webmaster Tools y el envío de un sitemap), podemos consultar el estado de indexación de nuestro sitio con la primera herramienta mencionada en el post: Asistente Informativo sobre el estado de un Sitio. Se trata de una herramienta muy simple: en primer lugar introducimos la dirección de nuestro blog.


Y seguidamente se nos muestra la información sobre el estado del sitio.

Sitemaps en Blogger

Ya hemos dedicado varios posts a describir lo que son los sitemaps, a cómo enviarselos al rastreador web de Google a través de Google Webmaster Tools o incluso a describir su sintaxis, que está publicada en el sitio sitemaps.org (mantenido por las grandes compañías de la web: Google, Yahoo, Microsoft).

Ahora bien, si no tienes grandes conocimientos de programación (XML no es un lenguaje de programación, pero no deja de ser un formato muy árido para un usuario normal), querrás generar estos sitemaps de forma sencilla, con herramientas que te ayuden.

Los usuarios de Blogger están de suerte: Google Webmaster Tools les permite registrar como sitemap la dirección de su feed atom. Ya veremos en otros posts que es eso del feed atom (me extrañaría que tengas un blog y no sepas lo que es un feed RSS o Atom). Ésta es la URL base de tu blog seguida de la cadena "/atom.xml".



Una vez pulsado "Enviar sitemap", ya tenemos un sitemap registrado para nuestro blog en el rastreador de Google, y esto le permitirá detectar las nuevas entradas que vayamos añadiendo más rápidamente.

Ocultar la barra de blogger

Como ya comentamos en uno de nuestros primeros posts, Blogger ofrece un lenguaje muy potente para personalizar el aspecto y diseño de nuestros blogs: las plantillas de Blogger. Este lenguaje está basado en XHTML, pero a su vez incluye una serie de etiquetas específicas de Blogger para dar instrucciones al motor de gestión de contenidos de Blogger.

En el citado post, vimos que para editar una plantilla solo hay que entrar en la pestaña de Diseño de la herramienta de administración de nuestro blog, y seleccionar la opción "Edición de Html". Para tener una visión global y completa de todos los elementos incluídos en la plantilla es conveniente marcar la opción "Expandir plantillas de artilugios".



En este post vamos a ver un pequeño truco: cómo ocultar la barra de blogger (esa pequeña cabecera que nos muestra el logotipo de Blogger junto con una serie de opciones para visitar otros blogs o para acceder directamente a la herramienta de administración de vuestro blog).



Para ocultar esta barra, vamos a utilizar las propiedades de estilo que el estandar CSS (Cascade Style Sheet, hojas de estilo en cascada) nos proporciona. Para ello, tan solo es necesario conocer el identificador de la etiqueta html que contiene la barra de blogger. Éste es navbar-iframe (más adelante en otros posts veremos como con herramientas del tipo firebug se puede conocer los atributos html y css de cualquier elemento de una página).

Al grano, para no aburrir a los lectores que no tengan grandes conocimientos de desarrollo (html y css básicamente): podeis ocultar la barra de blogger localizando dentro de vuestra plantilla el texto "body {", y añadiendo inmediatamente antes la siguiente línea:

#navbar-iframe {
height:0px;visibility:hidden;display:none
}

Seguidamente solo tendréis que guardar los cambios y visualizarlos entrando en vuestro blog.

Acabo de hacerlo con la plantilla de este blog (que por cierto no es muy elaborada, de ahí el título de "blog minimalista", ya que mi objetivo no es hacer florituras con éste) y ya no aparece la barra de blogger.

Otro debate sería si es conveniente mantener esta barra, por múltiples razones que ya comentaremos en otras entradas.

Sitemaps

En el post anterior hacía la siguiente definición de sitemap:

Los "sitemaps" son unos índices de las páginas de un web site que indican al bot de Google qué paginas debe indexar en su rastreo

En la web sitemaps.org se proporciona más información sobre los sitemaps, incluyendo la especificación de la sintaxis (basada en XML) de un archivo sitemap.

¿Qué son los "sitemap"?

Son un mecanismo sencillo por el que los webmaster pueden informar a los motores de búsqueda sobre las páginas de sus lugares web que están disponibles para ser rastreadas. En su forma más sencilla, un sitemap es un archivo XML con un listado de URLs de un sitio web, junto con un conjunto de metadatos adicionales sobre cada una de estas URL (cuando se actualizaron por última vez, con qué frecuencia suelen actualizarse, cual es su importancia relativa con respecto al resto de URL del sitio web, etc). Gracias a estos metadatos, y al propio listado de URLs, los motores de búsqueda pueden rastrear el website de un modo más inteligente.

Los rastreadores web suelen descubrir las páginas nuevas a indexar a partir de los enlaces que existen en el propio sitio web (enlaces internos) y con otros sitios webs (enlaces externos). Este proceso puede ser lento (sobretodo si tenemos en cuenta el crecimiento exponencial del número de contenidos que está experimentando la web), por lo que los sitemap ayudan a los rastreadores a localizar antes las nuevas páginas de una web.

La utilización de sitemaps no garantiza que las páginas web listadas sean incluidas en los índices mantenidos por los motores de búsqueda, pero ayudan a los rastreadores a mantener estos índices actualizados.

Si estáis interesados en conocer la sintaxis del formato de los sitemaps, podéis encontrarlo en la dirección http://sitemaps.org/protocol.php.

Afortunadamente, para aquellos que no deseis picaros "a pelo" el documento XML con las páginas que deseais incluir en un sitemap (para que Google o cualquier otro motor de búsqueda las indexe) existen herramientas para hacerlo de un modo más o menos automático.