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.

Como añadir bordes en Blogger

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 ♥






    Comentarios

    1. ¡Me encanta esta entrada! ¡Gracias!

      ResponderEliminar
    2. Respuestas
      1. ¡Hola guapa!

        No, este tutorial es para añadir bordes en blogger :)

        Aunque si tienes acceso a tu plantilla en wordpress, el código para añadir bordes es siempre el mismo ;)

        ¡Feliz finde!

        Eliminar
    3. Yo sigo actualizando mi blog gracias al tuyo...Una pregunta, ¿cómo podríamos poner bordes que no sean líneas rectas? Por ejemplo, ondas, o un borde de dibujos repetidos,... No sé si es posible, gracias

      ResponderEliminar
      Respuestas
      1. ¡Hola Ana Belén!

        ¿Te refieres a algo así? http://nekanenfabrics.blogspot.com.es/

        Son gráficos que hay que diseñar aparte y añadirlos a la plantilla como imágenes de fondo. Es un proceso más complicado, pero puede hacerse ;)

        ¡Me anoto tu idea!

        Gracias ¡y feliz finde!

        Eliminar
    4. Gracias!, voy poco a poco, por ahora solo lo he hecho en los post. Iré probando :)

      ResponderEliminar
      Respuestas
      1. Me han desaparecido los botones de compartir el post.....a ver si averiguo qué pasa.

        Eliminar
      2. ¡Hola guapa!

        Que raro... no tendría porqué afectar al resto de la entrada. Revisa que no has borrado nada mientras seguías el tutorial y me cuentas.

        ¡Feliz finde!

        Eliminar
    5. Gracias! es muy útil y le da oto toque al blog pero me encantaría saber como poner un borde tipo blonda y encuentro la manera de hacerlo, tu podrías explicar como? besos!

      ResponderEliminar
      Respuestas
      1. ¡Hola Yasmin!

        Un poco más arriba le comentaba a Ana Belén la manera de hacerlo, es más complicada, pero me anoto la idea para hacer una entrada sobre el tema :)

        ¡Muchas gracias a ti y feliz finde!

        Eliminar
      2. Ohhh pues no sabes lo que te lo agradeceré que hagas un tutorial explicándolo, feliz finde para ti también ;)

        Eliminar
    6. Hola, muy util y práctico. A mi me gustaria añadir un borde solo en una pagina de mi blog, como lo haria. Un besito y gracias por todos tu turoriales

      ResponderEliminar
      Respuestas
      1. ¡Hola Ana!

        Nunca lo he hecho, si encuentro la forma de hacerlo, os cuento ;)

        ¡Feliz finde y gracias a ti!

        Eliminar
    7. Hola!
      He conseguido poner los bordes y creo que me ha quedado bastante bien, pero me gustaría saber si puedo hacer el borde en cada gadged en vez de en todo el sidebar.

      Muchas graciass!
      http://nonrulesblog.blogspot.com.es/

      ResponderEliminar
    8. Hola, tengo varias consultas, solo queria poner una sola linea que divida el centro del sidebar y guiandome de lo ultimo no pude llegar sola, si sabes te lo agradezco tanto.
      tenia esta opcion pero al pasarla me baja los iconos y todo lo del sidebar al final del blog, cosa rarisima.(.main-inner .column-right-outer {
      width: 258px;
      border-left: 1px solid #000;
      })
      Algo mas, como se puede poner en vez de lines un fondo de color al sidebar???
      gracias

      ResponderEliminar
    9. ¿Se pueden aplicar esos cambios añadiendo una imagen tipo blonda? Es lago que llevo meses queriendo hacer en mi blog. Gracias por tus tutoriales y un abrazo.

      ResponderEliminar
      Respuestas
      1. ¡Hola Seshat!

        me apunto tu idea para próximos tutoriales, es demasiado larga la respuesta para un comentario ;)

        ¡Feliz semana! ^^

        Eliminar
    10. ¡Hola Celia!

      He hecho varios cambios en la plantilla gracias a tu blog. Muchas gracias.
      Pero acabo de darme cuenta que en el pie de entrada no aparece y no hay manera. En Diseño he comprobado que está todo correctamente activado y en la plantilla HTML creo que también aunque no tengo muchos conociemientos.

      Me gustaría que apareciera el nombre del autor de la entrada (lo editan dos diferentes), Comentarios, Etiquetas y los botones de compartir.

      ¿Podrías ayudarme? mil gracias.
      El blog, por cierto, es www.librodelosviernes.blogspot.com

      ResponderEliminar
      Respuestas
      1. Creo que he solucionado el problema con una pequeña 'chapucilla', he copiado esa parte de la plantilla HTML de otro blog que tenía. No sé cuál era el problema pero ahora parece que funciona.

        Perdona las molestias y gracias por tu tiempo.

        Sin duda, enhorabuena por el blog. Te sigo.

        Eliminar
    11. En mi plantilla no aparecen los códigos que mencionas :( Buen post. Saludos!

      ResponderEliminar
    12. Muchas gracias por esta entrada, ¡me ha ayudado un montón!

      ResponderEliminar
    13. Muchas gracias.!! Y genial la explicación. Un Saludo.

      ResponderEliminar
    14. hola podrias hacer un tutorial de como decorar el blog con bodes pero de de lineas sino de imagenes cmo por ejemplo esos blog que tienen como blondas a los lados y en la cabecera y el footer porfavor ;) gracias

      ResponderEliminar
      Respuestas
      1. Me uno a la petición de varias, ¿cómo se pueden poner los bordes tipo blonda? ya he visto que habría que ponerlo como imagen de fondo, ¿pero en qué parte del código? teniendo en cuenta, además, que quiero añadir otro imagen de fondo del blog.

        Muchas gracias!!

        Eliminar
    15. Hola, Celia,

      Una duda, ¿se pueden poner los bordes enmarcando el blog pero a partir de la barra de menú?, es decir, que no enmarque la cabecera.

      Muchas gracias,
      Saludos.

      ResponderEliminar

    Publicar un comentario



    ¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