Poner separadores entre las entradas

|

Los separadores entre posts (dividers) hacen que se delimite el área visual entre cada post lo cual lo hace más presentable y organizado.

separadores

Poner el separador es de lo más sencillo, sólo entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:
<b:include data='post' name='post'/>

Justo debajo de ella pega lo siguiente:
<center><img src='URL de la imagen'/></center>

Sólo cambia lo que está en rojo por la URL de la imagen de tu separador. Así se simple tendrás un separador de entradas en tu blog.

En Smashing Magazine tienen más de 100 separadores que ponen a tu disposición de muchos diseñadores y que son de uso libre. Puedes escoger el que más te guste y guardarlo o puedes descargar el pack con todos los diseños de los separadores.

Si no te convencen las imágenes y te gustan los diseños más simples puedes optar por poner una línea de color; para ello puedes usar el atributo <hr /> al cual se le pueden agregar estilos para hacerlos más llamativos.
Si te decides por esta forma entonces el código que deberás pegar será este:


<hr style="align:center; background:#000000; border:0px; height:5px; width:60%;" />

En background:#000000; puedes modificar el código del color que prefieras, en height:5px; la altura de la línea (en pixeles) y en width:60%; el ancho de la línea (en porcentaje).
Estos son algunos ejemplos de los separadores con distintos colores:



<hr style="align:center; background:#0080FF; border:0px; height:5px; width:60%;" />



<hr style="align:center; background:#FF0080; border:0px; height:5px; width:60%;" />



<hr style="align:center; background:#FFFF00; border:0px; height:5px; width:60%;" />

190 comentarios:

Blogio dijo...

wowwwª!!!!
estyo si es lo maximo!
lo estube buscando por todos lados
gracias potro!
SALU2

Meri dijo...

Esto está la mar de chulo, pero a mi no me surge efecto ni en IE ni en Firefox. Creí que era por el enlace de la imagen pero no, por que he copiado uno de esos tuyos y tampoco
Saludos

El Potro dijo...

Blogio, qué bueno que al fin lo encontraste!

Meri, necesitaría que pongas el código en la plantilla y me digas en cuál blog para ver dónde puede estar el problema.

Alex dijo...

Potro me volviste a impresionar, la verdad los estuve buscando pero nada, bueno fue hace ya algo de tiempo para un post en Curiosidades del Mundo, pero pues que bueno es tener a Ciudad Blogger como ayuda
que bueno que todavia tienes muchas cosas que postear aqui espero que nunka se termine Ciudad Blogger

El Venado dijo...

Muy bueno
ahora ¿se puede poner un enlace en la imagen?

saludos

Maria Rosa dijo...

Uy que buenos !!!

Me gustó el azul, pero para ponerlo en el mismo post, y separar temas. Asi que lo llevo y lo copio en la plantilla de diseño de las entradas, asi lo tengo siempre al escribir y editar una entrada nueva (si no lo voy a necesitar, solo lo elimino) ;)

Genial !!!

Besotes!!!!!!!!!!!!
TQM :) :) :)

El Potro dijo...

Alex, gracias, si te decides a ponerlo ya sabes cómo ;)

El Venado, claro, sólo agregas el código del enlace, incluso en lugar de estos separadores podrías incluir banners.

María Rosa, qué gran idea, así tendrás más organizado el contenido dentro del post, besos!

PepeX dijo...

Potro!!! te pusiste romanticon! ^^ jajajaja
Bueno como tu ya sabes cada post que hacer aqui, siempre me parece genial, y este no es la excepcion.

monica dijo...

Me gusta el azul, voy a intentar utilizarlo, gracias

Fran Cruz dijo...

Potro, de nuevo lo has conseguido, me encanta!^^

Ahorame pregunto si se podría alternar 2 diferentes entre los posts?

Meri dijo...

Algo habré hecho mal seguro
Lo tengo puesto aquí
http://lascositasdemeri.blogspot.com/

Blogio dijo...

hola potro(de nuevo xD)
hay forma de cambiar el deja un comentario por una imagen?
y qu este al final de la entrada
gracias!
SALU2!

El Potro dijo...

PepeX, no es para menos, es el mes del amouuur ♥

monica, excelente elección ;)

Fran Cruz, no, sólo se puede una imagen.

Meri, no veo el código puesto en la plantilla, pero estoy casi seguro que el problema es la URL de la imagen, yo he probado en una rounders 3 y no tuve problema alguno.

Blogio, aquí está lo que buscas.

El Potro dijo...

No sé a qué enlace estés haciendo click, pero no, no es el perfil de Alex, es el enlace al tutorial.

PepeX dijo...

Hayy el amor!!! xD. jajajaja este mes pone sentimental a cualkiera.

El Venado dijo...

Perdon mi buen amigo por estar molestandote a cada rato con mis dudas que hasta yo puedo resolver.

Lo que pasa es que te hiba a preguntar otra cosa, pero hasta ahora no la recuerdo, pero no se, creo que ya soy adicto a comentar en ciudad blogger jaja.

espero que eso no te moleste

cyberbloggero dijo...

mmmm...Bro, no quiero decir nada pero creo que Alex acaba de hackear tu blog...jajajajaja

Estuve mirando los diseños de los separadores y la verdad que me dieron muchas ganas de implementarlo...pero no... tengo que contar hasta diez... no debo ser tan impulsivo con tus trucos XD...

Un abrazo!!!

El Potro dijo...

El Venado, jajaja por supuesto que no me molesta, pero si me preocupa tu Alzheimer :)

bro, jajajajaja, eso explicaría por qué mis enlaces dirigen a su perfil. Un abrazo!

Meri dijo...

Si, que esta puesto tal que así

AGGGGGGGGGGGG, no sale el trocito de la plantilla te lo pongo por email

Meri dijo...

