Como hacer un separador para blogger html

Como hacer un separador para blogger html

Cuándo terminas un post, o quieres separar una parte de un post entre distintos contenidos es normal usar separadores, hay algunos que son una línea, puntitos…. pero seguro que has visto alguno bonito con una imagen o discreto y te has dicho “quiero algo así para mi blog”.

Los separadores en blogger, tumblr, wordpress, blosgpot… se hacen de la misma manera mediante una etiqueta de html  <hr>  para darle color y estilos necesitas hacerlo en css por tanto debes encabezar el código css con hr para que sepa a que elemento pertenece el estilo que vas a crear y colocar entre las llaves las propiedades que quieres que tenga tu separador para blogger.

Te bastará escribir en tu entrada de blog de blogger <hr> </hr> verás que por defecto si no tienes creados estilos en tu plantilla saldrá una línea negra. Al poner el código css de nuestro separador cuándo escribas la etiqueta se sustituirá por lo que hayas elegido.

<hr> son las siglas de horizontal rule, regla horizontal, es la manera mas sencilla para hacer nuestros separadores par blogs.

Esto se hace desde plantilla en la opción de personalizar plantilla, es la última opción personalizar css, se abre una pequeña consola en la que puedes pegar y editar el código css para tu separador. Este método tiene la gran ventaja de que ya creado el estilo css se aplica a todas las etiquetas hr del blog, por tanto es una forma muy rápida de cambiar un poco la apariencia sin emplear mucho tiempo.

Las propiedades que podemos aplicar a nuestros divisores son muchas gracias a los estilos de css, pero estas son las mas seguras (funcionan en todos los navegadores).

Height: es la distacia entre la línea de abajo y la de arriba del separador.

Background:

puede tener un color

background-color: #003366;

Una dirección de una imagen mediante

url(http://ruta de la imagen);

puedes repetir la imagen indicando

repeat center:

o no repetirla poniendo

repeat none;

En caso de estar vacio el fondo

none;

Border: es la línea de borde que traza un recuadro o una recta en caso de ser una línea le podemos añadir estos estilos;

Primero el grosor en px, decir el tipo de línea dashed(guiones), dotted(puntos), solid(normal) y por último el color;

border: 6px dashed #d0754e

Cuándo trazamos un recuadro podemos dar propiedades diferentes a cada lado o a los que queramos el orden es siempre arriba abajo izquierda y derecha:

border-top:

border-bottom:

border-left:

border-right:

si queremos esquinas redondeadas debemos añadir la propiedad border-radius:

border-radius: 30px;

Para que todo quede centrado es conveniente añadir align-center.

Aquí os dejo algunos separadores hechos por mí la primera fila son para repetir. Los podéis descargar libremente para poner en vuestros blogs, si tenéis alguna idea decirme que en un ratillo me pongo a ello, espero que os gusten!! los separadores tienen fondo transparente para que no desentonen en los blogs!.

Este es el ejemplo de tres tipos distintos de separador para copiar y pegar… aunque debéis reformarlo un poco para incluir todas las propiedades que necesitéis.

hr{
 height: 20px;
 background: url(dirección de tu imagen con http:// delante) repeat center;
 Border: none;
}

hr {
border: 5px solid #d0754e;
border-radius: 300px ;
height: 0px;
text-align: center;
}

hr {
border-top: 3px dotted #d0754e;
border-bottom: 2px dashed #d0754e;
border-left:6px;
border-right:none;
height: 10px;
}