Blogger: Posts relacionados (2)

Esta es una variante para mostrar Posts Relacionados. En este caso, lo único que debemos hacer es agregar el script en la plantilla.

La ubicación depende de cada caso pero, por ejemplo, podemos agregarla como un nuevo bloque dentro del pie de página de los posts. Estos, se identifican con el siguiente código:

<p class='post-footer-line post-footer-line-1'>
   .......
</p>

Y, normalmente, en una plantilla standard, hay tres:

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

El primero, contiene los datos el autor, el segundo las etiquetas y el tercero no tiene uso y es el que suele emplearse para agregar marcadores sociales y otro tipo de detalles personales.

Busquemos:

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

o bien

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

en el primer caso, agregamos el script justo debajo de </p> en el segundo caso, en la línea inmediata ya que quiere decir que no hay contenido.

El código es el siguiente:

<b:if cond='data:blog.pageType == "item"'>
<div class='post-footer-line post-footer-line-4'>
   <h2>Posts Relacionados</h2>
   <div id='post-relacionados'/>
   <script type='text/javascript'>
      var inicioBlog = "<data:blog.homepageUrl/>";
      var maxNumberOfPostsPerLabel = 4;
      var maxNumberOfLabels = 10;
      maxNumberOfPostsPerLabel = 100;
      maxNumberOfLabels = 3;
      function listarEntradas(json) {
         var ul = document.createElement('ul');
         var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? 
         json.feed.entry.length : maxNumberOfPostsPerLabel;
         for (var i = 0; i &lt; maxPosts; i++) {
            var entry = json.feed.entry[i];
            var alturl;
            for (var k = 0; k &lt; entry.link.length; k++) {
               if (entry.link[k].rel == 'alternate') {
                  alturl = entry.link[k].href;
                  break;
               }
            }
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.href = alturl;
            if(a.href!=location.href) {
               var txt = document.createTextNode(entry.title.$t); 
               a.appendChild(txt);
               li.appendChild(a);
               ul.appendChild(li); 
            }
         }
         for (var l = 0; l &lt; json.feed.link.length; l++) {
            if (json.feed.link[l].rel == 'alternate') {
               var raw = json.feed.link[l].href;
               var label = raw.substr(inicioBlog.length+13);
               var k;
               for (k=0; k&lt;20; k++) label = label.replace("%20", " ");
               var txt = document.createTextNode(label);
               var h = document.createElement('b');
               h.appendChild(txt);
               var div1 = document.createElement('div');
               div1.appendChild(h);
               div1.appendChild(ul);
               document.getElementById('post-relacionados').appendChild(div1);
            }
         }
      }
      function buscarEntradas(query, label) {
         var script = document.createElement('script');
         script.setAttribute('src', query + 'feeds/posts/default/-/'
         + label +
         '?alt=json-in-script&amp;callback=listarEntradas');
         script.setAttribute('type', 'text/javascript');
         document.documentElement.firstChild.appendChild(script);
      }
      var labelArray = new Array();
      var numLabel = 0;
      <b:loop values='data:posts' var='post'>
         <b:loop values='data:post.labels' var='label'>
            textLabel = "<data:label.name/>";
            var test = 0;
            for (var i = 0; i &lt; labelArray.length; i++)
               if (labelArray[i] == textLabel) test = 1;
               if (test == 0) { 
               labelArray.push(textLabel);
               var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels;
               if (numLabel &lt; maxLabels) {
                  buscarEntradas(inicioBlog, textLabel);
                  numLabel++;
               }
            }
         </b:loop>
      </b:loop>
   </script>
</div>
</b:if>

Al igual que en el primer caso, podemos personalizar este bloque para adaptarlo gráficamente a la plantilla.