Breadcrumbs en Blogger

24 de julio de 2010 115 comentarios ,
Los breadcrumbs o migajas de pan, son una especie de guía que nos indican a lo largo de la navegación dentro de un sitio Web en dónde nos encontramos, funciona como una brújula que nos muestra el camino por el que hemos andado, por ejemplo, si yo lo tuviera puesto arriba de la entrada diría:
Estás en : Inicio » Trucos » Breadcrumbs en Blogger

Para ponerlo en tu blog sólo basta añadir unos códigos, primero entra en Diseño | Edición de HTML y marca la casilla Expandir plantillas de artilugios. Ahora busca este código y agrega lo que está en color rojo justo donde se indica:
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

Luego un poco más arriba busca esta línea:
<b:includable id='main' var='top'>

Y arriba de ella agrega lo siguiente:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Estás en: <a expr:href='data:blog.homepageUrl' rel='tag'>Inicio</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Archivos de <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Todas las entradas
<b:else/>
Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Entradas etiquetadas bajo <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Por último si quieres darle un poco de estilos como color de fondo, borde, etc, agrega antes de ]]></b:skin> esto:
.breadcrumbs {
border-top: 2px ridge #2E2E2E; /* borde superior */
border-bottom: 2px ridge #2E2E2E; /* borde inferior */
background: #D8D8D8; /* color de fondo */
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
}

Ahí puedes agregarle más estilos si lo deseas, el resultado será este:

breadcrumbs
Si tu entrada tuviera más de una etiqueta mostrará sólo la última etiqueta que aparezca según el orden alfabético.


115 comentarios en:

