Como añadir bordes en Blogger

Hoy quiero compartir contigo un tutorial de esos básicos pero que tendríamos que tener siempre a mano: Cómo añadir bordes en Blogger. Como siempre, vamos a trabajar sobre la plantilla simple / sencilla de Blogger, que es la más fácil de personalizar.

Añadir Bordes en Blogger

1.- Añadir un borde a todo el blog:

• Entramos en Plantilla >> Editar HTML.

• Pinchamos en cualquier zona dentro del código de nuestra plantilla, hasta que aparezca el cursor del ratón para escribir. Ahora, pulsamos a la vez Control + F para abrir el buscador interno de Blogger.

• Buscamos: 

/* Content

----------------------------------------------- */

• Justo debajo, encontrarás el siguiente código:

body {

  font: $(body.font);

  color: $(body.text.color);

  background: $(body.background);

  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);

  $(body.background.override)

}

Como ves, aparecen muchos $. Son las variables de Blogger, lo que nos permite aplicar modificaciones desde el Diseñador de Plantillas. Una vez hemos localizado ese fragmento de código, vamos a añadir nuestro borde.

• Vamos a añadir el siguiente código:

border: 1px solid #58D3F7;

Justo aquí:

body {

  font: $(body.font);

  color: $(body.text.color);

  background: $(body.background);

  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);

  $(body.background.override)

  border: 1px solid #58D3F7;

}

Si pinchas en Vista Previa, verás que ha aparecido una fina línea azul enmarcando TODO tu Blog.

Puedes personalizar:

* Grosor de la línea: 1px. Aumentando el número, se hará más gruesa.

* Tipo de línea: para lo que te será muy útil consultar esta entrada:

Tipos de Bordes HTML

* Color de la línea: sustituyendo el código en azul por cualquiera de esta web:

Colores HTML


Comprueba siempre en Vista Previa que no hay errores y guarda los resultados.



2.- Añadir un borde al contenido del Blog:

• Abrimos de nuevo el buscador interno de Blogger y esta vez buscamos:

/* Posts

----------------------------------------------- */

• Justo debajo encontramos:

.date-header span {

  background-color: $(date.header.background.color);

  color: $(date.header.color);

  padding: $(date.header.padding);

  letter-spacing: $(date.header.letterspacing);

  margin: $(date.header.margin);

}

.main-inner {

  padding-top: $(main.padding.top);

  padding-bottom: $(main.padding.bottom);

}

A nosotros nos interesa la parte del código marcada en negrita, que es a la que vamos a aplicar cambios.

• Añadimos nuestro borde así:

.main-inner {

  padding-top: $(main.padding.top);

  padding-bottom: $(main.padding.bottom);

  border: 1px solid #58D3F7;

}

• Aplicamos las modificaciones que queramos de grosor, tipo de borde y color. Y en Vista Previa veremos algo así:

Nuestro borde azul alrededor de todo nuestro blog, quedando solo fuera la cabecera y el pie de página del blog.

3.- Añadir un borde a las entradas del Blog:

• Dentro del mismo fragmento de código:

/* Posts

----------------------------------------------- */

• Un par de líneas más abajo, localizamos el siguiente código:

.post-body {

  font-size: 110%;

  line-height: 1.4;

  position: relative;

  }

• Añadimos nuestro código de borde así:

.post-body {

  font-size: 110%;

  line-height: 1.4;

  position: relative;

  border: 1px solid #58D3F7;

  }

Y en Vista Previa veremos:

Nuestro borde azul enmarcando solamente el texto de la entrada de nuestro Blog. Si te fijas, no hay márgenes, por lo que a la derecha y a la izquierda el texto queda pegado a la línea, vamos a solucionarlo añadiendo otro fragmento de código dentro de:

.post-body {

  font-size: 110%;

  line-height: 1.4;

  position: relative;

  border: 1px solid #58D3F7;

  }

Así:

.post-body {

  font-size: 110%;

  line-height: 1.4;

  position: relative;

  border: 1px solid #58D3F7;

  padding: 10px;

  }

Puedes aumentar o reducir el padding dependiendo del espacio que quieras mostrar entre el texto de tu entrada y la línea que lo enmarque. En Vista Previa verás algo así:

Y, si quieres, puedes redondear los bordes con otro pequeño cambio:

.post-body {

  font-size: 110%;

  line-height: 1.4;

  position: relative;

  border: 1px solid #58D3F7;

  padding: 10px;

  border-radius: 20px;

  }

Donde también puedes variar el número de px para hacerlo más o menos redondeado. 

Resultado:

Pero puede que prefieras enmarcar toda la entrada, no solo el contenido, entonces, también dentro de Post, pero un poco más arriba de .post-body { encontrarás:

.post {
  margin: 0 0 $(post.margin.bottom) 0;
}

Una vez que lo tengas localizado, solo tienes que añadir los códigos que ya hemos visto entre las dos llaves, con mucho cuidado de no comerte ninguna, ya que ambas son las que encierran las propiedades de las entradas de nuestro blog.

Así:

.post {
  margin: 0 0 $(post.margin.bottom) 0;
  border: 1px solid #58D3F7;
  padding: 10px;
  border-radius: 20px;
}

Y obtendríamos el siguiente resultado:

4.- Añadir un borde a la sidebar de Blogger:

• Ahora vamos a hacer lo mismo con nuestra sidebar, para eso buscamos:

/* Headings

----------------------------------------------- */

• Y esto es un poquito más complicado ya que tenemos que crear la ID de nuestra sidebar. Pero no te preocupes que te voy a dar el código completo.

• Debajo de Headings ya aparece un código, pues a continuación, crearemos el código parar personalizar nuestra sidebar:

/* Headings

----------------------------------------------- */

h2 {

  margin: 0 0 1em 0;

  font: $(widget.title.font);

  color: $(widget.title.text.color);

}

.sidebar {

  border: 1px solid #58D3F7;

  padding: 10px;

  border-radius: 20px;

}

Solo tienes que añadir el código que te he marcado en negrita, hacer las modificaciones de grosor, tipo de borde y color como ya hemos visto, variar el padding y el redondeo... Y en Vista Previa podrás ver un resultado similar a este:

Ha sido fácil ¿verdad? Recuerda hacer siempre este tipo de tutoriales en un blog de pruebas para comprobar que funcionan correctamente antes de implementarlos en tu blog. Así no nos llevamos sustos innecesarios.

Y si te animas a hacerlo, déjame el enlace a tu blog en comentarios ¡me encantará verlo!

---

Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