Como añadir un borde alrededor de la columna en Blogger

La semana pasada vimos paso por paso cómo diseñar un blog (el mío en este caso ;)

Y ya os expliqué también cómo podemos centrar las pestañas de las páginas en Blogger, que es un detalle que yo tengo y que probablemente no supierais hacer.

Y hoy para terminar esta serie de posts del Making off de mi blog, vengo a traeros un tercer truco.

No es necesario saberlo. En la mayoría de los blogs queda mejor sin él, pero puede ser el detalle que marque la diferencia en un blog más sosete como el mío.

Mirad qué poca gracia tiene sin línea rosa:

Además es muy fácil. Quizá tengáis que poner un poco más de atención de lo normal, pero una vez de que lo habéis entendido es realmente fácil.

Os lo explico en un paso por paso detallado para que no haya lugar a dudas o errores, pero no olvidéis antes hacer copia de seguridad de vuestra plantilla por lo que pudiera pasar...

De hecho, también sabéis que suelo recomendar hacer un pantallazo del antes y el después para que sepáis cómo estaba antes de hacer ese cambio concreto.

En el tutorial que os escribí el otro día sobre cómo instalar el botón Pin it en Blogger, no hacía falta porque ya en el propio código yo escribí "comienzo código pin it" y "fin codigo pin it", pero hay en cosas que no se puede hacer así, por lo que no está de más tener fotos de cómo estaba antes haber cambiado eso, por si en el futuro queremos quitarlo.

En fin, para poner el borde alrededor de la plantilla simple:

✎ Plantilla

✎ Edición HTML

✎ Ticamos Expandir plantillas de artilugios

✎ Y buscamos (pulsando Ctrl + F):

content-outer

Poco más abajo veréis que pone:

margin-bottom: 1px;
}

Nota: Lo que tengáis arriba de eso puede variar dependiendo de si habéis quitado la sombra que sale alrededor de la columna tal y como os expliqué hace un tiempo.

Si no lo habéis hecho veréis esto:

Y sí si lo habéis hecho (es decir, habéis borrado la sombra) veréis un hueco, ya que para borrar la sombra nos cargábamos las cuatro líneas esas que dicen shadow.

No pasa nada.

El reborde se añade justo encima de la línea que dice margin-bottom: 1px; independientemente de lo que haya encima de eso.

Cada línea/borde de nuestro diseño irá en una línea en la plantilla.

Por ejemplo, si yo escribo:

border-right: 7px solid #000000;

Quiere decir que me va a salir una línea/reborde de 7px de ancho en la derecha de la columna y en color negro

Vamos a verlo poquito a poco:

1) border-right:

Significa obviamente que es el borde/reborde de la derecha.

En las siguientes líneas, una detrás de otra, deberíamos ir añadiendo los siguiente bordes.

Como la primera dice right (derecha)
La siguiente línea será igual pero diciendo left (izquierda)
La siguiente top (superior) - aunque si tenéis barrita de Blogger arriba no hace falta
Y la siguiente bottom (inferior)

2) 7px

Es el ancho de la línea (la mía rosa por ejemplo, que es más fina que esta negra del ejemplo, es de 3px). Obviamente cuanto mayor sea el número que le pongamos, más gordita se verá la línea y viceversa.

3) solid

Quiere decir que es una línea sólida. Podemos cambiar esto por otras cosas.

En realidad se pueden poner bastantes cosas, pero yo recomiendo que si vais a poner un borde sea:

solid (línea sólida)
dashed (con guiones)
dotted (con puntitos) - que aviso, no quedan super redondeados ;)

4) #0000000

Es el color de la línea. Esto ya lo conocéis.

;

Se pone antes de pasar a la siguiente línea.

¿Veis que fácil?


Veamos un ejemplo:

Yo, para que mi borde se vea tal y como se ve en mi blog, tengo puesto:

border-right: 3px solid #fdb8b6;
border-left: 3px solid #fdb8b6;
border-top: 3px solid #fdb8b6;
border-bottom: 3px solid #fdb8b6;

Veis cómo se ve en mi plantilla aquí:

Podéis ir probando diferentes combinaciones e ir dando a Vista previa hasta que tengáis el reborde como os guste.

✎ Y una vez de que lo tenéis listo: Guardar plantilla

Por supuesto, si en el futuro queréis cambiar el diseño y quitar la línea, podéis borrar eso y ya está (para eso hemos hecho una "foto" del antes y el después de nuestra plantilla, para "recordar" cómo estaba hecho antes del cambio y saber deshacerlo sin problema)

Como veis es increíblemente fácil tener un diseño bonito y con apariencia profesional una vez de que hemos aprendido los básicos.

Y por si hay alguna despistada por ahí que aún falta por aprender los básicos y no le fue suficiente la publicidad que hice la semana pasada de mi curso... podéis comprarlo directamente aquí.

Creo que si aún sois relativamente nuevas en esto y no conocéis bien todas las funciones que Blogger nos ofrece o cómo podéis diseñar vuestro propio blog sin tener ni idea de Photoshop, Corel, Illustrator o cualquier otro programa de diseño... ¡este es, sin duda, vuestro curso!

Gracias a los testimonios que he recibido he sabido de primera mano que se hace muy fácil de seguir y de entender, y que aprendéis muchísimo. Es más, como una imagen vale más que mil palabras, lo que más me ha llamado la atención, mucho más aún que los preciosos emails dándome las gracias, ha sido el hecho de ver lo preciosos que han quedado todos los blogs hechos gracias a él...

Además, pronto voy a hacer una selección de mis preferidos para mostrar en una galería en mi blog. ¿A qué esperas para enseñarme el tuyo? ;)

Besos y nos vemos mañana a las 11 h.