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.
