Añadir un separador de post (dividers)

Son muchos los que me preguntan si se puede añadir alguna imagen que sirva como separador de post. Si tienes la misma duda, hoy aprenderás cómo conseguirlo.

La DEMO pueden verla en uno de mis blogs de pruebas.



1.§ Ingresamos a Diseño/ Edición de HTML y con ayuda de CTRL+F buscamos el siguiente código :

.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}

Quizás el contenido que está entre ( y ) no sea igual, entonces buscaremos lo que está en negrita (.post)

2.§ Ahora, a nuestro código le añadiremos algunas líneas adicionales que servirán para agregar nuestro separador.

El código que añadiremos (que está en cursiva) lo agregaremos tal como se indica:

.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
background: url(AQUÍ-URL-IMAGEN-SEPARADOR);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

SEPARADORES DE LIBRE USO

Pueden usar estos separadores, debajo de cada uno encontrarán su URL para pegarla en el código anterior. Al final de la entrada encontrarán una página con más separadores.


URL: http://img715.imageshack.us/img715/5329/flipflopsborderh.gif


URL: http://img687.imageshack.us/img687/5130/pirateflagsbannerhth.gif


URL: http://img687.imageshack.us/img687/7032/leethartzborderh.gif


URL: http://img687.imageshack.us/img687/8880/antsborderhth.gif


URL: http://img32.imageshack.us/img32/8247/watermelonborderhth.jpg


URL: http://img32.imageshack.us/img32/5959/ivz3tc.gif


URL: http://img32.imageshack.us/img32/3015/t0i6a8.gif


URL: http://img44.imageshack.us/img44/5429/nlv0hf.gif

► Podrás encontrar más dividers en esta página: www.leehansen.com