Potro, ya he visto que sale, pero no en la página principal si no cuando abres una entrada

El Potro dijo...

Hola Meri,

En el caso de tu plantilla tienes dos veces esta línea:
<b:include data='post' name='post'/>
Eso es porque tienes modificada la opción de mostrar los títulos expandibles en una búsqueda.
Lo único que tienes que hacer es poner el código de la imagen en el segundo <b:include data='post' name='post'/> que encuentres (está tres líneas abajo del primero)

Cualquier cosa me comentas.

Saludos.

Meri dijo...

Potro muchisimas gracias, "problema" solucionado
Te conteste al email

Saludos

El Potro dijo...

Excelente Meri, ya lo veo funcionando en tu blog ;)
Saludos.

Feroz dijo...

Gracias, estaba buscando un detalle así.
Mu bonico.

El Potro dijo...

Seguro escogerás un separador muy bueno ;)
Saludos.

Rubiando dijo...

Como siempre, muy bueno facil y practico.. muchas gracias

El Potro dijo...

Por nada, me alegro que lo hayas encontrado útil ;)

Fran Cruz dijo...

Potro, ¿hay alguna posibilidad de ponerlo de manera que salga un separador aleatorio cada vez que entres en el blog?

El Potro dijo...

Hola Fran Cruz,

Sí, sí se puede. En ese caso en vez del código que menciono debes poner este:
<script language='javascript' type='text/javascript'>
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>

<script language='javascript' type='text/javascript'>
//<![CDATA[
var randHdr = randRange(1,5);

if (randHdr == 1) {
document.write('<img src="URL DE LA IMAGEN">')
} else if (randHdr == 2) {
document.write('<img src="URL DE LA IMAGEN">')
} else if (randHdr == 3) {
document.write('<img src="URL DE LA IMAGEN 3">')
} else if (randHdr == 4) {
document.write('<img src="URL DE LA IMAGEN 4">')
} else if (randHdr == 5) {
document.write('<img src="URL DE LA IMAGEN 5">')
}
//]]>
</script>

Para saber cómo agregar más imágenes visita este tutorial, es el mismo código que se usa para las cabeceras cambiantes.

Saludos.

El Potro dijo...

Por cierto, que con este método sí podrás tener dos diferentes en el blog como lo habías pedido, no me había fijado que con este método se puede, aunque claro, siempre serán al azar.

Momentos dijo...

Hola! felicitaciones por toda la enseñanza que nos brindas!
Consulta, y por favor, tomá en consideración que soy novata en esto de los blog.
Coloqué una plantilla Minima Black, pero no encuentro el campo que hacés mensión...puede ser que se llame de otra forma? porque no encuentro nada que diga <b: include data= "post"...."
Gracias desde ya!

El Potro dijo...

Hola Momentos,

Necesitas marcar la casilla Expandir plantillas de artilugios para poder localizarlo.

Saludos.

Momentos dijo...

Pero que rapidéz!! no pensé me ibas a responder tan pronto! gracias mil!

Ahhh!! pero te anticipé que era novata!! jaja ahora intento nuevamente! gracias! gracias! gracias! todavía hay gente buena en este mundo eh!

El Potro dijo...

Todos somos novatos alguna vez, así que no hay problema ;)
Saludos!

Feroz dijo...

joé, macho... estoy leyendo los comentarios... ¿nunca te "pillan" sin saber la respuesta? Eres un fenómeno, tío!

reichelbcn dijo...

Hola, tengo un problema xD pongo una imagen tal y como sale en la entrada, justo debajo de ese codigo, y cuando guardo sale la imagen del separador justo encima del encabezado O.o
Espero que me podais ayudar, gracias :$

El Potro dijo...

Es que es justo lo que hace este hack, pone una imagen entre la última entrada y la nueva, es por eso que lo ves arriba del título de la otra entrada porque lo que está separando.

Saludos.

reichelbcn dijo...

Y porque a mi se me ve encima del encabezado? (imagen que tengo como título de blog)

El Potro dijo...

Sobre el título del blog no debería salir, al menos yo hice la prueba con la plantilla que usas y no tuve ese problema.
Lo que puedes hacer es poner después del código de la imagen esto:
<br /><br /><br />

De esta forma se hará un espacio que quizá te ayude a que no se vea tan encimado todo.
Saludos.

avi-veracruzana dijo...

Gracias. en verdad me ha servido mucho toda tu ayuda y todo lo que indicas en tu blog...

gracias por todooo....

pronto hare mi propio blog y con todo y tu ayuda sera fenomenal.. mil graxiii

El Potro dijo...

Hola avi-veracruzana,

Gracias a ti por tus comentarios y tu visita.
Qué bueno que este sitio te ha podido ser de ayuda.

Saludos.

La Trucoteca de Blogs dijo...

Genial! Creo que un separador grunge vendrá de maravilla, pronto te lo enseñaremos xD :)
¡Un saludo!

Pedro Herrera dijo...

Hola Potro!

el separador me quedo perfecto; ahora el tema es q me quedo es separador q trae blogger por defecto, o sea, estan los dos, te dejo la dire si quieres verlo:
http://alcobavisual.blogspot.com

arriba ciudad blogger!

salut!

El Potro dijo...

Hola Pedro,

Busca esta parte:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;

Borra lo que está en negrita y listo ;)
Un abrazo!

Sergio ♫♫♫ dijo...

hola Mr.Potro, yo he optadp por el diseño sencillo de la línea en negrita...

Pero no me causa efecto...he guardado los cambios, he refrescado la página principal...

Que puedo hacer??...

P.D.-desde que he descubierto tu ciudad, casi no duermo!! jejeje y mi blog es otro!!

GRACIAS.

El Potro dijo...

Hola Sergio ♫♫♫,

Quizá es por el gadget que tienes de "Nuestros lectores también disfrutaron" es posible que esté interfiriendo en esa área donde se debería mostrar el separador.

