Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Separación entre post y post

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

Busca en la parte del CSS esta línea de código:

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

victor dice...

me gusta tu blog,visita el mio realmadrid92

Jaime Trujillo Escobedo dice...

Hola Víctor, me alegra que te guste, ahora iré a ver tu blog :)

Marga dice...

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

Shirubia dice...

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!

Jaime Trujillo Escobedo dice...

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

Jaime Trujillo Escobedo dice...

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

Marga dice...

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

Jaime Trujillo Escobedo dice...

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

La_menda_lerenda dice...

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.

Jaime Trujillo Escobedo dice...

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 ☺ =)

David dice...

estuve tratando de hacerlo por mi propia cuenta, y me demore como 2 horas, nunca pense que fuera tan facil, gracias jaime :$

Jaime Trujillo Escobedo dice...

David, pués así de sencillo resulta incluir una imagen para dividir los posts ^_^.

Me alegra que hayas conseguido introducirla.

lisa fedo dice...

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)

Jaime Trujillo Escobedo dice...

Lisa fedo, necesito saber exáctamente lo que dice el error. ¿Qué código indica que está mal?

Laube dice...

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?

Jaime Trujillo Escobedo dice...

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! ;).

Laube dice...

A ver, a ver...........

Laube dice...

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

Jaime Trujillo Escobedo dice...

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

Cristina dice...

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

Jaime Trujillo Escobedo dice...

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.

Cristina dice...

Muchas gracias Jaime, solucionado. Felices Fiestas y un buen año. Saludos

Jaime Trujillo Escobedo dice...

Me alegra que ahora esté todo arreglado Cristina.

¡Felices fiestas para ti también!

Abrazos.

Lourdes (Bufy) dice...

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

Jaime Trujillo Escobedo dice...

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!

Gio dice...

Otro truquito funcionando más... Gracias!!! (Una vez más :D)

Gio dice...

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"/ >

Jaime Trujillo Escobedo dice...

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!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo