Blogger: Posts relacionados (3)

Vuelvo al primer hack de los Posts Relacionados porque es el que me parece que funciona mejor o, por lo menos, con el que consigo hacer lo que yo pretendo. Pero, en lugar de crear un elemento HTML y colocarlo en la sidebar o debajo del área de posts, voy a incluirlo directamente en la plantilla como otra línea del pie de página de los posts que se mostrará exclusivamente en las páginas individuales.

Para esto, sigo el procedimento explicado anteriormente: coloco el script en el encabezado de la plantilla y la llamada en la sección categorias pero, aquí me detengo y voy a la plantilla para buscar:

<p class='post-footer-line post-footer-line-3'/>

o el final de las líneas con los pie de página.

Lamento no poder se más claro porque esta parte suele tener demasiadas variaciones en las plantillas; el sector del que hablo es algo así:

<b:includable id='post' var='post'>
   <div class='post'>
      .......
      <div class='post-body'>
         .......
      </div>
      <div class='post-footer'>
         <p class='post-footer-line post-footer-line-1'>
            ....... generalmente el autor del post .......
         </p>
         <p class='post-footer-line post-footer-line-2'>
            ....... generalmente las etiquetas del post .......
         </p>
         <p class='post-footer-line post-footer-line-3'>
            ....... generalmente sin uso .......
         </p>
         y aquí agregaremos el nuevo código
      </div>
   </div>
</b:includable>
</b:widget>

Esa nueva línea tendrá el siguiente código:

<div class='post-footer-line post-footer-line-4'>
   <b:if cond='data:blog.pageType == "item"'>
      <script type="text/javascript">
         removeRelatedDuplicates();
         printRelatedLabels();
      </script>
   </b:if>
</div>

Ahora, intentaremos personalizarla gráficamente con CSS y antes de </head> colocaremos las propiedades de estilo necesarias que serán variadas pero muestro las que yo utilizo para que sirva de referencia:

<style type='text/css'>
   .post-footer-line-4 {
      margin: 0 0 10px 20px;
      background: transparent url(URL_ImagenFondo) no-repeat 0% 10%;
   }
   .post-footer-line-4 ul {
      margin: 0pt;
      padding-left: 10px;
      list-style-image: none;
      list-style-position: outside;
      list-style-type: none;
   }
   .post-footer-line-4 ul li {
      margin: 0px 0pt 0px 50px;
      font-size: 11px;
      list-style-image: url(URL_ImagenFlecha);
      list-style-position: outside;
      list-style-type: none;
   }
   .post-footer-line-4 a, .post-footer-line-4 a:visited {
      font-weight: normal !important;
   }
   .post-footer-line-4 a:hover {
      padding-left: 5px;
      text-decoration: none !important;
   }
</style>

Personalmente, se me plante un último problema.

Si bien el hack permite establecer una cantidad de etiquetas a "evaluar" con el fin de seleccionar algunas de ellas para ser mostradas, esa cantidad no es la cantidad total a mostrar sino la cantidad máxima por cada etiqueta:

&amp;max-results=3

Quiere decir que si hay varias etiquetas, es muy probable que la lista mostrada pueda contener muchos posts, a mi gusto, demasiados.

Así que, una posibilidad es modificar el script para limitar el número absoluto de posts relacionados. Esto lo hacemos cambiando una de las funciones:

function printRelatedLabels() {
   var cuantosPosts = 0;
   var r = Math.floor((relatedTitles.length - 1) * Math.random());
   var i = 0;
   var dirURL = document.URL;
   document.write('<ul>');
   while (i < relatedTitles.length && i < 50) {
      if (relatedUrls[r] != dirURL) {
         document.write('<li><a href="' + relatedUrls[r] + '" title=" ' + relatedTitles[r] + '">' 
           + relatedTitles[r] + '</a></li>');
      }
      if (r < relatedTitles.length - 1) {
         r++;
      } else {
         r = 0;
      }
      i++;
      cuantosPosts++;
      if (cuantosPosts == 3) {
         break;
      }
   }
   document.write('</ul>');
}

Simplemente, vamos contando los posts a medida que se escriben y le decimos que cuando llegue a cierto valor, no continúe. El agregado es lo marcado en color y el dato a personalizar es la cantidad máxima, en este caso 3.