Saludos y gracias por tus comentarios :)

Sergio ♫♫♫ dijo...

Gracias Mr.Potro, ese gadget me vino junto con las estrellas de puntuación...

Vale, creo que se queda como está. Muchas gracias, Mr.

Luis dijo...

Hola Potro:
Antes que nada, recibe saludos desde la blanca Mérida, Yucatán, en México.

Gracias por los separadores; yo me quedé con la linea roja y le hice pequeños cambios en el ancho (15px) y en el largo (100%).
¿si no es molestia podrías pasar por mi blog y comentar que te parece?
la URL es la sigte: http//elhijodedonjose.blogspot.com/

Gracias de nuevo y disculpa la molestia.

Luis dijo...

Hola Potro:
Antes que nada, recibe saludos desde la blanca Mérida, Yucatán, en México.

Ya no tengo la plantilla con los separadores que te copié, porque la rediseñé con la nueva función de diseño de plantillas del blogger en draft. Me enteré de su existencia por esta dirección:

http://elescaparatederosa.blogspot.com/2010/03/disenador-de-plantillas-blogger.html

Te (les) recomiendo que se den una vuelta por ahí, está interesante.

Como te digo lineas arriba, decidí experimentar y la verdad me gustó como quedó mi plantilla.

La invitación sigue en firme para tí y para todos los compañeros blogeros (no es mi intención hacer spam, solo quiero que chequen como se ve mi blog), todo gracias a Rosa (ahora le pongo mi agradecimiento antes de que se me olvide). mi URL es:

http://elhijodedonjose.blogspot.com/

Gracias Potro por tu paciencia para con este N.N.N.(Novel de los Noveles Novato). Bye.

P.D. Si dejan en mi blog un mensaje con sus opiniones se los voy a agradecer.

"PAZ a los Blogger's de buena voluntad"

El Potro dijo...

Por supuesto que todos conocemos el estupendo trabajo que hace Rosa, de hecho está un enlace a su blog en la sección de blogs de ayuda ;)

PanJebus dijo...

Hola El Potro, intente poner el separador, pero al guardar cambios no me la muestra, se sigue viendo igual =(. No se si me puedas ayudar con eso

Saludos y gracias de antemano.

El Potro dijo...

Hola PanJebus,

La imagen debes subirla a un hosting como Imageshack. Veo que tú has puesto la dirección de donde está tu imagen pero de tu computadora, esa no sirve, se necesita que esté en un hosting.

Saludos.

PanJebus dijo...

Muchas gracias por la respuesta tan rapida =)

Ahora mismo lo pruebo.

Sofía Serra Giráldez dijo...

Hola, Potro. Sólo para darte las gracias. Me ha funcionado, ya sabes que soy inexperta total, pero se me cortaba el motivo elegido, el que simula páginas. Así que lo que hecho ha sido remuestrear la imagen a los pixeles que tiene mis entradas (menos de 700 que era lo que medía la imagen), subir esa al servidor y ¡voila!, ya se ve la esquinita que necesitaba.
GRACIAS
Voy a abusar de tu genrosidad ¿hay forma de que la separación entre diferntes gadgets de la columna de la derecha sea menor? utilizo listas de enlaces para hacer un índice, tres en concreto, cada una lleva "x" números de poemas, pero quiero unirlas un poco entre sí porque aparecen muy separadas, y encima de ellas quiero colocar el título del poemario completo..¿me explico?..¿podrías ayudarme?. Llevo días buscando por tu página y por el blog de Eulalia, pero no consigo dar con nada.
Tengo la mínima, ya he eliminado hasta las líneas de separación entre ellos.
Un besazo y gracias de nuevo

El Potro dijo...

Hola Sofía Serra Giráldez,

Me da mucho gusto que hayas solucionado lo del separador y que ya puedas disfrutarlo.

No he entendido bien lo del gadget, si ya has puesto el gadget en tu blog dime en cuál blog está y cuál gadget es para verlo y darme una idea más clara de lo que mencionas.

Besos!

Sofía Serra Giráldez dijo...

Es que aún lo tengo oculto porque quiero que salga el poemario de una vez todo...es una especie de órdago que stoy echando contra..yo qué sé, contra un montón de cosas, las editoriales, los críticos, los que se autopublican en papel pagando, etc...ya me ves. Voy a darte el permiso, tengo que buscar tu cuenta correo..¿no te asustes, ¡eh?, jeje, me quedan cosas, pero eso que te preguntaba, ya lo verás en la sidebar, es para ver si puedo "juntar" los diferentes gadgets de listas de enlaces, que aparecen muy separados, para que dé más impresión de índice..y bueno ,me quedan aún cosas..no dudes en decirme lo que sea si se te ocurre algo, por favor, está aún cogido con imperdibles.
Muchas gracias, Potro, si no fuera por tu blog, y también el de Eulalia (voy de uno a otro), no podría haberme metido en esto..en reconvertir...)
Un abrazo

Sofía Serra Giráldez dijo...

pues no doy con tu cuenta de correo para poder ponerla en lo de los permisos, ¿qué hago, Potro?

El Potro dijo...

El correo es ciudadblogger@msn.com aunque igual necesitaría que me digas cuál gadget es para poder entender un poco más y ver si se puede hacer lo que mencionas.

Saludos.

Sofía Serra Giráldez dijo...

Ahora activo el permiso. Cuando entres verás que a la derecha intento hacer un índice. He usado gadgets de listas de enlaces. El poemario tiene tres partes, un gadget para cada una..cuando entres verás que aparecen muy separadas. Mi gusto seria que aparecieran más juntas pero no sé cómo aminorar la distancia entre uno y otro...he probado de todo en lo que me aparecían números con los artilugios extendidos.
No quiero molestarte, potro, bastante haces ya con este blog, y si no de una forma, pues de otra lo pondré, pero si te apetece, ahora te envío la invitación y te quedaré muy agradecida.

