Me estaba resistiendo, pero tenía la entrada medio preparada y he decidido que hoy toca entrada coñazo para personalizar un poco nuestro Blog. ¡yujuu!

En este caso voy a explicar cómo añadir un par de funcionalidades para mostrar de manera automática entradas relacionadas al pie de una entrada. A mi parecer es algo bastante práctico, porque permite al usuario acceder a entradas similares a las que está viendo y que es posible que no haya tenido la oportunidad de leer por ser un usuario nuevo, a la vez que le damos algo mas de vidilla a esas entradas antiguas que ya muchas veces nadie lee.

Voy a mostrar dos maneras de hacerlo. Una de ellas es mediante un gadget preparado para ello, y mediante el cual podemos mostrar de tres a cinco enlaces relacionados junto con sus imágenes correspondientes bajo cada una de las entradas en la página principal y en la página correspondiente a cada post. Es rápido, fácil y queda bonito, no podemos pedir mas.

La otra manera es modificando el código fuente de nuestro blog. En este caso podremos mostrar el número de entradas relacionadas que nos venga en gana, y se mostrará como un simple enlace, sin imágenes ni nada de nada, y lo hará únicamente en la página individual de cada entrada.
Requiere algo mas de paciencia para incluirlo, pero siguiendo bien las instrucciones no debería haber ningún problema, a lo mucho que te cargues la plantilla completa de tu blog... ejem.

Mostrar entradas relacionadas con imagen con LinkWithIn:

Se trata de gadget muy fácil de incluir en nuestro blog. El gadget en cuestión es proporcionado por LinkWithin.

Accede a la página principal de LinkWithIn: http://www.linkwithin.com/learn y en el cuadro de la derecha introduce un email (creo que da igual si te lo inventas, me parece que no sirve para nada), la plataforma en la que tienes alojada tu blog, su url y el número de entradas relacionadas que quieres que se muestre (a elegir entre 3, 4 o 5).



Si tu blog tiene el fondo de color oscuro y las letras en claro, marca la opción "My blog has light text on a dark background" para que no destaque demasiado sobre el fondo. ¿Que quieres que destaque? Pues tu mismo.

Ahora pulsa "Get gadget". Se te cargará una nueva ventana en la que te explica las instrucciones para incluir el gadget en tu blog. Si no has accedido todavía a tu gestor de blogs, accede ahora.

En el primer punto te dice que pulses sobre el enlace Install Widget para instalar el gadget; hazlo y se te cargará una nueva página de instalación. En esa pantalla haz lo siguiete:

• Selecciona en el desplegable el blog en el que quieres instalar la aplicación. Si solo tienes uno no tendrás que hacer nada.
• Escoge el título del gadget que te aparecerá en el diseño del Blog. Por defecto te coloca LinkWithin, déjalo si quieres así, porque la descripción que te va a incluir invariablemente en el blog va a ser "Quizás también le interese:" con independencia de lo que aquí escribas.
• Pulsa el botón Añadir artilugio y se te cargará automáticamente la página del diseño del blog. El gadget te aparecerá en un lugar aleatorio del Blog, colocalo si quieres en otro lado, pero es indiferente, porque te colocará el gadget bajo cada entrada de manera automática al visualizar el blog.

Si todo ha ido bien bajo tus entradas aparecerá algo parecido a esto:



Desventajas:

• El gadget no permite personalizar el título
• Bajo los enlaces a las entradas te aparece un enlace con publicidad del producto. No resulta demasiado grande ni molesto, pero ahi está.
• Como todo gadget, es posible que ralentize un poco la carga del blog

Mostrar enlaces de entradas relacionadas solo en páginas individuales:

Este es el método que yo tengo incluido para mostrar enlaces relacionados. Busca similitudes en función de las etiquetas y el título de la entrada.
No lo he programado yo, solo he modificado alguna cosilla, así que si quieres incluirlo solo sigue los pasos que te indico y no tendrás ningún problema.

• Accede a la sección de "Edición de HTML" de tu blog de Blogger.
• Si todavía no te has guardado una copia de tu plantilla de diseño, este es el momento. Solo tienes que pulsar "Descargar plantilla completa" y se descargará en el lugar que elijas. Así podrás modificar mas libremente el código sin miedo. ¿que la cagas? no pasa nada, cargamos la plantilla antigua y no ha pasado nada.
• Selecciona la opción "Expandir plantillas de artilugios".
• Busca en el código el texto ]]></b:skin> y justo detrás pega el siguiente código, de esta manera ejecutaremos este código antes que cualquier otro
  
  

  <!-- Muestra las entradas relacionadas -->
  <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 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 < 20) {
      if (relatedUrls[r] != dirURL) {
        document.write(\'<li><a href="\' + relatedUrls[r] + \'" title="Post relacionado: \' + relatedTitles[r] + \'">\' + relatedTitles[r] + \'</a></li>\');
      }
      if (r < relatedTitles.length - 1) {
        r++;
      } else {
        r = 0;
      }
    i++;
    cuantosPosts++;
    if (cuantosPosts == 5) {
      break;
    }
  }
  document.write(\'</ul>\');
  }
  
  //]]>
  </script>

  
  En el código que hemos incluido, donde dice cuantosPosts == 5 el número 5 está indicando el número de entradas relacionadas que se van a mostrar. Podemos cambiarlo a nuestro antojo, pero es recomendable no poner un valor excesivo para evitar el retardo en la carga de la página
  
  
• Busca ahora el código el siguiente texto e incluye lo marcado en negrita
  
  

  <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>

  
  
• Buscamos de nuevo en el código el texto <div class=\'post-footer-line post-footer-line-3\'> o <div class=\'post-footer-line post-footer-line-3\'> y a continuación escribimos el siguiente fragmento de código:
  
  

  <!-- Muestra las entradas relacionadas -->
  <b:if cond=\'data:blog.pageType == "item"\'>
    <div class=\'post-footer-line post-footer-line-4\'>
    <h3 style=\'margin-bottom:6px\'>Entradas relacionadas: </h3>
    <script type=\'text/javascript\'>
      removeRelatedDuplicates();
      printRelatedLabels();
    </script>
  </div>
  </b:if>

Esta modificación del código no se visualiza en la vista previa ya que aparece en las páginas individuales de cada post, por lo que para ver si ha ido todo bien tendremos que pulsar guardar y Ver blog.

Desventajas

• Al igual que el otro método, es posible que ralentize un poco la carga del blog, sobre todo si indicamos un número de enlaces demasiado alto