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

16 opinaron:

Gildo Kaldorana

Pues si que me gustan.
No se me lo pensare y a lo mejor me pongo uno. El de las sandias por ejemplo me gusta.
Gracias.
Un saludo

Responder
Graciela

Que tal esa vida Jési :D
ayer intenté ingresar al blog, me decía 'solo para lectores invitados' :O

Me encantó la idea, muy bien explicado.

Besos!

Responder
G

Me ha encantado este post, lo incluiré en mis favoritos. Lo aplicaré enseguida :)

Responder
squirrel

Se ven hermosos, sobretodo el de los búhos, el que usaste como ejemplo.

Responder
Jéssica YK

» Gildo Kaldorana:
Se vería muy bien en tu blog :)

» Graciela:
Estaba haciendo unos pequeños cambios en el blog y por eso aparecía el mensaje; pero ya pasó, mi blog estará siempre abierto para todos.

» G:
Me alegra que te haya gustado ;)

» squirrel:
Podrías usarlo en tu blog, quedaría muy bonito :)

S@lu2

Responder
Juno

Oye, bueno, gracias, por tu post, pero... comentame, como hiciste para dar ese formato a los contenedores del footer?, yo lo intento y... me salen fuera de lugar, aunque en elementos de la página me salen bien hubicados, creo que tal vez tengo un padding fuera de orden por ahi, por otra parte y si no te parece atrevimiento, en ie8 se ve movido tu blog, a mi me ocurri lo mismo y lo solucione con un codigo que ahora, de memoria, no recuerdo, si gustas escribeme y te lo busco. zas?. Gracias

Responder
Jéssica YK

» Juno:

He visto que tienes varios blog así que no sé a cuál de ellos te refieres, para así poder ayudarte.
En cuanto a mi blog, no sé si se verá movido en IE8, ya que yo uso Firefox; pero lo revisaré y si tienes ese código sería genial :)

S@lu2

Responder
quierocrearunblog

Muy buen entrada Jéssica, me la llevo a mi blog.

Enhorabuena :D

Responder
Jéssica YK

» quierocrearunblog:
Sí, ya vi la entrada en tu blog; me alegra que hayas dejado un enlace a mi blog.

S@lu2

Responder
Liliana

Gracias por tu ayuda, quisiera saber si puedo crear mis propios separadores con photoshop, no he visto ningún tutorial acerca del tema.

Responder
Jéssica YK

» Liliana:
Por supuesto, puedes crear tus separadores con Photoshop o con otro programa de dibujo; luego los guardas en formato PNG. JPG o GIF. subes la imagen y la pegas en el código, donde dice AQUÍ-URL-IMAGEN-SEPARADOR.

S@lu2

Responder
Michael Gotcha

Mis más sentidas gracias. Me sirvió muchisimo, y por ello, tienes mis respetos. Te debo una Srta. Jéssica.

Responder
Jéssica YK

» Michael Gotcha:
Me alegra que te haya sido útil mi ayuda y gracias a ti por la visita :)

S@lu2

Responder
Miyushang

jejej gracias
aun que en mi caso y por mi plantilla me quedo asi

.post-footer {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
background: url(http://i1181.photobucket.com/albums/x430/miyushang/mariposa.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:3.5em;
}

aun asi GRACIAS!!!!!

Responder
Jéssica YK

» Miyushang:
Me alegra que la entrada te haya sido útil. Gracias por tu visita.

S@lu2

Responder
M.G.

Como no ha salido mi comentario lo volveré a poner.

He echo lo que expones y cuando añado el separador, no sale y además disminuye tanto la letra de los post que son ilegibles.
En mi plantilla pone:

.post {
margin: 0 0 $(post.margin.bottom) 0;

Y se leen bien pero añado el código del separador y.....

Un abrazo y muchas gracias.

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio