Agregar breadcrumbs o migas de pan en Blogger

Como agregar migajas de pan en Blogger Breadcrumbs o migajas de pan

Demostración

Las migas de pan (breadcrumbs) es uno de los requerimientos de W3C para llegar al nivel A de accesibilidad web. Esto porque facilitan a los usuarios saber en qué parte se encuentran y qué camino recorrió. Además, combinado con datos estructurados, Google mostrará nuestros breadcrumbs en los resultados de búsqueda.


En esta ocasión he desarrollado los breadcrumbs para Blogger, que además también incluyen los datos estructurados BreadcrumbList necesarios para que sean visibles desde los resultados de búsqueda de Google.


Instalar

Lo primero que vamos a hacer es agregar el código css. Para ello vamos a dirigirnos a Temas > Personalizar > opciones avanzadas > CSS Personalizado, y allí agregaremos lo siguiente:


/*!
* Includable: BreadCrumbs v1.0.1
* by zkreations
*/.breadcrumb,.breadcrumb li{margin:0;padding:0;list-style-type:none}.breadcrumb{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:1em;font-size:14px;overflow:hidden}.breadcrumb__link{display:block;height:100%;vertical-align:middle;line-height:1.5em;position:relative;padding-bottom:.5em;padding-left:2.6em;-webkit-transition:background .2s,color .2s;transition:background .2s,color .2s;padding-top:.5em}.breadcrumb__link::after,.breadcrumb__link::before{border-top:40px solid transparent;border-bottom:40px solid transparent;border-left:20px solid;position:absolute;margin-top:-40px}.breadcrumb__item:first-child .breadcrumb__link{border-radius:4px 0 0 4px;padding-left:1em}.breadcrumb__link::after,.breadcrumb__link::before{content:" ";display:block;width:0;height:0;top:50%}.breadcrumb__link::after{z-index:2;left:calc(100% - 1px);-webkit-transition:border .2s;transition:border .2s}.breadcrumb__link::before{z-index:1;left:calc(100% + 4px)}.breadcrumb__name svg{width:18px;display:block}.breadcrumb__name{display:inline-block;text-transform:capitalize;vertical-align:middle}
/*
=> Personalizacion
*/

/* Primero elemento (Home)
----------------------------------------------*/
.breadcrumb__name svg {
    fill: #fff; /*Color del icono*/
}
.breadcrumb__item:first-child .breadcrumb__link {
    background-color: #23a6b3; /*Fondo del primer elemento*/
}
.breadcrumb__item:first-child .breadcrumb__link::after {
    border-left-color: #23a6b3; /*Color del indicador*/
}

/* Elementos restantes
----------------------------------------------*/
.breadcrumb__link {
    background: #f2f2f2; /*Color de fondo*/
    color: #757575; /*Color de textos*/
}
.breadcrumb__link::after {
    border-left-color: #f2f2f2 /*Color de los indicadores*/
}
.breadcrumb__link:hover {
    background-color: #23a6b3; /*Color de fondo (Hover) */
    color: #fff; /*Color de textos (Hover) */
}
.breadcrumb__link:hover::after {
    border-left-color: #23a6b3; /*Color de las indicadores (Hover) */
}

/* Separacion
----------------------------------------------*/
.breadcrumb__link::before {
    border-left-color: #ffffff; /*Color de las separaciones*/
}

Presionamos el botón "Aplicar" para que los cambios se guarden. Ahora vamos a volver a "Temas", solo que esta vez pulsamos el botón "Editar HTML", buscamos <b:includable id='post' var='post'> y arriba de eso pegamos el siguiente código:


<b:includable id='post-breadcrumbs' var='post'>
<!-- Breadcrumbs by //zkreations.com -->
<ol class='breadcrumb' typeof='BreadcrumbList' vocab='http://schema.org/'>
  <!-- Primer elemento -->
  <li class='breadcrumb__item' property='itemListElement' typeof='ListItem'>
    <a class='breadcrumb__link' expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'>
    <span class='breadcrumb__name' property='name'>
      <svg fill='#000000' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
        <path d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/>
        <path d='M0 0h24v24H0z' fill='none'/>
      </svg>
    </span></a>
    <meta content='1' property='position'/>
  </li>
  <!-- Bucle con etiquetas (limite de 3) -->
  <b:loop index='e' values='data:post.labels limit  3' var='i'>
    <li class='breadcrumb__item' property='itemListElement' typeof='ListItem'>
      <a class='breadcrumb__link' expr:href='data:i.url' property='item' typeof='WebPage'>
      <span class='breadcrumb__name' property='name'><data:i.name/></span></a>
      <meta expr:content='data:e + 2' property='position'/>
    </li>
  </b:loop>
</ol>
</b:includable>

Por último necesitamos incluir la siguiente etiqueta en donde queramos mostrar los breadcrumbs. Esta es quizás la parte más complicada ya que varía dependiendo de la plantilla:


<!-- Breadcrumbs -->
<b:include cond='data:view.isPost and data:post.labels' data='post' name='post-breadcrumbs'/>

Una buena forma de encontrar el sitio adecuado es buscando <data:post.title/>, e intentando encontrar la zona que corresponda a los títulos de los artículos, luego simplemente hacemos espacio arriba de eso y pegamos el código.


Datos estructurados

He diseñado el código con los datos estructurados del tipo microformatos ya incluidos. Puedes comprobar la validez de los datos utilizando la herramienta Prueba de datos estructurados proporcionada por Google.


No hay ninguna garantía de que Google vaya a tomar tus datos de forma inmediata o a largo plazo. Si los datos son procesados por Google entonces los resultados de búsqueda tendrían un aspecto similar a este:


Datos estructurados migas de pan en Google

La captura anterior corresponde a la vista desde el navegador de escritorio. Si la página es consultada desde un dispositivo móvil, el aspecto que tendrían los breadcrumbs en Google sería el siguiente:




Más ayuda

Se que es muy complicado encontrar el lugar correcto en la plantilla desde la edición html, sobre todo para las personas que no reconocen el código de Blogger o HTML, así que si tienes problemas para implementar las migas de pagan, déjame un comentario y yo te guiaré de forma personalizada.


Espero que este articulo les haya resultado útil para implementar esta característica en Blogger. Si te ha servido no olvides compartir este articulo para ayudar a más personas, además, es algo que siempre agradeceré. Que estén bien y gracias por pasar.