Los separadores entre posts (dividers) hacen que se delimite el área visual entre cada post lo cual lo hace más presentable y organizado.
Poner el separador es de lo más sencillo, sólo entra en Plantilla | Edición de HTML, y busca esta línea:
Justo debajo de ella pega lo siguiente:
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:
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:
Poner el separador es de lo más sencillo, sólo entra en Plantilla | Edición de HTML, 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%;" />
Ciudad Blogger
wowwwª!!!!
ResponderEliminarestyo si es lo maximo!
lo estube buscando por todos lados
gracias potro!
SALU2
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
ResponderEliminarSaludos
Blogio, qué bueno que al fin lo encontraste!
ResponderEliminarMeri, 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.
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
ResponderEliminarque bueno que todavia tienes muchas cosas que postear aqui espero que nunka se termine Ciudad Blogger
Muy bueno
ResponderEliminarahora ¿se puede poner un enlace en la imagen?
saludos
Uy que buenos !!!
ResponderEliminarMe 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 :) :) :)
Alex, gracias, si te decides a ponerlo ya sabes cómo ;)
ResponderEliminarEl 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!
Potro!!! te pusiste romanticon! ^^ jajajaja
ResponderEliminarBueno como tu ya sabes cada post que hacer aqui, siempre me parece genial, y este no es la excepcion.
Me gusta el azul, voy a intentar utilizarlo, gracias
ResponderEliminarPotro, de nuevo lo has conseguido, me encanta!^^
ResponderEliminarAhorame pregunto si se podría alternar 2 diferentes entre los posts?
Algo habré hecho mal seguro
ResponderEliminarLo tengo puesto aquí
http://lascositasdemeri.blogspot.com/
hola potro(de nuevo xD)
ResponderEliminarhay forma de cambiar el deja un comentario por una imagen?
y qu este al final de la entrada
gracias!
SALU2!
PepeX, no es para menos, es el mes del amouuur ♥
ResponderEliminarmonica, 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.
emm... en el perfil de alex?
ResponderEliminarhay esta el perfil de alex..
ResponderEliminarte equivocastes no?
No sé a qué enlace estés haciendo click, pero no, no es el perfil de Alex, es el enlace al tutorial.
ResponderEliminarHayy el amor!!! xD. jajajaja este mes pone sentimental a cualkiera.
ResponderEliminarPerdon mi buen amigo por estar molestandote a cada rato con mis dudas que hasta yo puedo resolver.
ResponderEliminarLo 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
mmmm...Bro, no quiero decir nada pero creo que Alex acaba de hackear tu blog...jajajajaja
ResponderEliminarEstuve 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 Venado, jajaja por supuesto que no me molesta, pero si me preocupa tu Alzheimer :)
ResponderEliminarbro, jajajajaja, eso explicaría por qué mis enlaces dirigen a su perfil. Un abrazo!
Si, que esta puesto tal que así
ResponderEliminarAGGGGGGGGGGGG, no sale el trocito de la plantilla te lo pongo por email
Potro, ya he visto que sale, pero no en la página principal si no cuando abres una entrada
ResponderEliminarHola Meri,
ResponderEliminarEn 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.
Potro muchisimas gracias, "problema" solucionado
ResponderEliminarTe conteste al email
Saludos
Excelente Meri, ya lo veo funcionando en tu blog ;)
ResponderEliminarSaludos.
Gracias, estaba buscando un detalle así.
ResponderEliminarMu bonico.
Seguro escogerás un separador muy bueno ;)
ResponderEliminarSaludos.
Como siempre, muy bueno facil y practico.. muchas gracias
ResponderEliminarPor nada, me alegro que lo hayas encontrado útil ;)
ResponderEliminarPotro, ¿hay alguna posibilidad de ponerlo de manera que salga un separador aleatorio cada vez que entres en el blog?
ResponderEliminarHola Fran Cruz,
ResponderEliminarSí, 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.
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.
ResponderEliminarHola! felicitaciones por toda la enseñanza que nos brindas!
ResponderEliminarConsulta, 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!
Hola Momentos,
ResponderEliminarNecesitas marcar la casilla Expandir plantillas de artilugios para poder localizarlo.
Saludos.
Pero que rapidéz!! no pensé me ibas a responder tan pronto! gracias mil!
ResponderEliminarAhhh!! pero te anticipé que era novata!! jaja ahora intento nuevamente! gracias! gracias! gracias! todavía hay gente buena en este mundo eh!
Todos somos novatos alguna vez, así que no hay problema ;)
ResponderEliminarSaludos!
:) todo salió de maravillas!!
ResponderEliminarjoé, macho... estoy leyendo los comentarios... ¿nunca te "pillan" sin saber la respuesta? Eres un fenómeno, tío!
ResponderEliminarJajaja, no te creas, a veces sí sucede :D
ResponderEliminarSaludos.
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
ResponderEliminarEspero que me podais ayudar, gracias :$
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.
ResponderEliminarSaludos.
me sirvio muchísimo..mil gracias.
ResponderEliminarsaludos
Qué gusto que te haya sido de utilidad.
ResponderEliminarSaludos.
Y porque a mi se me ve encima del encabezado? (imagen que tengo como título de blog)
ResponderEliminarSobre 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.
ResponderEliminarLo 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.
Gracias. en verdad me ha servido mucho toda tu ayuda y todo lo que indicas en tu blog...
ResponderEliminargracias por todooo....
pronto hare mi propio blog y con todo y tu ayuda sera fenomenal.. mil graxiii
Hola avi-veracruzana,
ResponderEliminarGracias a ti por tus comentarios y tu visita.
Qué bueno que este sitio te ha podido ser de ayuda.
Saludos.
Genial! Creo que un separador grunge vendrá de maravilla, pronto te lo enseñaremos xD :)
ResponderEliminar¡Un saludo!
Seguro que les quedará perfecto ;)
ResponderEliminarAbrazos!
Hola Potro!
ResponderEliminarel 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!
Hola Pedro,
ResponderEliminarBusca esta parte:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
Borra lo que está en negrita y listo ;)
Un abrazo!
gracias maestro!
ResponderEliminarun abrazo!
hola Mr.Potro, yo he optadp por el diseño sencillo de la línea en negrita...
ResponderEliminarPero 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.
Hola Sergio ♫♫♫,
ResponderEliminarQuizá 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 :)
Gracias Mr.Potro, ese gadget me vino junto con las estrellas de puntuación...
ResponderEliminarVale, creo que se queda como está. Muchas gracias, Mr.
Por nada :)
ResponderEliminarHola Potro:
ResponderEliminarAntes 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.
Hola Potro:
ResponderEliminarAntes 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"
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 ;)
ResponderEliminarHola 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
ResponderEliminarSaludos y gracias de antemano.
Hola PanJebus,
ResponderEliminarLa 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.
Muchas gracias por la respuesta tan rapida =)
ResponderEliminarAhora mismo lo pruebo.
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.
ResponderEliminarGRACIAS
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
Hola Sofía Serra Giráldez,
ResponderEliminarMe 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!
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.
ResponderEliminarMuchas 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
pues no doy con tu cuenta de correo para poder ponerla en lo de los permisos, ¿qué hago, Potro?
ResponderEliminarEl 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.
ResponderEliminarSaludos.
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.
ResponderEliminarNo 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.
Hola de nuevo Sofía,
ResponderEliminarSi 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!
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
ResponderEliminarEn 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
Muchísimas gracias, Potro, ¡ha funcionado! Te estoy muy agradecida.
ResponderEliminarRecibe un fuerte abrazo
Sofía
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.
ResponderEliminarSofía, qué bueno que te ha resultado!
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
ResponderEliminarEse es un problema con tu gadget de Outbrain, verifica la configuración del gadget así como el código.
ResponderEliminarSaludos.
ya lo probe potro, será porque mi imagen la tengo alogada en picassa o eso no tiene nada que ver
ResponderEliminarperdon alojada...
ResponderEliminarla línea ya pude colocarla, pero el problema es con la imagen
ResponderEliminarNecesitaría saber cuál es la URL de la imagen que estás poniendo para saber si es eso.
ResponderEliminarPero 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.
Muchas gracias! :3 Me sirvió de mucho.
ResponderEliminarPuse 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!
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.
ResponderEliminarPuedes 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.
NO ENCUENTRO EL
ResponderEliminarHola 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???
ResponderEliminarperdon pero soy nuevo en esto.-
saludos
Hola! esta genial este blog me saco muchas dudas!!
ResponderEliminarahora, 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:
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.
ResponderEliminarLa 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.
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!!
ResponderEliminarhttp://i42.tinypic.com/2gtrm83.jpg
http://i42.tinypic.com/2d0b8fq.jpg
Hola Microboy90,
ResponderEliminarEntré a tu blog pero creo que ya lo has solucionado.
Saludos.
@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!!
ResponderEliminarOk, como lo vi ahí pensé que ya habías editado la plantilla.
ResponderEliminarCon 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.
@POTRO ...Perfecto man,gracias por tu ayuda era justo lo que buscaba!! Chido...
ResponderEliminarPotro... Se pueden poner gadgets entre las entradas como los que estan en la sidebar sin que estos se repitan como separadores entre las entradas?
ResponderEliminarEs decir que puedaponer diferentes imágenes como separadores?
ResponderEliminarNo, pero puedes intentar poner este script para que salgan las imágenes al azar, así podrá salir una distinta entre cada entrada:
ResponderEliminarhttp://ciudadblogger.com/2009/06/crear-un-rotador-de-banners-al-azar.html
Saludos.
ok, gracias por tu respuesta!!
ResponderEliminarNada, 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.
ResponderEliminarPero 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.
¿No será la URL de la imagen que estás poniendo la que no funciona?
ResponderEliminarLa mayoría de las veces ese es el problema.
Saludos.
Gracias Potro, me fue de lujo!
ResponderEliminarGracias a ti por tu visita :)
ResponderEliminar¡¡¡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!!!
ResponderEliminar☻/
/▌
/ | *´¨)
...¸.•´¸.•*´¨) ¸.•*¨)
(¸.•´ (¸.Nyn•*♥
La imagen de la cerveza no la tengo en los comentarios, sino como separador, igual que se explica en esta entrada.
ResponderEliminarPara encontrar los códigos necesitas marcar la casilla de Expandir plantillas de artilugios, luego puedes usar las teclas CTRL + F para localizarlos.
Saludos.
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¡¡¡¡
ResponderEliminarHola Gabriella, no sé a cuáles columnas te refieres ¿me puedes mostrar un blog que lo tenga?
ResponderEliminarSaludos.
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.
ResponderEliminarHola Mara,
ResponderEliminarBusca 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.
me funcionó. muchas gracias por la ayuda :) saludos.
ResponderEliminarMe alegro que esté todo bien :)
ResponderEliminarpotro como yo puedo pegar las fotos k hay en los gadgets osea haci
ResponderEliminarhttp://i43.tinypic.com/zmf52v.jpg
Sólo pega en un elemento HTML/Javascript este código cambiando las URL de las imágenes:
ResponderEliminar<img src="URL de la imagen" />
<img src="URL de la imagen" />
<img src="URL de la imagen" />
Saludos.
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
ResponderEliminarEntonces pon los códigos seguidos uno detrás de otro sin saltar renglones.
ResponderEliminarpotro 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
ResponderEliminarComo te dije antes, tienes que poner los códigos seguidos uno detrás del otro, sin espacios ni saltos de renglones.
ResponderEliminarpotro 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
ResponderEliminarSegún el código fuente de tu plantilla no están uno detrás de otro.
ResponderEliminarHola Potro, gracias por este genial aporte a Bloggeros expertos e inexpertos (como yo)
ResponderEliminarValiendome 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
Hola Sembrador y Recolector.,
ResponderEliminarEse 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.
Espectacular el tuto ..
ResponderEliminarEs el segundo que sigo y funciona sin ningun problema..
Muchas gracias por el tuto ..
y espero seguir agradeciendo algunos otros ..
Saluos ;)
Muchas gracias por tus aportaciones, ya lo he puesto en mi blog y ha sido facil
ResponderEliminarun saludo
teo
Qué bueno que todo ha resultado como esperabas :)
ResponderEliminarhola 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).
ResponderEliminarel 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?
Hola Potro, quise agregar separadores y sale este cartel:
ResponderEliminarNo 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.
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.
ResponderEliminarEn 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.
Enrique Muley, no entiendo bien tu problema, si quieres darle un espacio entre cada entrada, eso se controla en el padding ubicado en .post {
ResponderEliminarEsthetique 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.
muchas gracias por este sencillo truco,me ha servido mucho ^^
ResponderEliminarMe alegro que te haya sido útil :)
ResponderEliminarPotro 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?
ResponderEliminarGracias.
http://gbarlasina.blogspot.com/
Hola German,
ResponderEliminarBusca 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.
Joyaaaaaaaaaaaaaaaaaaaaaaaaaa. Espectacular. Gracias.
ResponderEliminarCon las sidebar es igual?
Sería el mismo procedimiento pero ahora en esta área:
ResponderEliminar.sidebar .widget, .main .widget {
border-bottom:1px dotted #190707;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Graciasssssssssssssss. Un abrazo
ResponderEliminarHola! 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!!
ResponderEliminarMuchas Felicidades!!! Sabes muchisimo y espero sigas ayudando a todos aquellos que no somos duchos en esto!!
y de verdad muchas Gracias!
Puedes Visitar mi blog y cualquier consejo es bienvenido.
ResponderEliminarhttp://ardimepmolina88.blogspot.com/
Hola Martha Molina,
ResponderEliminarMuchas 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!
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:
ResponderEliminarhttp://tutorialesblogger-elisabeth.blogspot.com/2009/11/separar-cada-post-en-cajas.html
Gracias y si no estaba permitido poner un enlace, mil perdones.
No tengo una entrada que lo explique aunque ya la tengo contemplada.
ResponderEliminarDe 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!
Muchas gracias potro. En muchos blogs de ayuda como este la gente busca el mismo truco, esperemos que pronto estén códigos.
ResponderEliminarRecibe un saludo.
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
ResponderEliminarg_etapa87@hotmail.com
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.
ResponderEliminarSaludos Gonzalo.
Buenas Potro,
ResponderEliminarSoy 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
Hola MCCH,
ResponderEliminarPrimero 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.
no me acepta el codigo me dice que esta mal mi platilla que hago??
ResponderEliminarRevisa de nuevo que pongas el código correctamente, lo mismo para la URL de la imagen.
ResponderEliminarno me dice esto
ResponderEliminarNo 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¡¡
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.
ResponderEliminarInténtalo de nuevo y verifica que la URL de la imagen es correcta.
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
ResponderEliminarAgrega antes de ]]></b:skin> esto:
ResponderEliminar.sidebar .widget {
background: url(URL de la imagen) bottom;
}
Saludos.
me costo ! PERO PUDEEE! jajaja graacias :)
ResponderEliminarQué bueno que te ha resultado todo bien =)
ResponderEliminarola 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.
ResponderEliminarEsa 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.
ResponderEliminarsi 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 ..
ResponderEliminarQuizá debas poner la imagen así agregando este código en tu plantilla dentro de los estilos:
ResponderEliminar.post-footer {
background: url(URL de la imagen)no-repeat;
}
¿i si te doy privilegios y ves mi plantilla.. ? :D!!
ResponderEliminarLo siento, pero no hago eso ;)
ResponderEliminarBueno, después de buscar y buscar y no encontrar, he decidio crear mi propio separador y, siguiendo tus instrucciones... ya está puesto.
ResponderEliminarGracias, maestro.
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 :/
ResponderEliminarKum*, te ha quedado muy bien =)
ResponderEliminarBieberRockz, definitivamente se ve mejor como estaba antes, deberías ponerlo de nuevo, total creeme que esa rayita que aparecía no es muy perceptible.
jaja ok lo volvere a poner como antes, muchas gracias por todo :)
ResponderEliminarfunciono bien parami blog, saludos
ResponderEliminarMe da gusto que te haya sido útil ;)
ResponderEliminarno encuentro esa linea en el html :S
ResponderEliminaralguien me podria yudar es que no lo encuentro u_u
ResponderEliminarTienes que marcar la casilla 'Expandir plantillas de artilugios'
ResponderEliminarHola 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
ResponderEliminarEn 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.
ResponderEliminarSi 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);
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?
ResponderEliminarPodrías intentar poniendo antes de
ResponderEliminar.main-inner .widget h2.date-header {
}
Esto:
h2.date-header {
margin-top:-20px;
}
Hola,
ResponderEliminarEnhorabuena 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!
Hola Ricardo Baena,
ResponderEliminarPara 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
¡Muchas gracias, eres un fenómeno!
ResponderEliminarHola Ali,
ResponderEliminarPues 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.
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..
ResponderEliminar¿me podrias ayudar?¿que hago para que me queden a la misma distancia?
muchas gracias
Hola de nuevo, me olvide dejarte la direccion de mi blog para que veas como quedan mis separadores.
ResponderEliminarteofermi1.blogspot.com
Hola teofermi,
ResponderEliminarLo 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.
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.
ResponderEliminarEsas 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.
En enlace de Smashing Magazine es únicamente para guardar las imágenes y subirlas a un hosting como lo has hecho.
ResponderEliminarEs 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.
Hola Potro,
ResponderEliminarEl 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
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.
ResponderEliminarPara ponerlo en la sidebar mira el comentario #146
Saludos.
Hola Potro,
ResponderEliminarHe 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
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.
ResponderEliminarCon el de la sidebar necesitaría verlo puesto en tu blog para ver cómo se puede solucionar.
Saludos.
Este comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminaramigo tengo un problemon,
ResponderEliminarno 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)
ejeje perdona x borrar los comenytaris de arribaesk no me salia el codigo xD
ResponderEliminarRevisa de nuevo cautelosamente, esa etiqueta debe estar en todas las plantillas, es básica para el funcionamiento del blog. Quizá está un poco escondida.
ResponderEliminarno viene s ptm
ResponderEliminarde dasualidad no dice otra cosa no no sea post?
xk no me sale
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.
ResponderEliminarse 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
ResponderEliminarpsss
bye men
grax x las respuestas se te agradese
ejejeje ya lo aye xD
ResponderEliminaryo estaba ekivocado
eejejejejejejeje
no le puse en expandir xD
lo k es irse sin leer antes xD
gracias POTRO se agradese
Maravilloso. Ya perdí la cuenta de cuántas veces me fue útil tu blog. Abrazo - Fede
ResponderEliminarGracias Fede, ojalá continúe siéndote útil.
ResponderEliminarHola Maestro:
ResponderEliminarLa cantidad de cosas que estoy aprendiendo con tu blog.Gracias por tu esfuerzo en enseñarnos. Bueno tengo una pregunta que me trae de cabeza. ¿Existe alguna manera de disminuir la distancia que queda entre los gadget?. Creo que este tema ya lo has tratado con sofia, pero le comentaste la disminucion de varios gadgets, y yo quiero que la separación sea menor en todos los que ponga.
Un saludo y muchas gracias.
Hola diariopegassus,
ResponderEliminarDepende de qué plantilla uses, pero para una "normal" se busca donde dice .sidebar .widget {
Debajo debe estar un margin-bottom o algún otro margin, sino lo tiene se le agrega, por ejemplo así:
margin-bottom:10px;
Con eso determinas la distancia entre cada gadget.
Saludos.
Muchas gracias por la respuesta, pero no me sale.
ResponderEliminarLa plantilla es Sencillo de Josh Peterson de blog.
Lo más parecido a .sidebar.widget{, es una fila qué termina en sidebar .widget">, y debajo no hay un margin-bottom, pero si pongo margin-bottom:10px; y cambio el 10 por otro número no cambia nada.
Un saludo y muchas gracias por aguantar a un mal aprendiz
Permiteme que te pregunte otra cosa: ¿Se puede quitar los margenes izquierdo y derecho, es decir, que ocupe toda la pantalla la plantilla de Sencillo de Josh Peterson de blog. Gracias maestro, por mi parte te has ganado el cielo.
ResponderEliminarUn saludo
En las plantillas nuevas de Blogger no sé, no he experimentado mucho en ellas :\
ResponderEliminarsuper genial, potro se ve sensacional me quedo con el sepador azul
ResponderEliminarMe alegro que te haya gustado :)
ResponderEliminarCuando añado el texto de la línea debajo de me dice que hay un erro y que lo corrija! como puedo resolverlo?
ResponderEliminarGracias
Me encanta tu post
Necesitaría saber cuál es el error que te marca, pero en la mayoría de los casos es porque o no se puso completo el código, o se puso en un lugar que no era, o bien, que sin darte cuentas podrías haber eliminado algún caracter de otro código.
ResponderEliminarmuy bueno, solo q no encuentro la bendita linea esa agrrr, estare ciega o que?
ResponderEliminar