Retoques avanzados de diseño en Blogspot

Aunque blogspot permite bastante personalización desde el editor visual de diseño, hay cosas que no se pueden hacer desde él y que a veces no solo dejan muy feo al blog, sino que entorpecen bastante su aspecto. Hoy voy a hablaros de algunas de ellas para, en el caso que tengáis un blog en esta plataforma, podáis ir un poco más allá de las limitaciones de la personalización desde el editor visual.

Como seguramente sabéis, en Blogspot hay dos sistemas para cambiar su aspecto, a los cuales se puede acceder desde la sección "Plantilla". Uno de ellos es el editor visual, que no tiene mucho misterio, al cual accedemos siguiendo la ruta Plantilla/Personalizar. Al lado de ese botón encontramos otro, el de "Editar HTML", que nos permitirá retocar el código. Sobra decir que hay que tener mucho cuidado con esto y saber muy bien lo que hacemos, porque un cambio en el código puede echar al traste no solo la plantilla que estemos usando, sino estropearnos el blog entero. Además, también puede generar conflictos de seguridad si usamos llamadas a HTTP y las mezclamos con HTTPS.




Dicha esta advertencia, voy a explicaros algunos de los códigos que tenéis que retocar para cambiar pequeños detalles del blog, que son mínimos pero muy importantes (al menos para mí). Con un poco de cuidado, es muy sencillo hacerlo.

Hay que mencionar que la mayoría de este código no está accesible a primera vista, hay que desplegar la flecha del apartado "Skin", tal como lo veis en la imagen. Una vez hecho esto, os aparecerá el código sobre el que vamos a trabajar.

- Eliminar degradado de fondo
Algo que suelo hacer siempre en los blogs, es quitarles el degradado del fondo. La causa es que en algunos navegadores el degradado aparece cortado, y genera conflicto con algunos widgets o con imágenes de fondo. Para eliminar el degradado y dejar el color sólido, debemos localizar esta línea (no voy a poner los signos de apertura y cierre del código para que no lo interprete aquí el HTML):

Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="url(http://www.blogblog.com/1kt/simple/gradients_light.png)"

Como veis, lo que debemos modificar es la variable "body.background.gradient.cap", en concreto el campo "value" de la misma. Es muy simple, solamente cambiamos el contenido de "value", por "none", así:

Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)" value="none"

Lo demás no tocamos nada, lo dejamos tal cual estaba. Aclarar que, dependiendo de la personalización que tenga en el blog cada uno, puede que la imagen de fondo cambie, pero no importa la url que tengáis, en ambos casos funciona sea ésta la que sea, cmabiando su valor por "none".

- Eliminar degradado de las pestañas
Otro molesto degradado que no me gusta nada es el que Blogspot pone por defecto a las pestañas de páginas. Caso de que uséis las páginas, podéis eliminar su degradado de una forma parecida. Solo hay que localizar dentro de b:skin el código siguiente:

Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)" value="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)"/

En este caso, la variable a modificar es "tabs.background.gradient". Y ponemos en su lugar, en el "value", el valor "none":

Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)" value="none"/

- Eliminar degradado de la cabecera
Y finalmente, el molesto degradado de la cabecera nos destrozará la imagen de cabecera de blog si elegimos un color sólido para su fondo, por lo cual lo mejor es quitarlo. Se hace de una manera parecida, localizamos el código:

Variable name="header.background.gradient" description="Header Gradient" type="url" default="none" value="url(//www.blogblog.com/1kt/simple/gradients_light.png)"/

y cambiamos su valor (el de la variable "header.background.gradient", por "none" también:

Variable name="header.background.gradient" description="Header Gradient" type="url" default="none" value="none"/

Una vez hecho ésto, ¡no olvidemos guardar los cambios para que éstos surtan efecto!

- Añadir links subrayados
Como "bonus" os voy a explicar cómo poner los links subrayados, algo típico en la WWW de siempre, pero que Blogspot lo ha ignorado (ni siquiera se pueden activar desde el editor visual). Para que nuestros links aparezcan con una línea debajo, localizamos este trozo de código dentro del css de nuestro blog:

a:link {
text-decoration:none;
color: $(link.color);
}

Y cambiamos el "text-decoration" por "underline" (por defecto tiene el valor "none"):

a:link {
text-decoration:underline;
color: $(link.color);
}

Espero que con estos sencillos trucos consigáis un blog con el que os podáis sentir más a gusto estéticamente.

| Redacción: Bianamaran.blogspot.com