Cómo añadir una línea o separador en tus posts de Blogger

Cómo puedes ver en el blog a mi me encantan las líneas rectas, más bien finitas... así que hoy me toca hablar de cómo hacer unas cuantas en los posts ! ; )



A mi me parecen muy útiles para separar o resaltar palabras, párrafos, o incluso el título del post (si sitúas el código justo debajo), además le dan un toque muy personal y elegante que sin duda mejorarán el diseño de tus posts ¿ no crees ?

Bien, vamos allá :
Lo primero decirte que trabajaremos con HTML, así que todos los códigos que vamos a ver debes de introducirlos en la pestaña superior correspondiente, en la de HTML, y no en la de Redactar que supongo será en la que te encuentres ahora mismo... así que, simplemente clica sobre la pestaña deseada !
Empezaremos por la línea sencilla, la que a mi más me gusta :
1


Simplemente, escribe dónde quieras poner tu línea <hr>
Esta línea que acabamos de ver está hecha por defecto al 100% de ancho, pero esto puedes modificarlo si deseas que ésta sea menor y no cubra el ancho total de tu post. Veamos algún ejemplo:
2 - Al 75 %


3 - Al 25 %


El código a escribir para obtener estas líneas sería :
<hr width="75%">, en el primero de los casos y <hr width="25%">, en el segundo de los casos.
Yo sólo he puesto dos ejemplos pero jugando con el porcentaje podrás estirar y acortar la linea o separador tanto como desees.También puedes modificar el color de la línea a tu gusto :

4

.
Para ello el código HTML a introducir sería :
<hr color="#cfbacc"/> El color lo hemos introducido mediante código hexadecimal, si no sabes muy bien de qué va o simplemente quieres saber cómo obtener estos códigos te recomiendo leer este otro post... si bien tienes también la opción de sustituir el código hexadecimal por el color deseado escrito en inglés (blue, black,...), resultando el código de este modo :

<hr color="red"/>

Si bien, yo no te lo recomiendo tanto, pues las posibilidades en lo que a tonalidades se refiere son limitadas, puedes elegir simplemente un color, pero no una tonalidad del mismo.

Además, puedes modificar el grosor de la línea o separador :
5


En este caso añadiríamos el código HTML :
<hr size=4 "noshade">El valor numérico es el grosor, puedes jugar con él y hacer combinaciones de una a más líneas obteniendo un resultando mucho más atractivo.

Y ahora, jugando con todo lo anterior, te muestro algunos ejemplos que puedes utilizar si te gustan, con su código correspondiente, para que simplemente los copies y los pegues dónde quieras tu línea o separador :
6



<hr size=4 "noshade"color="#964f94"/>
<hr size=2 "noshade"color="#cfbacc"/>
7




<hr color="#dbd5ce" noshade="" size="2" />
<hr color="#bda797" noshade="" size="1" />
<hr color="#dbd5ce" noshade="" size="2" />
¿ Qué te ha parecido este post ?, ¿ tú eres de líneas también ?, ... si es así me encantará que me dejes un comentario para pasarme por tu blog y ver como pones líneas en tus posts !
Recordarte además, que si quieres un diseño de blog, con línea o sin ellas, de estilo profesional puedes acudir a Tritrazos, dónde encontrarás diseños económicos y diferentes, de temática general o específica, para acertar sí o sí !Quizás  también te interese :
3 Mejoras rápidas en el diseño de los posts
Cómo agregar una línea separadora entre los posts y los gadgets en Blogger

Fuente: este post proviene de Café largo de ideas, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

Relacionado

niños css tutoriales

Bien, la otra semana escribí este post en el que te contaba cómo añadir una línea o separador en tus posts de Blogger, hubo gente que me preguntaba en los comentarios del mismo si era posible incluirla de forma automática en cada post, para no tener que andar haciéndole manualmente cada vez que escribieran una nueva noticia !, pero no era posible, aunque si esta otra forma que te cuento en este po ...

niños tutoriales

Bien, una vez más trabajaremos con código HTML, muy básico y sencillo, como a mi me gusta !! Este tutorial me lo he planteado a la hora de añadir una descripción ( en mi caso un agradecimiento ) después de mi cabecera de blog,... Blogger no te da ninguna opción para darle formato a dicho texto, pero lo que sí admite son el uso de etiquetas HTML para poder hacerlo, bien las etiquetas serían las sig ...

niños blogueradas

Ahí va mi composición con fotos de diversos detalles de Port Aventura : Ahora las explicaciones pertinentes... que pueden parecer un poco liosas pero que seguro le "pillas el tranquillo" rápido, es sólo cuestión de fijarse bien !! Bien, lo primero que debes hacer es subir cada imagen a modo individual, como vienes haciendo habitualmente (en la pestaña de "redactar")... Yo te ...

niños blogger tutoriales

No sé si estarás de acuerdo conmigo o no... pero si los posts son muy largos queda bastante mal ponerlos así en la página de inicio del blog, además resulta muy poco operativo pues obliga al lector a desplazarse bastante antes de llevar a ver el título del post siguiente.. con lo cual, puede acabar "exhausto" antes e irse sin llegar a ver nada más.Bien, hoy quiero mostrarte la manera de ...

niños blogger css ...

Hace tiempo escribí este post para enmarcar el título de los posts y mejorar así su diseño... pues bien, hoy quiero ofrecerte otra opción que quizás te encaje mejor, o simplemente te guste más, se trata de poner un color de fondo a los títulos de los posts en Blogger. Para comenzar, te voy a dar el código necesario:.post-title { background-color: #e7e7e2; } Comentarte además que el valor situado ...

niños código html tutoriales

A la hora de hacer tutoriales,de mostrar páginas webs que nos gustan,.... los pantallazos se suelen convertir en nuestros grandes aliados... ¿ o no?. Bien, hoy quiero ir un paso más allá y mostrarte otra forma de presentación, muchos más dinámina, que podrás usar en algunos casos (especialmente en aquellos en los que en el pantallazo no te entre toda la información visual que desees recoger), sien ...

niños blogger tutoriales

Hoy quiero hablarte de cómo hacer listas en Blogger... ¿ ya la habías probado antes ?, si la respuesta es negativa, no te preocupes, hoy te enseñaré como hacerlo, es muy sencillo ! En la zona derecha de la barra de herramientas superior de Blogger puedes ver dos botones, uno para las listas numeradas y otro para las listas no numeradas, es decir para las listas con viñetas. Bien, empecemos por l ...

general pedagogías alternativas pedagogía waldorf ...

Muchas veces me han preguntado ¿qué pasa después del Jardín de Infancia Waldorf? ¿Cómo se trabaja en la etapa de primaria? ¿Los niños continúan haciendo juego libre toda la mañana? Y si durante todo el Jardín (de 3 a 6 años) no han hecho ninguna ficha, ni han visto ningún abecedario, ¿cómo pueden aprender la lectoescritura? Aprovechando la recién estrenada escuela Waldorf de Palma que fuimos a co ...