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. :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 :
Muy fácil, sustituir el valor de border, esto es el 1 que aparece a continuación, a mayor número, mayor grosor.
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 ).Recordarme 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 !! ; )