El Potro dijo...

Hola de nuevo Sofía,

Si te refieres a las listas de enlaces llamados 'La edad de la inocencia', 'Tu ausencia' y 'Tu presencia' entonces entra en Diseño > Edición de HTML y antes de ]]></b:skin> pega esto:

#LinkList1 {
margin-top: -35px;
}
#LinkList2 {
margin-top: -35px;
}

Con eso quedarán pegados esos gadgets.

Un abrazo!

portafolio de profes dijo...

Oye Potro, felicidades por tu blog, está de lujo, he tomado algunos consejillos bien importantes para mi blog, pero este de los separadores nomas no me queda, mi blog es http://www.portafoliodeprofes.blogspot.com
En primer lugar al buscar en el código html me sale lo siguiente:

No hemos podido obtener una vista preliminar de su plantilla.
Por favor, corrige el siguiente error y envía la plantilla de nuevo.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The value of attribute "src" associated with an element type "null" must not contain the '<' character.

Gracias de antemano

Sofía Serra Giráldez dijo...

Muchísimas gracias, Potro, ¡ha funcionado! Te estoy muy agradecida.
Recibe un fuerte abrazo
Sofía

El Potro dijo...

portafolio de profes, no estás poniendo bien el código, pégalo tal como está y sustituye sólo donde se indica la URL de la imagen, sin comerte ningún caracter.

Sofía, qué bueno que te ha resultado!

americano_10 dijo...

Hola potro lo que pasa es que tengo un pequeño problema en mi blog (alternativadj.blogspot.com), espero no abusar de tu generosidad, lo que pasa es que si tu te vas a la parte de abajo de cada entrada hay una parte donde dice: Nuestros lectores también disfrutaron: y muestra mas entradas, pero las que muestra ni siquiera las e publicado y me da el nombre esa nueva entrada y entre paréntesis me dice la pagina de donde proviene. necesito tu ayuda potro att: carlosvilladadj@gamail.com

El Potro dijo...

Ese es un problema con tu gadget de Outbrain, verifica la configuración del gadget así como el código.

Saludos.

portafolio de profes dijo...

ya lo probe potro, será porque mi imagen la tengo alogada en picassa o eso no tiene nada que ver

portafolio de profes dijo...

la línea ya pude colocarla, pero el problema es con la imagen

El Potro dijo...

Necesitaría saber cuál es la URL de la imagen que estás poniendo para saber si es eso.
Pero de todas formas haz esto, entra a Picasa, haz click en la foto, luego con el botón derecho del cursor selecciona la opción de copiar URL de la imagen (o algo parecido)
Luego pega esa URL en el código y listo.

Neika dijo...

