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 parece 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