0
You have 0 items in your cart
separadores-blog-kawaii

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.

cambiar el código de tu blog

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

 

separador para blogsseparador-blogger-3separador-blogger-2fondo-de-fecha-blogger-10fondo-de-fecha-blogger-9
divisor-de-blogsdivisor-de-blogs-2


separador-para-blogs
como hacer un separador
separador-de-blogger

divisor-de-blogs-2divisor-de-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.

[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:

Cambiar el diseño de la fecha en Blogger
- Como cambiar el diseño de la fecha en blogger
quitar-con-la-tecnologia-blogger
- Cómo quitar el copyright y el footer de blogger

poner autor en blogger
Añadir la caja de la Bio en blogger 

poner iconos con css
Colocar iconos CSS en tu blog
0/5 (0 Reviews)
1 Response
  1. La semana que viene tengo preparado un post sobre cabeceras de blogger, que espero guste un montón, como ves lo explico muy sencillo para que podáis hacer lo que queráis y poco a poco los blogs se van personalizando. Que ánimos me das! gracias!

Leave a Reply

Pin It on Pinterest

Share This