Muchas gracias! :3 Me sirvió de mucho.
Puse ya mi barrita con eso de los colores ^_^
Ahora una pregunta:
¿Puedo hacer que también salga ENCIMA de la PRIMERA entrada? (: Porque siempre sale entre entradas o al final de la que está la última en la página.
¡Gracias!

El Potro dijo...

Sale al final porque lo que hace es separar las entradas, por eso separa el final de la primera entrada con la segunda y así sucesivamente.
Puedes poner el código arriba de <h3 class='post-title entry-title'> y saldrá arriba de cada título, pero entonces no saldrá al final de la última entrada.

Saludos.

Somos lo que Comemos dijo...

Hola potro, excelente tu blog, te hago una consulta, cuando quiero poner el separador me aparece un cuadrado en blanco con una cruz roja en el medio, que puede ser???
perdon pero soy nuevo en esto.-

saludos

La Bruji dijo...

Hola! esta genial este blog me saco muchas dudas!!
ahora, intente poner el separado en mi blog y nada.. ¿que puede ser?
La dire del blog es:
llunannegra.blogspot.com
Y la url de la imagen es:
http://www.fileupyours.com/view/279767/hr-johannes-aagaard-2.jpg
Les Agradesco cualquier sugerencia:

El Potro dijo...

Somos lo que Comemos, eso es porque al cargarse la página no se encuentra la imagen que agregaste. Verifica que la URL de la imagen funciona correctamente.

La Bruji, no se ve debido a la URL de la imagen que tienes. Si pones esa URL en la barra de direcciones del navegador verás que no abre la imagen, sino una página para descargar el archivo. Sube la foto en otro servidor como Tinypic o Imageshack.

Microboy90 dijo...

Potro yo quisiera un separador pero debajo de mi entrada,osea por ejemplo en el template que tengo en la entrada no se diferencia de donde empieza el post y el titulo o por debajo de los tags aparece lo de la entrada mira...por ejemplo aqui en la foto..y la linea que le pongo yo pa que se distinga,porfavor ayudame si tienes algo ...gracias!!
http://i42.tinypic.com/2gtrm83.jpg
http://i42.tinypic.com/2d0b8fq.jpg

El Potro dijo...

Hola Microboy90,

Entré a tu blog pero creo que ya lo has solucionado.
Saludos.

Microboy90 dijo...

@Potro Mmm no ,no he solucionado nada man,solamente yo le pongo esas rayitas,no es que salgan siempre...pero pss me entendistes, y a ver si me tienes una solucion!! y por el momento no aparece mi blog que onda..que paso!!

El Potro dijo...

Ok, como lo vi ahí pensé que ya habías editado la plantilla.
Con los artilugios expandidos busca esta línea:
<b:include data='post' name='postQuickEdit'/>

Arriba de ella pega esto:
<hr/>

Con eso tendrás una línea simple, si lo deseas puedes usar las ideas de esta entrada para adornarlo a tu gusto.

Saludos.

Microboy90 dijo...

@POTRO ...Perfecto man,gracias por tu ayuda era justo lo que buscaba!! Chido...

LobosDiario dijo...

Potro... Se pueden poner gadgets entre las entradas como los que estan en la sidebar sin que estos se repitan como separadores entre las entradas?

LobosDiario dijo...

Es decir que puedaponer diferentes imágenes como separadores?

El Potro dijo...

No, pero puedes intentar poner este script para que salgan las imágenes al azar, así podrá salir una distinta entre cada entrada:
http://ciudadblogger.com/2009/06/crear-un-rotador-de-banners-al-azar.html

Saludos.

maria eugenia dijo...

Nada, sigo sin poder conseguirlo. Por cierto conseguí poner a los seguidores como pantalla de ordenador, pero si borraba las palabritas que pusiste en rojo no se veía.. a lo mejor es porque lo mio es un mac.
Pero lo de los separadores me tienen negra.. teniendo en cuenta que es la primera vera que me meto en htlm, tampoco es para decepcionarse ajjaaj, pero bueno lo seguiré intentando... pero borre, quité, cambié.. y nasti, ná de separador ajajajaj. En fin, todo se conseguirá.Gracias por tu blog.. es de gran ayuda.

El Potro dijo...

¿No será la URL de la imagen que estás poniendo la que no funciona?
La mayoría de las veces ese es el problema.

Saludos.

✿Nuria Bertrana✿ dijo...

¡¡¡Saludos!!! pero...donde pongo la imagen para que me salga igual que tu tienes la cerveza para los comentarios??? Y otra cosita, porfa; yo puse en otro blog una imagen en el formulario de comentarios...pero no doy pie con bola para ver donde està el còdigo!!! Gracias Potro por tanta lata!!! Gracias anticipadas!!!
☻/
/▌
/ | *´¨)
...¸.•´¸.•*´¨) ¸.•*¨)
(¸.•´ (¸.Nyn•*♥

El Potro dijo...

La imagen de la cerveza no la tengo en los comentarios, sino como separador, igual que se explica en esta entrada.

Para encontrar los códigos necesitas marcar la casilla de Expandir plantillas de artilugios, luego puedes usar las teclas CTRL + F para localizarlos.

Saludos.

Gabriella dijo...

Guau , a mi me funcionó de maravilla , pero no se como hacen para hacer que los otros blogs tengan como tres columnas para hacer entradas y comentariosn help¡¡¡¡

El Potro dijo...

Hola Gabriella, no sé a cuáles columnas te refieres ¿me puedes mostrar un blog que lo tenga?
Saludos.

Mara dijo...

potro, puse una imagen como separador y la verdad estoy muy conforme con el resultado, lo unico es que me queda muy separado de la entrada osea muy abajo, como puedo cambiarlo? gracias.

El Potro dijo...

Hola Mara,

Busca esta parte en tu plantilla:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #000000;
padding-bottom:1.5em;
}

Cambia lo que está en negrita por .5em o déjalo en 0 según veas el resultado.

Saludos.

Mara dijo...

me funcionó. muchas gracias por la ayuda :) saludos.

el 1a dijo...

potro como yo puedo pegar las fotos k hay en los gadgets osea haci

http://i43.tinypic.com/zmf52v.jpg

El Potro dijo...

Sólo pega en un elemento HTML/Javascript este código cambiando las URL de las imágenes:

<img src="URL de la imagen" />
<img src="URL de la imagen" />
<img src="URL de la imagen" />

Saludos.

el 1a dijo...

proto yo kiere k me salga http://i43.tinypic.com/zmf52v.jpg y a mi me sale a mi separa da en mi web mi web es www.altamiramusic.blogspot.com

El Potro dijo...

Entonces pon los códigos seguidos uno detrás de otro sin saltar renglones.

el 1a dijo...

potro como kiera olle yo creo k es k la pantilla mino haci entra a mi pagina k www.altamiramusic.blogspot.com y chekea si es un codigo k tiene en los gadgets k hace k se se paren las imagenes ame el favor manito trata de arreglarme eso por fa

El Potro dijo...

Como te dije antes, tienes que poner los códigos seguidos uno detrás del otro, sin espacios ni saltos de renglones.

el 1a dijo...

potro pero yo lo ise y como kiera olle potro mejor a ver un post sobre eso k te dijo para si entiendo y poner el link aki en este post loko a me ese favor

El Potro dijo...

Según el código fuente de tu plantilla no están uno detrás de otro.

Sembrador y Recolector. dijo...

Hola Potro, gracias por este genial aporte a Bloggeros expertos e inexpertos (como yo)
Valiendome de tus conocimientos y generosidad te pido ayuda

He intentado poner el codigo tal cual tu lo indicas, pero no he podido, cuando intento guardar o previsualizar la plantilla aparece este mensaje:

No se ha podido analizar su plantilla, porque no está bien formada....
Mensaje de error de XML: The element type "img" must be terminated by the matching end-tag "".

Mi blog es: Fruto Frívolo

El Potro dijo...

Hola Sembrador y Recolector.,

Ese error indica que te está faltando una diagonal en el código que pusiste.
Copia y pega el código de ejemplo tal como se muestra, sólo sustituye la URL de la imagen y deberá funcionar.

Saludos.

MarcoliO dijo...

Espectacular el tuto ..
Es el segundo que sigo y funciona sin ningun problema..

Muchas gracias por el tuto ..

y espero seguir agradeciendo algunos otros ..

Saluos ;)

teofermi dijo...

Muchas gracias por tus aportaciones, ya lo he puesto en mi blog y ha sido facil
un saludo
teo

Enrique Muley dijo...

hola Potro, excelente esto de los separadores; es lo q venía buscando porq es la unica solución q encontré para q las entradas tengan un fondo diferente a la plantilla y al mismo tiempo estén separadas entre sí (dándole al separador un 120% de largo y el mismo color q el fondo de la plantilla).

