Entradas relacionadas en nuestro blog

Cuando visitamos algunos blogs, vemos que al final de cada entrada aparece un enlace con las entradas relacionadas a la que estamos visualizando en ese momento.

¿Cómo se hace ... manualmente ... automático...? En esta entrada veremos el código necesario que debemos insertar en nuestra plantilla para que se genere automáticamente.

En primer lugar accedemos a la cuenta de nuestro blog de Blogger y pulsamos sobre la ficha DISEÑO –> EDICIÓN DE HTML.

Buscamos el texto ]]></b:skin> y, a continuación de éste, pegamos 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 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 == 3) {
break;
}
}
document.write('</ul>');
}
//]]>
</script>

Una vez pegado el código anterior, pulsamos el botón GUARDAR PLANTILLA, activamos la casilla EXPANDIR PLANTILLAS DE ARTILUGIOS y buscamos el siguiente código:

<b:if cond='data:post.labels'>

Antes de seguir, cabe destacar una cosa, que cuando queremos buscar algún código en la plantilla para no estar visualizando toda hasta que lo encontremos podemos hacer clic dentro del código de la plantilla y pulsar la combinación de teclas CONTROL + F para que nos aparezca el cuadro de diálogo de BUSCAR y de esta forma sea más fácil encontrar dicho código en la plantilla.

Una vez encontrado el código anterior en la plantilla, pegamos el siguiente código justo antes de </b:loop>

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

Pegado el código anterior, buscamos en la plantilla el código:

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

o bien este otro

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

y justo después pegamos este otro código:

<b:if cond='data:blog.pageType == "item"'>
<p>Entradas relacionadas:
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</p>
</b:if>

Con esto habremos acabado, pulsamos el botón GUARDAR PLANTILLA y comprobamos el resultado.

José M. García
@josem2112
El Blog de la Informática 10