Posts Relacionados en Blogger/Blogspot

Arrancamos el año con todo, por eso estoy estrenando una nueva función en el Blog. Cuando ingreses a un artículo, verás en la parte inferior del mismo y luego de los comentarios, un cuadro con una lista de artículos relacionados al que estas leyendo. De esta manera se puede seguir navegando por el Blog dentro de los mismos temas o categorías de tu interés. Adicionalmente a eso se agregará la posibilidad de que ingreses tu banner por cierto tiempo a un bajísimo costo, lo que puede representar gran publicidad para tu sitio. Este último feature todavía está en etapa beta, pero pronto lo verás en la misma sección.

El código para implementar esto lo saqué del sitio de PurpleMoggy, mas abajo agrego algunos comentarios sobre la variante en cuanto a diseño que hice, pero en principio traduzco el tutorial para aquellos que les sea complicado seguirlo.

Antes de empezar nos tenemos que asegurar que nuestras etiquetas no tienen ningún caracter extraño como (?) o (/).
Para empezar agregaremos el código JavaScript al sitio y para eso tenemos que ir a nuestro panel de Blogger, elegir la solapa "Plantilla" y luego "Edición HTML". Ahí buscamos el tag "</head>" y justo antes de esta línea colocamos el siguiente código:

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
 for (var i = 0; i < json.feed.entry.length; i++) {
 var entry = json.feed.entry[i];
 relatedTitles[relatedTitlesNum] = entry.title.$t;
 for (var k = 0; k < entry.link.length; k++) {
  if (entry.link[k].rel == 'alternate') {
   relatedUrls[relatedTitlesNum] = entry.link[k].href;
   relatedTitlesNum++;
   break;
  }
 }
 }
}
function removeRelatedDuplicates() {
 var tmp = new Array(0);
 var tmp2 = new Array(0);
 for(var i = 0; i < relatedUrls.length; i++) {
  if(!contains(tmp, relatedUrls[i])) {
   tmp.length += 1;
   tmp[tmp.length - 1] = relatedUrls[i];
   tmp2.length += 1;
   tmp2[tmp2.length - 1] = relatedTitles[i];
  }
 }
 relatedTitles = tmp2;
 relatedUrls = tmp;
}
function contains(a, e) {
 for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
 return false;
}
function printRelatedLabels() {
 var r = Math.floor((relatedTitles.length - 1) * Math.random());
 var i = 0;
 document.write('<ul>');
 while (i < relatedTitles.length && i < 20) {
  document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
  if (r < relatedTitles.length - 1) {
   r++;
  } else {
   r = 0;
  }
  i++;
 }
 document.write('</ul>');
}
//]]>
</script>

Guardamos y marcamos la opción "Expandir plantillas de artilugios". Ahí buscamos el siguiente código que seguramente se encuentre en la sección post-footer-line-1, 2 o 3.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Ese código debemos cambiarlo por el siguiente o bien agregar las líneas adicionales.

<b:if cond='data:post.labels'>
  <data:postLabelsLabel/>
  <b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
  <b:if cond='data:blog.pageType == "item"'>
        <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
  </b:if>
  </b:loop>
</b:if>

Guardamos la plantilla y vamos a "Elementos de Página" para agregar el código que nos va a mostrar los Posts Relacionados. Agregamos un nuevo HTML/Javascript Widget y lo ubicamos donde querramos. El código que debe tener es el siguiente:

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Grabamos y ahora volvemos a la solapa "Edición HTML" para hacer la última modificación. Debemos buscar el HTML Widget que recien agregamos. Si le pusiste un título, buscalo por ese título, si no le pusiste un título tenes que buscarlo como HTML# donde # es el último número de HTML que encuentres. El formato sería como el siguiente y en este caso es el widget HTML13 pero puede variar. Debemos agregar las líneas que estan en negrita al código de nuestro Widget.

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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>

Para controlar la cantidad de artículos que se listan hay dos parámetros con los que podemos jugar. El primero se encuentra en el primer cuadro de código y dice algo como i < 20. El segundo número está en el tercer cuadro de código y dice algo como max-results=10. Con estos números podemos controlar la cantidad de posts que van a aparecer. También debemos controlar esa cantidad porque puede afectar a la velocidad de carga del sitio.

Modificaciones Personales

En principio lo que hice fue controlar la cantidad máxima de posts a mostrar en 5 para ambos valores. Creo que con 5 artículos relacionados estamos bien y es una buena cantidad.
Luego le quise dar un aspecto un poco mas agradable utilizando CSS, el código es el siguiente:

#relatedposts {width:600px;text-align:left;padding:0px; margin-left:15px;}
.relatedpostbox{border:1px solid #3399ff;width:580px;background-color:#e9f8ff;}
.relposttitle {height:12px;padding:5px 10px 5px 10px;color:#000;font-style:normal;font-size:12px;text-ransform:uppercase;}
.relposttxt {padding:0px 0pt 5px 15px; font-size:14px;}
.relpostlink {font-size:10px;color:#666666;font-weight:normal;}
.relposttxt p {margin-right:10px;margin-bottom:10px;}
.relposttxt ul {list-style-type: none;list-style-image: none;padding-left: 0;}
.relposttxt li {list-style-type: none;list-style-image: none;padding-left: 0;}

Luego modifiqué el contenido del Widget HTML que está representado por el 4to cuadro de código para poder asociar esos tags CSS. A esto se le puede agregar publicidad Adsense por ejemplo con el mismo formato o algún banner que quieras. El código sería el siguiente:

<br />
<div id="relatedposts">
<div class='relatedpostbox'>
<div class='relposttitle'><strong>Temas Relacionados</strong></div>

<div class='relposttxt'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
## ACA PODES AGREGAR TU CODIGO ADSENSE ##
</div></div></div>

La última modificación que hice fue agregar la URL debajo del título del post para hacerlo mas parecido al look de Adsense. Esto lo hice modificando el código del 1er cuadro. Si te interesa hacer lo mismo debemos buscar la línea <li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li> y modificarla por lo siguiente:

<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a><br /><span class="relpostlink">' + relatedUrls[r] + '</span></li>

Para ver cómo queda implementado ingresá a cualquier artículo y navegá hasta el final pasando los comentarios.