el problema es q para conseguir el efecto tendría q darle padding en la izquierda de 0px al #contentleft para q el separador me separe por completo las entradas; pero al hacer esto el texto de las entradas se quedaría pegado a la izquierda.
(http://guiaforex.blogspot.com)
Mi pregunta es: ¿como podría hacer para q el texto de las entradas tengan margen en la izquierda y que al mismo tiempo el separador me las separe por completo?

Esthetique Jeunesse dijo...

Hola Potro, quise agregar separadores y sale este cartel:
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The value of attribute "src" associated with an element type "null" must not contain the '<' character.
Te aclaro que soy nueva en esto, con esfuerzo de comprension lo estoy logrando, (disculpame x la falta ortografica, no se configurar el "acento" y la letra "enie"
Ademas necesito consultarte x otros item, mi blog es:
http://esthetiquejeunesse.blogspot.com/
Gracias, saludos.

Enrique Muley dijo...

Bueno, ya he solucionado los espacios laterales de las entradas, metiendo un div de padding dentro de cada entrada, pero esto es un trabajo de chinos, asi puedo tener los padding en 0 en la plantilla y así consigo q el separador sea total.

En cualquier caso, Potro, si sabes de alguna forma de solucionar el padding para las entradas en la plantilla del blog, consiguiendo al mismo tiempo q el separador no tenga padding (separador total), pues ya me cuentas.

Muchas gracias de antemano.

El Potro dijo...

Enrique Muley, no entiendo bien tu problema, si quieres darle un espacio entre cada entrada, eso se controla en el padding ubicado en .post {

Esthetique Jeunesse, ese mensaje indica que no estás poniendo bien el código. Copia el código tal como está aquí, y sólo remplaza el texto rojo por la URL de tu imagen.

Troyanonano dijo...

muchas gracias por este sencillo truco,me ha servido mucho ^^

Germán dijo...

Potro una consulta, los separadores me quedaron muy bien, pero tanto en las entradas como en las sidebar aparecen líneas punteadas... hay manera de eliminarlas?
Gracias.

http://gbarlasina.blogspot.com/

El Potro dijo...

Hola German,

Busca esta parte y elimina lo que está en negrita:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #190707;
padding-bottom:1.5em;
}

Saludos.

Germán dijo...

Joyaaaaaaaaaaaaaaaaaaaaaaaaaa. Espectacular. Gracias.
Con las sidebar es igual?

El Potro dijo...

Sería el mismo procedimiento pero ahora en esta área:

.sidebar .widget, .main .widget {
border-bottom:1px dotted #190707;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Martha Molina. dijo...

Hola! Acabo de iniciar mi blog para contarles a todos acerca de mi tesis de Arquitectura, la verdad que estaba muy triste pues no se mucho sobre el diseño de blog! Pero luego de seguir todos los consejos que tienes en tu blog.. wow que cambio!!
Muchas Felicidades!!! Sabes muchisimo y espero sigas ayudando a todos aquellos que no somos duchos en esto!!

y de verdad muchas Gracias!

Martha Molina. dijo...

Puedes Visitar mi blog y cualquier consejo es bienvenido.
http://ardimepmolina88.blogspot.com/

El Potro dijo...

Hola Martha Molina,

Muchas gracias por tus comentarios, me da mucho gusto saber que has podido darle un poco de vida a tu blog.
Todo lo que hay aquí es para compartir así que cualquier cosa que veas aquí puedes tomarla con toda confianza ;)

Saludos y mucho éxito!

^(.)^ Silvia ^(.)^ dijo...

Llevaba bastante tiempo buscando estos separadores, la verdad son muy buenos para no confundir entradas. Quisiera hacer una pregunta: ¿dispones de algun truco para separar entradas mediante cajas o bloques? Es algo parecido a esto:

http://tutorialesblogger-elisabeth.blogspot.com/2009/11/separar-cada-post-en-cajas.html

Gracias y si no estaba permitido poner un enlace, mil perdones.

El Potro dijo...

No tengo una entrada que lo explique aunque ya la tengo contemplada.
De cualquier modo en tu plantilla el proceso es distinto, entra en la Edición de HTML y busca esta parte:

.layout-two-column-left #beta
{float:right;
width:72%}

Cámbiala por esta otra:

.layout-two-column-left #beta
{float:right;
width:72%;
border:1px solid #000;
}

Lo que está en negrita es el código del color, puedes cambiarlo por cualquier otro.

¡Saludos!

^(.)^ Silvia ^(.)^ dijo...

Muchas gracias potro. En muchos blogs de ayuda como este la gente busca el mismo truco, esperemos que pronto estén códigos.
Recibe un saludo.

CFC Volver a Soñar dijo...

Hola, como estas? mira sooy nuevo en esto y tngo un blog en blogger pero he visto muchos trucos que he querido hacer no pude realizarlos por el motivo de que los codigos no son los mismos que tu describes, si me puedes ayudar te lo voy a agradecer, te dejo mi mail y me lo comunicas, muchas gracias. Gonzalo
g_etapa87@hotmail.com

El Potro dijo...

Si tienes dudas con los códigos deja un comentario en la entrada correspondiente y menciona cuál es el problema así como la dirección de tu blog para poder ayudarte.

Saludos Gonzalo.

MCCH dijo...

Buenas Potro,
Soy nuevo aquí, en general nuevo con los blogs.
Me parece que prestas un gran servicio a todos los blogeros, por lo que te felicito y agradezco tu dedicación.
Respecto al tema de los separadores, decirte que me bajé el archivo con todos los separadores, tal como indicas en las instrucciones; pero después no sé qué hacer con los archivitos cuando los descomprimos con el WinRar, pues me salen formato tipo .psd, .svg, .png, los cuales no sé cómo colocar en el html de mi blog.
¿Puedes ayudarme? Gracias
Un saludo

El Potro dijo...

Hola MCCH,

Primero gracias por tu comentario y bienvenido a Ciudad Blogger.
En ese comprimido hay varios tipos de archivos puesto que algunos son para los más avanzados que quieren rediseñar algun separador, pero para los demás sólo tienes que buscar los que tienen extensión .jpg y .png esos son los formatos de imagen, cualquiera de esos puedes usar sólo tienes que subirlo a un hosting como TinyPic, Imageshack o el que quieras y luego pones la URL de esa imagen en el código que se indica.

Saludos.

Infinit Corporation dijo...

no me acepta el codigo me dice que esta mal mi platilla que hago??

El Potro dijo...

Revisa de nuevo que pongas el código correctamente, lo mismo para la URL de la imagen.

Infinit Corporation dijo...

no me dice esto

No hemos podido obtener una vista preliminar de su plantilla.
Por favor, corrige el siguiente error y envía la plantilla de nuevo.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The value of attribute "src" associated with an element type "null" must not contain the '<' character.

que hagoo aa¡¡

El Potro dijo...

Ese error indica que estás poniendo mal el código de la imagen, parece que estás dejando un espacio vacío en alguna parte.
Inténtalo de nuevo y verifica que la URL de la imagen es correcta.

Infinit Corporation dijo...

Hola potro de nuevo yo como podria poner un separador en los gadget para separarlos yo pongo esta linea _________________________ pero solo se puede en algunos como poner una imagen en todos los gadgets saludos

El Potro dijo...

Agrega antes de ]]></b:skin> esto:


