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.

Cómo poner tres columnas a un blog

Este tutorial te va a servir para añadir una columna extra para tu blog, si tu blog solo tiene dos columnas (incluyendo el contenido), con este tutorial podrás agregarle otra adicional. Y el mismo sirve para agregarle cuantas columnas quieras.

Una vez que ya tenemos nuestra copia de seguridad hecha, empezaremos con los cambios en el código para conseguir las tres columnas.

La plantilla que vamos a "tunear" será una Mínima en cualquiera de sus versiones originales. Antes que todo debemos ir a Plantilla: Editar HTML y desmarcar (si es que lo está) la casilla Expandir artilugios. Una vez establecida, iremos dando los siguientes pasos:

1.  Vamos a copiar el código de la barra lateral y lo duplicaremos. De esta forma habremos creado una segunda barra lateral. Para ello vamos a buscar esta parte del código:

#sidebar-wrapper {
width: 293px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breking IE sidebar float */
}

2. Copiarla entera y pegarla inmediatamente después haciendo las modificaciones en las líneas de código 1 y 3:

#newsidebar-wrapper {
width: 293px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breking IE sidebar float */
}

De esta forma hemos bautizado a nuestra nueva columna y definido sus principales características -el ancho de 293 px y suposición a la izquierda de la pantalla-.

Mi 2do AMV: Dedicado a todos los fans de Gaara

Este AMV (Anime Music Video) que me llevó 5 días hacerlo es un tributo a uno de los personajes más polémicos de la serie anime Naruto me refiero a Gaara de la Arena o Gaara del Desierto. Tuve varios dolores de cabeza al intentar subirlo aMuteTube, digo YouTube; pero haciendo unas "gambetas" a la censura que la WMG (Warner Music Group) ha impuesto a todos sus contenidos en Youtube al fin pude subirlo con audio que era lo que en principio me habían desactivado; aunque es probable que me le vuelvan a quitar el audio a mi video, inclusive bloquear el video o peor aún cerrar mi cuenta, pero igual era un riesgo que tenía que correr.

Cómo hacer más anchas las entradas de un blog

Cuando uno abre un blog por primera vez y elige para ello una de las plantillas que nos ofrece Blogger, nos dabamos cuenta que la anchura para escribir nuestras entradas (post) son muy delgadas, esto a veces no es muy conveniente y no se ve muy bien sobre todo si vamos a utilizar imágenes y videos explicativos. En esos casos es mejor hacer más anchas las entradas del blog. En la comunidad de cincolinks he visto muchos blogs que todavía estan con sus entradas muy angostas, por lo que voy a dejar aquí unos apuntes de cómo hacerlas más anchas.