Posts relacionados en Blogger, interesante y funciona

Gracias a Blogmundi


Una pregunta frecuente es como conseguir mostrar una lista con artículos relacionados al post que estamos leyendo, de la misma manera que hacen varios plugins para Wordpress, en Blogger.

Buscando un poco he encontrado una solución, la cual voy a explicar y que funciona bien. Este sistema se basa en las etiquetas del blog para mostrar artículos cuyas etiquetas coinciden, por lo que es necesario que las utilices en tus posts, sino, no se mostrará nada. Por otro lado aunque sólo hay que copiar y pegar conviene ser cuidadoso para que todo salga perfecto.

En primer lugar, como siempre, realiza una copia de seguridad de tu plantilla.

¿Ya?, muy bien. Pues empezamos añadiendo el código que hace el 80% de la magia. Para ello tienes que ir en el panel de control de tu blog a Plantilla -> Edición HTML.

Entre las etiquetas head, o más sencillo, justo antes de la etiqueta </head>, copias y pegas lo siguiente:

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

Puedes guardar la plantilla para no perder ese cambio y ahora marcas “Expandir plantillas de artilugios”. Busca el siguiente trozo de código:

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

y sustitúyelo por el siguiente:

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

Bueno, ya queda menos. Guarda la plantilla y vete a Plantilla -> Elementos de página

Tienes que añadir un nuevo widget que será el bloque que muestre los artículos. Para ello pinchas en “Añadir un elemento de página” y seleccionas HTML/Javascript.

Como título puedes poner relacionados y en el contenido añades lo siguiente:

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

El nuevo artilugio lo puedes colocar donde quieras, yo a modo de ejemplo lo he situado en la barra lateral. Cuando accedes a una entrada invidual se muestran los artículos relacionados y cuando estás en la página inicial el bloque desaparece.

Queda un pequeño punto todavía. Debes ir de nuevo a Plantilla -> Edición HTML y buscar el siguiente bloque, que es el nuevo artilugio o widget que has añadido:

<b:widget id='HTML13' locked='false' title='Relacionados' type='HTML'><b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'> <-Añade esta línea
<!– 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> <-y ésta
</b:includable></b:widget>

Simplemente debes añadir las líneas que están señaladas.

Ya está, hay ciertos valores que puedes modificar para mostrar más o menos posts relacionados. En el primer bloque de código el i<20 y en el tercer bloque de código el max-results=10.

Pueden verlo en funcinamiento en estos 2 blogs: angelcaido666 y hugo miranda

OTRO METODO ACA QUE FUNCIONA Y LO PUEDEN VER EN INGENIERIA LEGAL