.sidebar .widget {
background: url(URL de la imagen) bottom;
}

Saludos.

BieberRockz dijo...

ola sabes que estoi intentando crear un tipo de "fansite", la cosa esque reemplazé el fondo de la entrada por una imagen, asi tambien el titulo y ahora queria cambiar la de abajo pero una linea queda abajo del separador, es complicado hechale un vistazo al blog y me dices que podria hacer porfavor. Mucha gracias.

El Potro dijo...

Esa es parte de la imagen que forma el contenedor de las entradas, supongo que al poner esa imagen se descuadra, quizá debas quitar esa imagen de fondo para que todo regrese a la normalidad, aunque a decir verdad esa línea casi ni se nota.

BieberRockz dijo...

si ya la quite y al quitarla se va esa linea pero me queda el centro del post con el color de fondo .. fin ¿habra alguna solucion o solo lo dejo asi? quizas el tamaño de la imegen de fondo o algo ..

El Potro dijo...

Quizá debas poner la imagen así agregando este código en tu plantilla dentro de los estilos:

.post-footer {
background: url(URL de la imagen)no-repeat;
}

BieberRockz dijo...

¿i si te doy privilegios y ves mi plantilla.. ? :D!!

Kum* dijo...

Bueno, después de buscar y buscar y no encontrar, he decidio crear mi propio separador y, siguiendo tus instrucciones... ya está puesto.

Gracias, maestro.

BieberRockz dijo...

haha buenoo U_U ayer me puse a ver la plantilla y ahora qedo asii U_U noo hay caso en lograr un diseño como esas webs de diseños para blog :/

El Potro dijo...

Kum*, te ha quedado muy bien =)


BieberRockz, definitivamente se ve mejor como estaba antes, deberías ponerlo de nuevo, total creeme que esa rayita que aparecía no es muy perceptible.

BieberRockz dijo...

jaja ok lo volvere a poner como antes, muchas gracias por todo :)

El Potro dijo...

Tienes que marcar la casilla 'Expandir plantillas de artilugios'

VALERIAKARINA dijo...

Hola Potro,¿cómo puedo eliminar los separadores que trae Blogger? En mi caso es una línea gris que separa la fecha y el título (en cada entrada) y las entradas entre sí. Yo quiero eliminar sólo las que separan las entradas

El Potro dijo...

En sí la que tienes es una sola que divide la fecha del título y a su vez da la apariencia de separar las entradas pero es una sola.
Si quieres eliminarla busca esta parte y elimina lo que está en negrita:

