Breadcrumbs en Blogger (viejito pero funciona)

Breadcrumbs son .. migas de pan, el rastro que dejaban Hansen y Gretel para encontrar el camino de regreso a casa.

En una página web es eso que muchas veces vemos debajo del header y que nos indica dónde estamos y cuál es el "camino" par regresar al inicio de la página.

En Blogger, el único camino que podemos seguir es el que establece el elemento Archivos:

Inicio > Año > Mes > Entrada

Y eso eso es lo que hace este hack de purplemoggy que ya es bastante viejo pero que cumplo en explicar o, simplemente traducir ya que es muy sencillo de agregar.

¿Para qué sirve? En principio, ayuda a la navegación y eso siempre es bienvenido. De todas formas, si lo que tenemos es un blog con muchas entradas mensuales, la utilidad práctica es bastante relativa. No sé cuántos usuarios navegan a través de los archivos de meses o años, estimo que pocos porque no es algo que nos ayude demasiado a encontrar cosas.

Para implementarlo, debemos asegurarnos que la Configuración del blog sea correcta. En la solapa Archivo debe estar marcada esta opción:

Frecuencia de archivo Sin archivoDiariamenteSemanalmenteMensualmente

Vamos a la plantilla. Con los artilugios expandidos, buscamos el widget del blog:

<b:widget id="Blog1" locked="false" title="XXXXXXXXXX" type="Blog">

Y dentro de este, el LOOP de los posts:

<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>

Allí, justo después de esa línea, agregamos lo siguiente:

<b:include data='post' name='breadcrumbs'/>

Por último, pondremos el código de ese INCLUDE. Para eso, lo más sencillo es ir hacia abajo hasta el final del widget:

</b:widget>
</b:section>

Y justo antes de </b:widget>, colocar el código correspondiente

<b:includable id='breadcrumbs' var='post'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>
      <span class='post-labels'>
        <a expr:href='data:blog.homepageUrl' rel='tag'>Inicio</a>
        <script type='text/javascript'>
          //<![CDATA[
          var strCrumbHref = location.href.toLowerCase();
          var intCrumbHtml = strCrumbHref.indexOf('.html');
          var intCrumbWhereAt = strCrumbHref.lastIndexOf('/', intCrumbHtml);
          var intCrumbYearStart = intCrumbWhereAt - 7;
          var intCrumbMonthStart = intCrumbWhereAt - 2;
          var intCrumbYear = parseInt(strCrumbHref.substr(intCrumbYearStart, 4));
          var intCrumbYearPlusOne = intCrumbYear + 1;
          var strCrumbMonthNum = strCrumbHref.substr(intCrumbMonthStart, 2);
          var strCrumbMonth = '';
          switch(strCrumbMonthNum) {
            case '01': strCrumbMonth = 'Enero'; break;
            case '02': strCrumbMonth = 'Febrero'; break;
            case '03': strCrumbMonth = 'Marzo'; break;
            case '04': strCrumbMonth = 'Abril'; break;
            case '05': strCrumbMonth = 'Mayo'; break;
            case '06': strCrumbMonth = 'Junio'; break;
            case '07': strCrumbMonth = 'July'; break;
            case '08': strCrumbMonth = 'Agosto'; break;
            case '09': strCrumbMonth = 'Septiembre'; break;
            case '10': strCrumbMonth = 'Octubre'; break;
            case '11': strCrumbMonth = 'Noviembre'; break;
            case '12': strCrumbMonth = 'Diciembre'; break;
          }
          var strCrumbOutput = ' &gt; ';
          strCrumbOutput += '<a href="/search?updated-min=' + intCrumbYear;
          strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&updated-max=' + intCrumbYearPlusOne;
          strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&max-results=50">' + intCrumbYear + '</a> &gt; ';
          strCrumbOutput += '<a href="/' + intCrumbYear + '_' + strCrumbMonthNum + '_01_archive.html">' + strCrumbMonth + '</a>';
          document.write(strCrumbOutput);
          //]]>
        </script>
        <noscript>
          <b:if cond='data:post.labels'>
            &gt;
            <b:loop values='data:post.labels' var='label'>
              <b:if cond='data:label.isLast == &quot;true&quot;'>
                <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
              </b:if>
            </b:loop>
          </b:if>
        </noscript>
        <b:if cond='data:post.title'>&gt; <span class='bctitulo'><data:post.title/></span></b:if>
      </span>
    </div>
  </b:if>
</b:includable>

Como todo elemento, podemos agregarle propiedades CSS agregándolas antes de ]]></b:skin>. Allí, todo queda librado a la imaginación peroe stas erían las definiciones elementales:

div.breadcrumbs { /* es el DIV contenedor */
  /* puede tener fondo, bordes, etc */
  margin: 10px 0;
  padding: 4px 0 4px 10px;
}
div.breadcrumbs a { /* los enlaces del "camino" */ }
div.breadcrumbs span.bctitulo {/* el título de la entrada */}