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.

mostrar entradas relacionadas en blog - imagen principal del post

¿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

13 comentarios:

misaani dijo...

hola José M,
seguí todos los pasos de ésta entrada para crear:
ENTRADAS RELACIONADAS: y ya me sale al final de las entadas en título, ahora me falta que me digas como le añado los enlaces que quiero relacionar.
un saludo y gracias.

José M dijo...

Hola misaani,

los enlaces los coge a partir de las etiquetas que tenga cada entrada. De todas formas no tengo yo muy claro que esto funcione bien, porque mira la relación que tiene esta entrada con las entradas relacionadas que indica :S
Saludos :)

misaani dijo...

Hola, por eso te preguntaba, si había una forma de poner los enlaces que una quiera, primero por lo que dices y segundo porque a mí no me sale debajo de ENTRADAS RELACIONADAS nada, ningún enlace.
Pero no pasa nada, porque guardé una plantilla antes de hacer los cambios.
Gracias de todas formas.

José M dijo...

Por ponerlo lo puedes poner manualmente, así estarías segura que tiene sentido con las entradas relacionadas.

De todas formas, comprueba que las entradas relacionadas aparecen cuando accedes a una entrada en concreto, no en la pantalla principal.

Roberto dijo...

Hola José, solo quería hacer esto de las entradas relacionadas pero creo que configuraste el blog para que no pudieran copiar lo que escribes, entonces no puedo copiar los códigos para colocarlos en la plantilla del blog.

José M dijo...

Hola Roberto,

acabo de poner un enlace para descargar el código explicado en esta entrada.

Saludos :)

Roberto dijo...

Gracias, buen día

Roberto dijo...

José disculpa por molestarte tanto y gracias por la ayuda que brindas.

El enlace para descargar el codigo parece que no funciona.

Gracias por la ayuda.

José M dijo...

pues lo he copiado directamente de la entrada ... te has dado cuenta que está dividido en tres partes que van por separado? :S

Roberto dijo...

El problema es el enlace para descargar el codigo ya que al darle clic me sale esto:

Oops! This link appears to be broken.

:)buen día.

José M dijo...

ya está arreglado el enlace :)

Roberto dijo...

Gracias José,

Disculpa las molestias. :)

José M dijo...

De nada, saludos :)

Publicar un comentario en la entrada

Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.