" Breadcrumbs en Blogger "

  1. Muy bueno potro, pero que crees que me sale debajo de los Titulos del Post
    y pues mejor no decidi colocarlo

    ResponderEliminar
  2. buenisimo me ha quedado muy chulo ya tenia rato que lo andaba buscado, gracias!

    ResponderEliminar
  3. Potro: excelente truco, pero me gustaria borrar la palabra "Estas en:"
    Saludos

    ResponderEliminar
  4. Esta interesante,
    Lo voy a tener en cuenta!

    ResponderEliminar
  5. mm ise todo y no me salio nada fijate http://lockerzamericalatina.blogspot.com/

    ResponderEliminar
  6. muy bueno, un dia de estos lo pruebo ;D

    ResponderEliminar
  7. Está bueno este truco, ya lo estaré probando en mi blog. Gracias potro.

    ResponderEliminar
  8. Excelente esto era lo que buscaba ase tiempo muchas gracias :D

    ResponderEliminar
  9. Hola El Potro. Mi problema es que algunas de las lineas que das en el primer código no las tengo. ¿Qué hago? ¿Las agrego?

    ResponderEliminar
  10. Qué bueno que les ha gustado, un abrazo a todos y gracias por su visita!

    ResponderEliminar
  11. AdminWeb, debería de salir, no sé por qué pueda suceder.

    Escuela del Cambio, debería de tenerlos, son códigos básicos de las plantillas, sino pon los códigos rojos justo antes y después de <b:include data='top' name='status-message'/>

    Pozo+10™, pueden ser varias cosas, aunque es "normal" que haya días que un blog sea más lento de lo habitual.

    ResponderEliminar
    Respuestas
    1. En relación a lo que pone "Escuela de Cambio" y porque a mí me ha pasado y he tardado un buen rato en descubrirlo. La primera línea de código es posible que se haya eliminado para no mostrar más lo de "Mostrando entradas". Lo que yo he hecho es volver a poner el código fijándome en una plantilla básica y en vez de eliminar la frase, ocultarla. Con ésto tenemos la línea de código y el truco va perfecto, gracias Potro!!!

      Eliminar
  12. Me gustaba cuendo ponieas el Blog de pruebas
    ponganlo :)

    ResponderEliminar
  13. EXELENTE ME ANDUVO DE MARAVILLA LO PRIMERO!!!...CHE EN REALIDAD NO SE POR QUE COMO NICK ME APARECE DATOS DEL BLOG...SALUDOS!!!!!

    ResponderEliminar
  14. Potro para el post de: Ocultar la Sidebar en Páginas Estaticas, hise todo lo que tenía que hacer, pero hay un problema...
    Hise todo,, le di de wight 0 a la sidebar 1, sidebar 2, sidebar 3, sidebar 4 y a el main le di el ancho que le debia dar, 980... y mira como quedo todo:
    http://img228.imageshack.us/img228/7333/paginaestaticanofuncion.png

    ¿Qué habra pasado?
    Saludos!

    ResponderEliminar
  15. Hola potro *_____* espero tu dia vaya genial! Dx!! descansa un poco! xDDDDD

    La entrada me parecio muy interesante, juzgando por el recorrido puedo llegar a ser muy util ;D!
    en la noche lo intentare a ver que queda ^^
    por cierto todavia no he intentado nada de esto pero podria existir la posibilidad de agrgarle una imagen como
    background? tambien podria ser interesante agregar estilos a los links o,o

    bueno luego me pondre a experimentar con el truco *w*

    besitos potro y como siempre gracias por existir xDDDD
    *le tira flores xDDD*

    ResponderEliminar
  16. ◄•••►F.Garcia◄•••►, prometo que usaré más seguido el blog de pruebas sólo que ahora no lo vi necesario =)

    Datos del Blog, entra al escritorio de Blogger y junto a tu foto haz click en Editar Perfil, ahí puedes poner el nick que quieres que aparezca.

    Coloush +16, para no confundir a los demás, las dudas sobre esa entrada van en esa entrada.

    Mirai, mi día va perfecto, espero que el tuyo también así sea =)
    Seguro que puedes ponerle una imagen de fondo y personalizar los links, ya que te animes a experimentarlo me comentas si tienes alguna duda ¡Besos y gracias por tu comentario!

    ResponderEliminar
  17. Busca donde esta parte:

    h2.date-header {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 7px 0px;
    text-align: left;

    Cambia ese left por center

    ResponderEliminar
  18. Hola, Potro! Excelente dato, como siempre.
    En realidad, siempre que veía eso en algún sitio me preguntaba cómo podría hacerse. Dentro de un rato voy a intentarlo en mi blog, para ver cómo me resulta.
    Muchas gracias y saludos!

    ResponderEliminar
  19. Quisiera tener la forma de tus comentarios en mi blog.!
    es decir que me comenten así verticalmente como te comentan..
    soy incipiente en esto..quisiera que mi blog sea más óptimo espero que me deas ese tip.! para hacerlo en mi blog..
    ahí esta mi blog--> http://nueva-ideologia.blogspot.com
    espero tu respuesta.
    posdata:gracias por todos los Trucos que pones en tu página estan de lujo!!(Y)

    ResponderEliminar
  20. zona lerh, qué bueno que te ha gustado :)

    Vicky, gracias a ti por tu visita, ya se te extrañaba leerte por estos rumbos ;)

    Yordi Emir Mantilla Tapia, gracias por tu comentario, yo tengo el formulario incrustado y veo que es el mismo que tú usas, no sé si te refieres a alguna otra cosa.

    ResponderEliminar
  21. Hola Potro Gracias por la decidacion y el tiempo que empeñas para enseñar a todos los bloggers y aprendices como yo, oye como hiciste para poner las 4 imagenes con sus respectivos accesos directos en el lado derecho de tu pantalla, me refiero a RESPONDONES FONDOS 240 VIDEOS GRACIOSOS Y CIBER BLOGGERO, SI CUANTAS CON ALGUN TUTOREAL TE AGRADESCO ME AYUDES CON EL LINK y nuevamente gracias.

    ResponderEliminar
  22. Gracias MARLENE por tu amable comentario.
    Aquí está la información para poner los banners en esa área.
    Saludos.

    ResponderEliminar
  23. Qu� tal, Potro! T� tan amable, como siempre. Gracias.
    Ahora s� ya puse este truco en mi blog y me sali� de pel�cula; y todo, muy f�cilmente y sin complicaciones.
    Excelente! Gracias!

    ResponderEliminar
  24. Hola, de nuevo. No sé si será en mi PC el asunto o qué, pero acabo de ver que todas las letras con tilde en mi comentario anterior, aparecen como cuadritos. ¿Por qué será? ¿Será problema en mi máquina o es tu página? Me da curiosidad. (Bueno, no sé si este comentario saldrá de nuevo así, con cuadritos).
    Saludos!

    ResponderEliminar
  25. Es verdad, qué curioso...
    No sé si haya sido tu teclado o el blog, aunque nunca había visto que a alguien más le sucediera al comentar o.O

    ¡Saludos!

    ResponderEliminar
  26. Buenas,
    Potro una pregunta sobre adsense.
    Solicite la cuenta hace mas de dos semanas y no he recibido respuesta. Me dice que la cuenta esta inactiva porque estan revisando la solicitud. En el foro de adsense me dicen que tenga paciencia pero la verdad es que no se cuanto tiempo he de esperar. Bueno un saludo y gracias por todo.

    ResponderEliminar
  27. Ummm no lo sé, varía de persona en persona y desconozco por qué sea así, a mí me la aprobaron en pocas horas pero sé de otros que han tenido que esperar algunos días.

    ResponderEliminar
  28. Tengo una duda con la entrada delanuncio flotante pk ya lo tengo puesto pero llevo tiempo dandole vueltas y cuando pulso en el anuncio k pongo yo me aparece lo siento la pagina k estabas buscando en el blog no existe.

    ResponderEliminar
  29. Porque no has puesto nada donde dice URL del enlace, es por eso que te lleva a una página que no existe.

    P.D. Las preguntas sobre ese tema ponlos en esa entrada para no confundir a los demás ;)

    ResponderEliminar
  30. WOWWW!!! fantástico!! siempre vi eso en webs con php pero nunca pensé que se pudiera hacer en HTML. Felicidades Bro, excelente truco!! sale Twitt :)

    Un abrazo!!!

    ResponderEliminar
  31. ok lo hare pero eske no estaba seguro si tu lo mirarias

    ResponderEliminar
  32. Descuida, sí leo todos los comentarios ;)

    ResponderEliminar
  33. Hola! està genial el truco,me gustarìa hacerlo pero no tengo esta parte: lo busquè con ctrl+f y me dice que no existe,¿como lo puedo hacer? te agradezco la ayuda haces un maraviloso trabajo!
    saludos

    ResponderEliminar
  34. Hay que marcar la casilla 'Expandir plantillas de artilugios' para poder localizarlo.

    Saludos.

    ResponderEliminar
  35. Gracias,ya habia expandido la plantilla,pero igual no aparecìa, de todas maneras lo agreguè y funciona,jeje
    Muchas gracias por tu trabajo,nos ayuda muchoooo!
    saludos.

    ResponderEliminar
  36. Por nada, me alegra que ya lo hayas solucionado :)

    ResponderEliminar
  37. Hola potro, nunca antes te escribí pero me animo porque le puse esta aplicación a mi blog y pues sólamente aparece:
    estás en > inicio

    nada más, yo quisiera saber como hago para que se siga desglozando los links, por ejemplo:
    estás en > inicio > musica

    gracias por tu respuesta

    ResponderEliminar
  38. Listo, ya entendí gracias, pero por ejemplo al hacer click en la etiqueta "musica" no se puede enlazar con el menu "musica" directamente? es posible eso?

    ResponderEliminar
  39. Pues no sé a qué te refieras con enlazar, pero si alguien hace click en Música entonces aparecerán todas las entradas que contengan esa etiqueta.

    ResponderEliminar
  40. Gracias por tu respuesta potro, me sirvió de mucho, pero otra cosita más, cómo hago para que cuando le dé click digamos a "música" y aparezcan todas las entradas con esa etiqueta... pues sólo aparezcan los títulos de esas entradas y no todo su contenido
    gracias potro.

    ResponderEliminar
  41. man una consulta... es posible q al hacer click en "entradas antiguas" u otra opcion asi solo
    cargue o cambie la parte de las entradas?, es decir , para q no cargue de nuevo toda la pag ...esto lo kiero ahcer mas q nada para q la musica en mi caso radio no vuelva acargar cada vez q haga click en un enlace...pero tampoco kiero que me abra otro internet explorer...sera posible eso?

    ResponderEliminar
  42. Pues podrías hacer lo mismo que se explica en esta entrada para condicionar dónde se muestran los gadgets.
    Sólo que en lugar de la primera línea en color rojo debes poner esta otra:

    <b:if cond='data:blog.pageType != &quot;archive&quot;'>

    ResponderEliminar
  43. uhm.. he hecho eso pero nada sigue cargando toda la pagina :S , solamente kiero q cargue la parte e las entradas q no afecte a los gadget, titulo del blog y demas ...

    pa q veas este es mi blog www.ayudasrapidas.blogspot.com

    ResponderEliminar
  44. Pues con esa condicional dentro del gadget no debería aparecer en los índices tales como etiquetas, archivo y enlaces de navegación.

    ResponderEliminar
  45. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  46. mira he copiado ese codigo q me diste despues de este bincludemain... y antes del cierre /INCLUDE he puesto el "b/if" pero sin eso o con el b:if igual no me funca sale un error antes de guardar los cambios

    ResponderEliminar
  47. Sólo había que cambiar la primera línea en color rojo por la que te di.
    Quedaría así:

    <b:widget id='HTML1' locked='false' title='Gadget' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType != &quot;archive&quot;'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>

    <b:include name='quickedit'/>
    </b:if>
    </b:includable>
    </b:widget>

    ResponderEliminar
  48. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  49. ewsq hay un problema ..la 1ra linea de ese codigo q me haz pasado no existe ningun "title=gagget....." sin embargo si existen varios b:widget id='HTML4' locked='false' title='Traductor' type='HTML' , asi me salen y hay varios de stos pero con diferentes cosas :S y a todos les estoy poniendo ese codigo:

    b:if cond='data:blog.pageType != "archive"'
    /b:if

    ResponderEliminar
  50. Claro que la primea línea no existe como tal ya que sólo es un ejemplo para que identifiques dónde debe ir el código, es por eso que he puesto en negrita las partes que se deben agregar.

    ResponderEliminar
  51. weno he hecho en todos los q sale esas lineas pero nada sigue cargando toda la pagina :S , weno creo q no se puede tas haciendo tu esfuerzo no importa gracias :D .

    ResponderEliminar
  52. Se puede personalizar el texto del breadcrumb? (cambiar colores, tipo de font, negrita, cursiva, etc).

    Saludos

    ResponderEliminar
  53. Claro, ahí donde dice que se puede personalizar sólo agrega los estilos para el texto, por ejemplo:

    color: #00FF00;
    text-style: italic;
    font-weight: bold;

    ResponderEliminar
  54. Muy bién, le agrege bordes redondeados tambien, se ven muy bien pero al intentar poner todo el texto del breadcrumbs cursivo nose que pasa pero no se pone, este es mi codigo...


    .breadcrumbs {
    -moz-border-radius:0 0 5px 5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    border-right:1px solid #D9D9D9;
    border-left:1px solid #D9D9D9;
    border-top: 1px solid #D9D9D9; /* borde superior */
    border-bottom: 1px solid #D9D9D9; /* borde inferior */
    background: #F9F9F9; /* color de fondo */
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #6E6E6E;
    text-style: italic;
    font-weight: italic;
    }


    Saludos...

    ResponderEliminar
  55. Una disculpa weon, te puse mal la wea, puse text-style y es font-style, quedaría así:

    .breadcrumbs {
    -moz-border-radius:0 0 5px 5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    border-right:1px solid #D9D9D9;
    border-left:1px solid #D9D9D9;
    border-top: 1px solid #D9D9D9; /* borde superior */
    border-bottom: 1px solid #D9D9D9; /* borde inferior */
    background: #F9F9F9; /* color de fondo */
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #6E6E6E;
    font-style: italic;
    font-weight: bold;
    }

    La penúltima es la que indica que será cursiva y la última que será en negrita.

    Saludos.

    ResponderEliminar
  56. Hola Potro,
    Tomándome la libertad, te hago otra pregunta.
    Yo he conseguido que estas miguitas se vean en las entradas pero si pinchas sobre una etiqueta no. ¿Podrías, tambien en esto ayudarme?
    Gracias otra vez

    ResponderEliminar
  57. De hecho está configurado para que al entrara a una etiqueta aparezca un texto como este:

    Estás en: Inicio » Entradas etiquetadas bajo Nombre-de-la-etiqueta

    Verifica que has puesto el código completo y que no le hayas hecho alguna modificación al segundo código que es el que hace que se muestre el mensaje también en las etiquetas.

    ResponderEliminar
  58. Pues la verdad, antes de ver este post y conocerte, yo había utilizado el de Rosa y ahora no me atrevo a tocarlo por si lo desarmo todo....
    Gracias en cualquier caso, era por si yo podía cambiarlo facilmente porque me dá verguenza ya preguntarle que le he aburrido pero no te preocupes que lo haré y por favor, perdona las molestias
    un abrazo

    ResponderEliminar
  59. No es ninguna molestia, pero no estaría de más que le preguntarás a Rosa si de ahí conseguiste el código, probablemente te diga qué modificación puedas hacerle.

    Abrazos!

    ResponderEliminar
  60. ¡Hola de nuevo!
    Lo intenté y me funcionó, pero cuando quiero personalizarlo, no me deja. ¿Que puede ser?
    Gracias de antemano.

    ResponderEliminar
  61. Podría ser por los estilos que tienes arriba de donde lo has puesto, parece que están mal cerrados esos estilos y podría estarlo afectando.
    Prueba poner la parte personalizada justo arriba de:
    /* Footer
    ----------------------------------------------- */

    ResponderEliminar
  62. Hola potro, gracias muy buen post. Una ayuda, no se por que mi plantilla no tiene los codigos que usted dice buscar, no los encuentro, si puedes ayudarme, gracias de antemano, si puedes enviame la respuesta a gilherelim@yahoo.com

    ResponderEliminar
  63. Recuerda que hay que marcar la casilla 'Expandir plantillas de artilugios'.
    Si aún así no estuvieran entonces tu plantilla quizá está muy modificada y el autor no agregó todos los códigos; en esos casos se tendrá que usar otra plantilla si se quiere usar este truco.
    Saludos.

    ResponderEliminar
  64. Gracias Potro me ayudo mucho este truco.

    Saludos!

    ResponderEliminar
  65. Me alegra que así haya sido América :)

    ResponderEliminar
  66. ME gustaria que esto solo apareciera dentro de las etiquetas y no dentro de los post se puede?

    ResponderEliminar
  67. Entonces en lugar del segundo código largo que habrías de pegar, pega este:

    <b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == &quot;&quot;'>
    Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Todas las entradas
    <b:else/>
    Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Entradas etiquetadas bajo <data:blog.pageName/>
    </b:if>
    </div>
    </b:if>
    </b:includable>

    ResponderEliminar
  68. y se puede colocar line-3? seria mi ultima pregunta y como

    ResponderEliminar
  69. y tambien tiene color borde lateral?

    ResponderEliminar
  70. No he entendido tu pregunta, ¿a qué te refieres con colocar line-3?
    Para los bordes elimina esto que está en negrita:

    border-bottom: 2px ridge #2E2E2E; /* borde inferior */

    Eso hará que el borde se aplique también a los lados.

    ResponderEliminar
  71. jeje line-3 me referia asi como mover autor fechas y eso potro

    en post footer line-3

    ResponderEliminar
  72. No, no es igual, tiene que estar donde se indica.

    ResponderEliminar
  73. Tuve un problema con este codigo por que mi plantilla no lo tenia pero lo agrege y funciono oslo lo digo por si sus plantilla no lo tiene, gracias Potro por este tutorial :)

    ResponderEliminar
  74. me dice que la etiqueta no esta cerrada !!!

    ResponderEliminar
  75. Entonces te está faltando una parte del código o sin querer has eliminado otra, prueba de nuevo revisando que no te falte ningún caracter.

    ResponderEliminar
  76. Si deseamos borrar estas breadcrumbs una vez instaladas, ¿supongo que se deben borrar los pasos dados?. Me gustaría quitarlos del blog. Se que es verano y no te dejamos ni a la de tres jejej. Gracias de antemano

    ResponderEliminar
  77. Descuida, que aunque es verano yo sigo acá, pero en unos días si estaré desaparecido en la playa :)
    En efecto, sólo es cuestión de invertir los pasos, quitar lo que se agregó en color rojo, y eliminar el resto que se debió añadir como se explica en la entrada.
    Saludos.

    ResponderEliminar
  78. Ya lo apliqué al blog que tengo, Potro. ¡Muchas gracias!

    ResponderEliminar
  79. Qué gusto que te haya sido útil :)

    ResponderEliminar
  80. hola potro se q este tema es muy antiguo pero me gustaria saber como remplazar esto >> por una imagen...

    inicio >> nombre de la entrada

    inicio (imagen) nombre de la entrada

    gracias...

    ResponderEliminar
  81. Hola Dek,

    Sólo busca todos los &#187; que encuentres y sustitúyelos por el código de la imagen:

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

    ResponderEliminar
  82. Hola!!
    como hago para que en vez de ir al home cuando haces click en Inicio vaya a una pagina determinada?

    Vos sabes que estoy usando el truco de la intro para el blog y no logre arreglarlo con cookies para que solo aparesca una vez asi que estoy tratando de "cerrar" todos los accesos que se tenga al home

    ResponderEliminar
  83. Hola Curu-Curu,

    Sólo busca esta línea:
    <a expr:href='data:blog.homepageUrl' rel='tag'>

    Y cámbiala por esta:
    <a href='URL del enlace' rel='tag'>

    Luego esta línea (aparece varias veces):
    <a expr:href='data:blog.homepageUrl'>

    Y cámbialas por esta otra:
    <a href='URL del enlace'>

    Ya sólo busca todas las veces que dice Inicio y cámbialo por el texto que quieras.
    Buen fin de semana!

    ResponderEliminar
  84. Perdón potro, pero tengo un problema con los BreadCrumbs *^*
    Nosé por que, pero ahora ya no me aparece más ]]> sólo (supongo que se debe a que recientemente me cambié a DrafBlogger) ahora me aparece: "Añade CSS aquí para sobreescribir estilos existentes...]]>" & no sé dónde ubicar la parte de

    .breadcrumbs {
    border-top: 2px ridge #2E2E2E; /* borde superior */
    border-bottom: 2px ridge #2E2E2E; /* borde inferior */
    background: #D8D8D8; /* color de fondo */
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    }

    Para modificar el estilo; por que el Bread se ve muy pegado a la fecha, & en una combinación de colores que no me gusta. Intenté ponerlo antes de "Añade CSS aquí para sobreescribir estilos existentes...]]>", antes de ]]> solo, borrando la parte de "Añade CSS aquí para sobreescribir estilos existentes...", pero NADA me funciona. & esto me pasa con cada modificación que quiero hacer que vaya ubicada antes del famoso ]]>, si pudieras ayudarme me salvarías la vida! ya van muchas modificaciones frustradas gracias a esa modificación que aparece ahora en mi plantilla... buenas tardes. Espero tu respuesta! :)

    ResponderEliminar
  85. Nosé por que pero no salió la parte de SKIN en mi comentario ._., creo que igualmente me entendiste xD

    ResponderEliminar
    Respuestas
    1. Hola hola :)
      Aun en la nueva interfaz puedes tener acceso a la Edición de la plantilla, sólo entra en la pestaña "Plantilla" y haz click en "Edición de HTML", luego click en "Continuar", ahí puedes buscar ]]></b:skin> y pegar los estilos que deseas.

      Saludos.

      Eliminar
    2. No, no me entendiste Potro.. xD
      Yo se como acceder a mi plantilla, pero ya no me sale ]]>, ahora me sale "Añade CSS aquí para sobreescribir estilos existentes...]]>" EN la plantilla. & no se dónde colocar el código: si antes de "Añade..", después, en el medio. Por que me aparece pegado. No sé si me explico...

      Eliminar
    3. Pues debería darte la opción igual que a todos. ¿Puedes hacer un pantallazo de la parte donde estás y donde te aparece eso?
      ¿Has probado hacerlo desde otro navegador?

      Eliminar
  86. Que tal Potro en mi blog las entradas las tengo en un cuadro y quiero poner el breadcrumbs arriba de ese cuadro. Como hago para hacerlo?

    ResponderEliminar
    Respuestas
    1. Hola Obed, como los breadcrumbs son un INCLUDABLE siempre quedan en ese lugar.

      Eliminar
  87. Cordial saludo, tengo una inquietud, en Blogger se podrían programar los breadcrumbs de tal forma que aparezca en el lado izquierdo el nombre de la entrada anterior y en el lado derecho el nombre de la entrada siguiente, lo he visto en otros blogs (supongo que con Wordpress) pero no he podido encontrarlo como tal en Blogger.
    Entiendo que como tal el Breadcrumb es una ruta pero me queda la curiosidad y como ando aprendiendo... te agradecería mucho me hicieras claridad sobre ello.

    Muchas gracias y muy agradecido por el conocimiento que nos brindas, lo he aplicado mucho en mis blogs.

    ResponderEliminar
    Respuestas
    1. Hola Andrés, como bien mencionas, los breadcrumb son sólo las rutas de las entradas, no muestra nada más.
      Lo que sí puedes hacer es cambiar los enlaces de navegación por el nombre de las entradas siguientes y anteriores como Jaime lo explica en este post:
      http://elbalcondejaime.blogspot.com/2011/03/reemplazar-los-links-entradas-antiguas.html

      Eliminar
    2. Ok, muchas gracias Potro, miraré tu recomendación.

      Eliminar
  88. Aprovechándome de tu buena voluntad ;-) me surge otra duda... digamos que en mi blog tengo el Widget de entradas populares y quiero cambiarle el tamaño de la letra del texto solamente a ese Widget... ¿se puede hacer?

    Se que en la plantilla ello se da desde el siguiente código:







    Pero el anterior codigo es para todos los Widgets en general y tengo la duda si se le puede hacerle alguna modificación a la plantilla, sin necesidad de crear el Widget, para que solo a uno el tamaño de la letra sea diferente al resto de los Widgets.

    El Widget es el que trae la plantilla más reciente de Blogger, nombrado como Entradas populares


    Saludos y muchas gracias

    ResponderEliminar
    Respuestas
    1. No pude ver el código que pusiste. Pero con la ID del gadget puedes aplicar estilos exclusivos para él, por ejemplo:
      #PopularPosts1 {
      font-size:14px;
      }

      Eliminar
    2. Muchas gracias Potro, no sé que habrá pasado con el código (a lo mejor no se interpreto ó de seguro lo debí colocar en comentarios...) ya había visto ello en alguno de tus post pero no lo encontraba y/o relacionaba, pero había caído en cuenta, lo he probado y ha funcionado perfectamente.
      Desde el día en que te coloque la pregunta me ha surgido otra inquietud y es... ¿Se podrá personalizar el Widget de entradas populares para hacer que muestre otro tipo de entradas según un criterio? (recomendadas, votadas, por una etiqueta..., a gusto propio, etc.), he estado explorando y he visto que Blogger deja colocar más de un "popular post"... y por ello me surgió la inquietud

      Eliminar
    3. Nop, los datos de ese gadget los controla Blogger, así que no podemos modificarlo de tal manera que muestre otros datos que no sean los que Blogger tiene sobre nuestro blog.

      Eliminar
  89. Ok Potro, muchas gracias por la info.
    Saludos

    ResponderEliminar
  90. Hola potro! encontré esto navegando pero lo explicaban como un enlace arriba de la entrada con el nombre de la entrada anterior y siguiente...o algo así. Supuestamente, es una técnica para aumentar el tiempo de permanencia en el sitio. Quería saber si tenías ideas de cómo hacerlo. Saludos.

    ResponderEliminar
    Respuestas
    1. Umm nop, pero busca en El Balcón de Jaime, me parece que ahí tiene una entrada sobre cómo cambiar los enlaces de "Entradas antiguas" y "Entradas recientes" por los nombres de las entradas.
      Saludos.

      Eliminar
  91. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Si quieres que aparezca sólo en las páginas de etiquetas el penúltimo código sería así:
      <b:includable id='breadcrumb' var='posts'>
      <b:if cond='data:blog.url != data:blog.homepageUrl'>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <div class='breadcrumbs'>
      Estás en: <a expr:href='data:blog.homepageUrl'>Inicio</a> &#187; Entradas etiquetadas bajo <data:blog.pageName/>
      </div>
      </b:if>
      </b:if>
      </b:includable>

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. No he podido ver el blog porque sólo admite invitados pero seguro debe ser la plantilla. Quizá debas ponerlos en distintas ubicaciones (cerca de la que tiene el <data:adStart/>). Pero recuerda que en la portada no los verás con el código que te di, sólo entrando a una página de etiquetas.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger