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 con una imagen o discreto y te has dicho «quiero algo así para mi blog».

Para hacer un separador basta con usar una etiqueta de código html y se dibujará una línea fina, pero se puede hacer mucho más.
Los separadores en blogger, tumblr, wordpress, blosgpot… se hacen de la misma manera mediante una etiqueta de html:
 <hr>
Esta etiqueta sola no aporta mucho, pero puedes darle color y estilos 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 en la plantilla y así lo tienes para siempre.

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 tu blog.
 








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.

[code]
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;
}
[/code]
Espero que te haya gustado a prender a hacer separadores para tu blog, es algo muy vistoso, y con estos diseños tan tropicales espero que os den un aspecto más desenfadado.
Te dejo una serie de post sobre personalizar blogs de forma sencilla que seguramente te gusten:

- Como cambiar el diseño de la fecha en blogger

- Cómo quitar el copyright y el footer de blogger

Añadir la caja de la Bio en blogger

Colocar iconos CSS en tu blog