Hace tiempo me preguntaron si se podía poner un separador al final de cada post, como una línea separatoria que separara un post de otro post. Hay varios métodos de hacerlo, yo te explicaré la manera de hacerlo con una simple línea de imagen...
Diseño>edición HTML>expandimos artilugios
<div class='post-footer-line post-footer-line-3'/>
Justo debajo pégale esta línea:
<center><img src="URL DE TU IMAGEN"/></center>
Ahora simplemente tienes que cambiar URL DE TU IMAGEN por la dirección de tu línea o imagen de separación.
Por último guarda cambios.
Si no sabes cómo conseguir la URL de una imagen, consulta esta entrada.
me gusta tu blog,visita el mio realmadrid92
Hola Víctor, me alegra que te guste, ahora iré a ver tu blog :)
HOLA JAIME !!!
De nuevo por aquí a preguntarte una cosita. Hay alguna página dónde podamos ver distintos tipos de líneas???
Gracias.
Marga
Hola Jaime!
Mil gracias por explicarme como hacer este truco!
Voy a intentar ponerlo en mi blog, aunque primero tengo que encontrar un separador bonito jeje
Saludos!
Marga, por ahora no conozco muchos sitios pero en esta web tienen dividers bastante lindas ;-)
http://www.wyomingwebdesign.com/files/pages/bars.html
Si encuentro más sitios te iré diciendo las direcciones :-D
Shirubia, como le comenté a Marga, no conozco muchos sitios aún pero seguro que hay miles! pon en google:
Website dividers
Significa barras divisorias para mi web, ¡suelen tener muy bonitas!
Me alegra que te haya gustado que publique el truco :-)
Gracias Jaime!!!
Ya tengo puesta una en el blog, pero quería mirar de cambiarla, más que nada por variar jejeje
Un abrazo,
Marga
Marga, haber si encuentro más páginas y te las digo por si encuentras alguna que te guste :-D
Por ahora encontré estas páginas...
http://www.allfreebackgrounds.com/bars.html
http://www.designandcreate.com/graphics/line11.php
Las miré un poco y parecen lindas, la segunda web las tiene muy variadas :-)
Woola Jaime
No hay manera de poner la dichosa barrita en el blog. "Fijo" que lo hago mal; cuando añado la url de la imagen sale en el blog un cuadradito pequeño con un triángulo verde y una bolita (creo que es eso) pero de la barra, nasti de plasti.
Hay páginas que te dicen que has de "guardar imagen como" y es la que intento utilizar pero me sale el dichoso cuadradito. Otras, sin embargo te dan un código que copias y pegas pero con esa opción aun es peor, porque salen unas letras rojas en la edición html que dicen que está mal estructurado o algo así.
Aix, me estoy volviendo aún mas loca de lo que ya estaba!!! :S
Un saludo.
La_menda_lerenda, si quieres, mándame la dirección de la imagen y yo te pongo la URL para que puedas hacer el truco ☺ =)
estuve tratando de hacerlo por mi propia cuenta, y me demore como 2 horas, nunca pense que fuera tan facil, gracias jaime :$
David, pués así de sencillo resulta incluir una imagen para dividir los posts ^_^.
Me alegra que hayas conseguido introducirla.
no me funciona ni lo del puntero ni esto..
al guardar me dice que esta mal lo que copio de tu blog (q sobran simbolos)
Lisa fedo, necesito saber exáctamente lo que dice el error. ¿Qué código indica que está mal?
Jaime, el truqui está muy bien, pero a mí se me guarda con esa línea dentro de un recuadro y no me gusta. Qué hago mal?
Laube, no hay problema. Eso se debe a que las imágenes de tu blog tienen configurado un borde.
Tienes dos formas de deshacerte del marco.
1) Aplicar este truco con el que eliminarás el borde a todas las imágenes del blog (incluida la barra).
2) Poner la imagen de la barra de esta forma:
<center><img src="URL DE TU IMAGEN" border="0"/></center>
Y... ¡Solucionado! ;).
A ver, a ver...........
Lo tendré en cuenta... ahora mismo tengo unas líneas separadoras que no he puesto yo. Supongo que vienen en la plantilla. Si quisiera quitarlas, me miraré tus entradas a ver si dices algo al respecto.
Gracias!!!!!!
Es cierto Laube, esas líneas vienen con la plantilla (Mínima).
Si quieres, puedes deshacerte de ellas o decorarlas un poco.
Para ello busca este bloque:
.post {
border-bottom:1px dotted #660000;
margin:0.5em 0 1.5em;
padding-bottom:1.5em;
}
La línea marcada en negrita es la del borde.
Puedes eliminarla para deshacerte de la separación o cambiar el estilo (dotted) leyendo esta entrada, así como el color (#660000) utilizando la tabla de colores ☺.
Muchas gracias Jaime, me ha quedado muy bien, pero tengo un problemilla puedo quitar el marco del separador, pero solo en los separadores no en las fotos ni en la barra. Muchas gracias
Claro que se puede quitar el marco de la línea, Cristina.
Verás, en la línea de imagen que agregaste para poner la imagen de separación agrega el atributo marcado en negrita:
<center><img src="URL DE TU IMAGEN" border="0"/></center>
Haz vista previa para comprobar el resultado y guarda la plantilla.
Muchas gracias Jaime, solucionado. Felices Fiestas y un buen año. Saludos
Me alegra que ahora esté todo arreglado Cristina.
¡Felices fiestas para ti también!
Abrazos.
Hola Jaime, te quiero dar las gracias por compartir tus conocimientos. Gracias a tus trucos mi blog va teniendo el aspecto que yo quiero. Felices Fiestas. Saludos
Gracias a tí por comentar, Lourdes (Bufy). Me pasé por tu blog y ¡lo vi decorado de forma preciosísima! me gustó mucho la barra de separación con el Santa Claus asomado en la valla ;).
¡Feliz Navidad!
Otro truquito funcionando más... Gracias!!! (Una vez más :D)
Se me olvidó comentarte que lo de quitarle el borde a la imagen de separación no me funcionó usando border="0", sino que utilizando:
< img src="URL" style="border-width:0px"/ >
Gio, el método que dices funciona a la perfección y el borde desaparece ;).
También puedes utilizar el atributo none de la siguiente forma:
<img src="URL" style="border: none;"/>
¡Abrazos!