.main-inner .widget h2.date-header {
border-bottom: 1px solid $(widget.title.border.bevel.color);

VALERIAKARINA dijo...

Muchísimas gracias, me funcionó perfecto y quedó tal como quería :DDD! una última pregunta...¿puedo bajar un poco la fecha de las entradas?¿para que queden justo arriba de los títulos, sin espacio entremedio?

El Potro dijo...

Podrías intentar poniendo antes de
.main-inner .widget h2.date-header {
}

Esto:

h2.date-header {
margin-top:-20px;
}

Ricardo Baena dijo...

Hola,

Enhorabuena de nuevo por tu blog y la gran ayuda que nos prestas a los que nos estamos iniciando en esto de la blogosfera.

A mi me gustaría poner un separador en cada comentario, o como tienes tú, un separador y un número.

¿Tienes un tutorial sobre ello?

Gracias!

Ali dijo...

hola he echo unos cambios con unas separaciones de "0 comentarios" y "etiquetas"..empezado a tocar para ponerlo donde queria....pero por otra parte he cambiado una separacion...y cuando se entra a una entrada...lo que hay en la entrada el final "choca" contra otras letras que no son de la entrada..y me gustaria saber donde es donde se cambia para poner mas distancia en el final de las entradas

Gracias!!!

El Potro dijo...

Hola Ricardo Baena,

Para separar los comentarios busca esta parte y agrega lo que está en negrita:

#comments-block .comment-footer {
border-bottom: 1px solid #DDD;

Para numerarlos mira este tutorial:
http://santyweb.blogspot.com/2009/02/numeracion-de-los-comentarios.html

El Potro dijo...

Hola Ali,

Pues podrías modificar el espacio del footer para que no esté tan pegado.
Ese sería en esta parte:
.post-footer-line-1, .post-footer-line-2, .post-footer-line-3 {
margin: -28px 60px 30px 0px;

El -28px es el margen de arriba y seguro es el que está causando que se encime.

teofermi dijo...

Hola, quiero darte las gracias por el post, lo estaba buscando hace tiempo, lo he puedto en mi blog pero tengo un problema...el separador no me queda a la misma distancia, los espacios no quedan igualados, en unos post queda bien, sin embargo en otros me queda muy pegado al titulo..
¿me podrias ayudar?¿que hago para que me queden a la misma distancia?
muchas gracias

teofermi dijo...

Hola de nuevo, me olvide dejarte la direccion de mi blog para que veas como quedan mis separadores.

teofermi1.blogspot.com

El Potro dijo...

Hola teofermi,

Lo que sucede es que el título de las entradas está muy arriba. Puedes ponerlo un poco más abajo para que se vea más separado del separador (valga la redundancia).
Para hacerlo busca esta parte:

h3.post-title, h4 {
font: normal bold 20px 'Trebuchet MS', Trebuchet, sans-serif;;
color: #eb0909;
font:bold 20px 'Trebuchet MS',Trebuchet,sans-serif;
margin-left:40px;
margin-top:-28px;
}

Ese -28px cambialo por otro valor como por ejemplo 5px puedes probar con otros valores hasta que quede a la distancia que deseas.

Saludos.

Factoria de Colores dijo...

Hola Potro, a ver si me puedes echar una mano. He seguido tus instrucciones para poner una imagen de la web que recomiendas Smashing Magazine como separador de entrada pero no me surge efecto. No aparece.

Esas imágenes no tienen url. Lo que hice fue subirlas a un servidor de imágenes que me dió una url de donde se alojó esa imagen y seguí tus instrucciones. Pero no aparece la imagen, se queda en blanco.

A ver si me puedes resolver el problema

Un saludo y enhorabuena por tu web. A partir de ahora la visitaré muy a menudo.

El Potro dijo...

En enlace de Smashing Magazine es únicamente para guardar las imágenes y subirlas a un hosting como lo has hecho.
Es posible que la URL de la imagen la estés poniendo mal, necesitaría ver cuál es el código que estás poniendo para saber si es eso o que quizá lo estás poniendo en el lugar equivocado.

Saludos y gracias por tu comentario.

Factoria de Colores dijo...

Hola Potro,

El código que pegaba era este http://img30.imageshack.us/img30/7677/hrreginasilva.png

Por cierto, puedo poner separadores entre los gadgets de la barra lateral de mi blog???

Espero tus sabios consejos,

Un saludo,

Inma B.
www.factoriadecolores.blogspot.com

El Potro dijo...

Pues la URL de la imagen está bien, quizá lo estás poniendo en el lugar incorrecto, prueba hacerlo de nuevo verificando que sea el código que se explica en la entrada.

Para ponerlo en la sidebar mira el comentario #146

Saludos.

Factoria de Colores dijo...

Hola Potro,

He seguido las instrucciones al pie de la letra y sigue sin dar resultado. Ahora me sale un cuadradito con una x roja al final de cada entrada al verlo en vista previa. Que puedo hacer??

Por otro lado, he intentado poner la url de otra imagen en la sidebar para colocar un separador entre los gadget, pero en lugar de que aparezca una entre cada gadget aparecen una entre cada línea... Y no se ve la imagen completa, sino que se corta por la derecha

Está claro que esto no es lo mio. No hay manera.

A ver si con tus consejos logro conseguirlo

Un saludo y muchas gracias por toda tu atención

Inma B.
www.factoriadecolores.blogspot.com

El Potro dijo...

Si te aparece un cuadrito con una x roja entonces significa que ya te interpreta el código pero la URL de la imagen está mal y es por eso que no la muestra. Verifica de nuevo cómo pones el código sin saltarte nada, ni un espacio.

Con el de la sidebar necesitaría verlo puesto en tu blog para ver cómo se puede solucionar.

Saludos.

Hasune Miku dijo...

amigo tengo un problemon,
no me aparese el codigo k tengo k poner

nota: les kite el "<" para k se mostrara
([[[b:include data='post' name='post'/>]]])

solo me aparese

([[[b:include data='blog' name='all-head-content'/>]]])

y pss le intente ahi pero, si funciono pero no me funciono de separedor xD me aparesio en la parte de arriba del blog y psss lo keria de separador ejeje

este es un gran aporte
espero k me puedas ayudar...
se te admira(o como se diga xD)

Hasune Miku dijo...

ejeje perdona x borrar los comenytaris de arribaesk no me salia el codigo xD

El Potro dijo...

Revisa de nuevo cautelosamente, esa etiqueta debe estar en todas las plantillas, es básica para el funcionamiento del blog. Quizá está un poco escondida.

Hasune Miku dijo...

no viene s ptm

de dasualidad no dice otra cosa no no sea post?

xk no me sale

El Potro dijo...

Esa línea es justo la que hace que se muestren las entradas en un blog, si no la tuviera no se verían las entradas, así que ahí debe estar.

Hasune Miku dijo...

se psss no lo sigui sin ayar... ya le di letro x letro y no esta de casualidad o podrias generarme el codigo osea coear el k tienes tu y ponerlo aki digo si se puede y aparte ya segui una gui mas para otros despistados como yo pork no creo k sea el unico
psss
bye men
grax x las respuestas se te agradese

Hasune Miku dijo...

ejejeje ya lo aye xD
yo estaba ekivocado
eejejejejejejeje
no le puse en expandir xD
lo k es irse sin leer antes xD
gracias POTRO se agradese

Publicar un comentario en la entrada

Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.

 

Ciudad Blogger. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com

Ir arriba Ir abajo