Facebook Twitter Pinterest GooglePlus Instagram Cómo agregar una línea separadora entre los posts y los gadgets en Blogger | Café largo de ideas - Decoración, reciclaje, DIY, blogging

Cómo agregar una línea separadora entre los posts y los gadgets en Blogger

Es muy sencillito, no te preocupes, vas a ver....... y desde luego puede resultarte sumamente útil para organizar un poco el contenido de tu blog !!





Veremos dos maneras :

[ 1 ] Empezaremos por la más fácil, para ello, debes ir a las pestañas "plantilla", "personalizar", "avanzado" y finalmente "acentos", en la primera opción, "color de la línea del separador" deberás bien elegir un color de los que te aparecen, bien teclear otro color del que conozcas su código hexadecimal ( sino sabes de que te hablo te recuerdo este otro post, que seguro te ayuda!! ), obviamente, si elijes la opción de "transparent" (cómo tengo yo en este blog), desaparecerá. En último lugar, le das al botón de "aplicar al blog" y cuando el sistema te lo indique, mediante un mensaje, se habrá aplicado el cambio por lo que ya se verá el separador correspondiente.

El resultado de aplicar este método puedes verlo en la foto que te acabo de mostrar, si eres observador / a te habrás dado cuenta de que sale un línea más bien delgada que separa el contenido de los posts de los gadgets o widgets.

[ 2 ] Ahora, tocaremos un poco el código HTML para poner nuestra línea separadora, el proceso es un poco más complejo, aunque nos permitirá añadir algunos extras que nos pueden venir bien para personalizarla un poco más.

Bien, debe de clicar en "plantilla", "editar HTML", pulsar Ctr. + f (para que te salga la cajita de buscador) y poner en ella Columns, a continuación haces un intro y otro más (o los que hagan falta) hasta que te el buscador te localice algo parecido a :

/* Columns
----------------------------------------------- */
.main-outer {
  border-top: $(main.border.width) solid $(body.rule.color);
}

.fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 1px solid $(body.rule.color);
}

.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 1px solid $(body.rule.color);

}

Bien, ahora deberás de tener en cuenta dónde tienes colocada la sidebar, o columna de gadgets, esto es en el lado izdo, que se corresponderá con el código :

.fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 1px solid $(body.rule.color); } 

O en el dcho., que se corresponderá con el código :

.fauxcolumn-right-outer .fauxcolumn-inner { 
border-left: 1px solid $(body.rule.color); }  

Si tu sidebar está situada en el lado izdo. deberás situar justo debajo del código correspondiente ya visto la siguiente línea :


border-right:1px solid #727272;

Resultando finalmente así, para blogs con la sidebar ( o gadgets / widgets ) en el lado izdo. :

.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid $(body.rule.color);
border-right:1px solid #727272;
}

Si tu sidebar está situada en el lado dcho. (cómo es el caso de este blog) deberás situar justo debajo del código  correspondiente ya visto la siguiente línea :

border-left:1px solid #727272;

Resultando finalmente así, para blogs con la sidebar ( o gadgets / widgets ) en el lado dcho.:
 
.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 1px solid $(body.rule.color);
border-left:1px solid #727272;
}

Bien, veamos ahora unos cuantos cambios que podemos efectuar sobre éste código para personalizar aún más nuestra línea separadora entre los posts y los gadgets en Blogger :

- Cambiar el grosor de la línea

Muy fácil, sustituir el valor de border, esto es el 1 que aparece a continuación, a mayor número, mayor grosor.

- Cambiar el estilo de la línea

Esto es sustituir solid ( que es una línea lisa, normal ) por alguno de estos otros parámetros por ejemplo :

        dotted 

        dashed

        double


No te voy a decir lo que hace cada uno de ellos... eso te lo dejo a ti para que lo averigües probando cada uno de ellos, ; )

- Cambiar el color de la línea

Esto ya deberías saber hacerlo, pero por si acaso, .... una vez más no tendrías más que sustituir #727272 por el código hexadecimal del color de tu elección ( tema del que ya hablamos en este post ).

Recordarte además que si quieres aplicar un cambio mayor en el diseño de tu blog, desde Tritrazos podemos ayudarte... pásate y échale un vistazo a algunos de nuestros diseños, seguro que te sorprendemos !!

¿ Qué te ha parecido la idea de este post para mejorar el diseño de tu blog ?, ya me contarás si la utilizas, ... me encantaría sin lugar a dudas verla reflejada en tu sitio web !! ; )

Quizás también te interese : 

¡Muchas gracias por compartir el post!

Sobre la autora

¡Muchas gracias por tu visita!, si te ha gustado el post no te olvides de comentarlo ni de compartirlo en tus redes sociales ; )

8 comentarios:

  1. A mi esto del código es que me da un miedito....pero gracias lo tendré en mente

    ResponderEliminar
    Respuestas
    1. Que va, no es para tanto.... sólo asegúrate de una vez hecho el cambio darle a "vista previa", y una vez compruebes que se ve el cambio guardarlo, siempre así, y no al revés !!.. De todos modos, ya sabes, si te animas y tienes algún problema igual te puedo echar un cable !! ; )

      Saludos y que haya suerte hoy con los Reyes !!

      Eliminar
  2. A mi también me acojona un poco tocar el html, pero algún día me lanzo seguro! Un beso!

    ResponderEliminar
    Respuestas
    1. No es para tanto, de verdad !! todo lo que quites cópialo en un word por ejemplo y siempre puedes volver a ponerlo dónde estaba si ves que algo no ha salido bien.... y si necesitas que te eche un cable, ya sabes dónde estoy !! ; )

      Saludos y que haya suerte esta noche con los de Oriente !!

      Eliminar
  3. Yo tenía pendiente hacerlo, así que me guardo tu tutorial y a ver si un día saco tiempo y no la lío mucho. Un besazo y gracias por el post.

    ResponderEliminar
    Respuestas
    1. De nada, me encanta poder ayudarte !! ya sabes, el primer método el sencillo (sino quieres complicarte mucho la vida), el segundo ya más lioso, pero ojo, que tampoco es complicado ! de todos modos, ya sabes, aquí estoy por si necesitas que te ayude en algo !!

      Besos y espero que los de Oriente lleguen cargaditos de regalos a tu casa !!

      Eliminar
  4. Buf! Me tengo que poner con esto, pero tanto código me da pánico.... tengo en cuento tu entrada para un futuro.
    Besitos y feliz año!

    ResponderEliminar
    Respuestas
    1. Que va, no es para tanto lo del código.. piérdele el miedo !!

      Cualquier duda, ya sabes dónde estoy. Besos, igualmente.

      Eliminar

Follow my blog with Bloglovin