Títulos para gadgets con efecto de banda plegada doble

A diferencia del truco anteriormente visto, ahora usaremos otro método para no tener que tocar la parte HTML y que consistirá en usar :after y :before para insertar los triángulos terminales.

La clase que controla los gadgets de la barra lateral en las plantillas estándar es .sidebar .widget y los rótulos de los títulos además aparecen con encabezamiento h2, así que esta será la clase que usaremos: .sidebar .widget h2

Si tienes una plantilla que use otro nombre para la clase de los gadgets, tendrás que obtenerla echando un vistazo a tu código HTML.

Títulos de entradas con forma de banda superpuesta plegada

Este bonito efecto de diseño que va sobre el título de las entradas o post lo aprendí en OLOBLOGGER. Lo que se intenta es que el título simule ser una superficie superpuesta sobre las entradas, que cuando alcanza el borde de estas se pliega hacia atrás. El efecto visual de este diseño puede apreciarse en la figura que está al comienzo de esta entrada.

El código que pondré es el utilizado para el ejemplo de la figura último, pero algunos valores variarán forzosamente según la plantilla utilizada así que lo mejor es entender cómo funciona todo y no limitarse a copiar y pegar. Si luego no se sabe ajustar, lo normal es que no sirva de mucho.

Cómo enmarcar las entradas y gadgets de un blog

Algunas veces las plantillas suelen ser muy "planas" y nos hacen sentir como que los gadgets o las entradas se pierden entre ellos mismos pues no se distingue dónde empiezan y dónde acaban.
Así que una opción para delimitar los espacios de éstos es enmarcar las entradas y gadgets del blog y así definir cada uno con un borde. Por supuesto que podemos elegir si se lo aplicamos sólo a las entradas, o únicamente a los gadgets. Haremos que las entradas y los gadgets se vean más o menos como la imagen que se ve al comienzo de este post.

Aquí veremos cómo enmarcar entradas y gadgets en plantillas "antiguas" de Blogger, yo uso la Mínima. Para ello primeramente nos vamos a Plantilla / Editar HTML.

Cómo eliminar las líneas de separación entre entradas y gadgets en un blog

Las líneas de separación punteadas que hay entre un gadget y otro, o entre una entrada y otra, en una plantilla Mínima nunca me gustaron; por eso cuando me decidí a personalizar mi blog de una vez por todas, lo primero que hice fue eliminarlas.

1. Para eliminar las líneas de separación del encabezado.

Para hacer desaparecer las líneas que recubren el Header, es decir el título y la descripción del blog, lo haremos situándonos en:

/* Header
-----------------------------------------------

Sustituimos el valor border: 1px por border: 0px en todos los códigos que veamos la palabra border dentro de Header.

2. Para eliminar las líneas de separación entre las entradas.

Si deseamos eliminar las líneas de separación entre los post, buscamos:

/* Posts
-----------------------------------------------
Y en esta parte del código:

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }

Sustituimos border-bottom: 1px por border-bottom: 0px

3. Para eliminar las líneas de separación entre los gadgets.

Con la sidebar (columna derecha y/o izquierda dependiendo de la plantilla) e inclusive los gadgets que hay a pie o encima de cada post, buscamos lo siguiente:

/* Sidebar Content
----------------------------------------------- */

Y un poco más abajo encontraremos lo siguiente:

.sidebar .widget, .main .widget { 
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

Sustituimos border-bottom: 1px por border-bottom: 0px y eso hará que las líneas divisorias desaparezcan.

Lógicamente si lo que deseamos es que esas líneas no desaparezcan sino darles mayor tamaño, lo que haremos, será en vez de añadir 0 a border, aumentar su tamaño con un valor mayor a 1.