lunes 8 de febrero de 2010

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%;" />
Tantos códigos me han dado mucha sed ¿qué tal una cerveza?

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

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

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