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.
► Podrás encontrar más dividers en esta página: www.leehansen.com
16 opinaron:
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
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!
Me ha encantado este post, lo incluiré en mis favoritos. Lo aplicaré enseguida :)
Se ven hermosos, sobretodo el de los búhos, el que usaste como ejemplo.
» 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
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
» 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
Muy buen entrada Jéssica, me la llevo a mi blog.
Enhorabuena :D
» quierocrearunblog:
Sí, ya vi la entrada en tu blog; me alegra que hayas dejado un enlace a mi blog.
S@lu2
Gracias por tu ayuda, quisiera saber si puedo crear mis propios separadores con photoshop, no he visto ningún tutorial acerca del tema.
» 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
Mis más sentidas gracias. Me sirvió muchisimo, y por ello, tienes mis respetos. Te debo una Srta. Jéssica.
» Michael Gotcha:
Me alegra que te haya sido útil mi ayuda y gracias a ti por la visita :)
S@lu2
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!!!!!
» Miyushang:
Me alegra que la entrada te haya sido útil. Gracias por tu visita.
S@lu2
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.
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.