Facebook Twitter Pinterest Instagram Cómo añadir una línea o separador en tus posts de Blogger | Café largo de ideas - Decoración, Lifestyle, DIY

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


Hoy quiero contarte en un sencillo tutorial cómo añadir una línea o separador en tus posts de Blogger, ya que -cómo puedes ver en el blog- 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 ! ; )


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

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 p
uedes 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 !




¡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. Está muy bien explicado. Yo no tengo mucha idea de HTML, me prodrías decir en donde tengo el titulo de cada post en mi plantilla de blogger. Me gustaría resaltarlo con estas líneas. Gracias.

    ResponderEliminar
    Respuestas
    1. Gracias ! Bien una vez escrito el post "clica sobre la pestaña de HTML" y mediante la barrita de desplazamiento sitúate al principio del post.... justo ahí, al principio del todo pega el código directamente, y ten en cuenta que se aplicará únicamente a este post... así que si quieres que se repita en los sucesivos posts que escribas deberás repetir la misma operación en cada uno de ellos !

      Espero que te haya servido la explicación, sino ya sabes dónde estoy !. Saludos

      Eliminar
  2. Muy chuli! Pero tengo una duda,¿ se aplica para todos los post ó sólo para el que le pongo el código? besos

    ResponderEliminar
    Respuestas
    1. Me alegro de que te guste el truqui de hoy !

      Respondiéndote, aunque ya lo he hecho en el anterior comentario, se aplicará a ese único post, en cada post que quieras este truco habrás de repetir la operación !!

      De todos modos, si quieres separadores o líneas que se repitan en todos los posts de forma automática te adelanto que estoy en ello y haré un post al respecto.... serán otro tipo de líneas eso sí, pero igualmente monas y no tendrás que ocuparte de instalarlas en cada post en caso de que así lo quieras !!

      Saludos

      Eliminar
  3. Gracias guapa! Justo lo que te iba a preguntar ya respondes a Katy, así que me espero a la siguiente tanda para aplicarlo. Un besazo.

    ResponderEliminar
    Respuestas
    1. De nada ! Viendo el interés intentaré escribir este finde el post... Luego ya será decidiros por el estilo que más os guste y que mejor le siente a vuestros blogs !

      Besos

      Eliminar
  4. Se que ya paso años, pero me funciono hasta la fecha :,3
    ¡Muchas gracias!

    ResponderEliminar

Follow my blog with Bloglovin