Entradas relacionadas en blogger

Una de las cosas que nos puede ayudar a tener más visitas por página, y ayudar a los visitantes a encontrar páginas parecidas es colocar al final de cada entrada del blog una sección “entradas relacionadas” que muestre enlaces a otras entradas de nuestro blog con contenidos similares automáticamente.

Después de consultar con otras páginas como el escaparate de rosa o oloblogger, que explican algunas alternativas, intentaré explicar lo más detallado posible como insertar el script creado desde vagabundia, como insertar un enlace “entradas relacionadas” en nuestro blog de blogger. El resultado será parecido al que pueden apreciar en mi blog al final de cada post o entrada.

Para hacerlo seguiremos los siguientes pasos:
1. Iremos a la pestaña “Diseño” de nuestro blogger, y seleccionaremos la subpestaña “Edición de HTML”. Una vez hecho esto buscaremos el texto ]]></b:skin>. Para encontrarlo más rápido es recomendable usar la opción buscar de nuestro navegador.

2. A continuación del código buscado pegamos el siguiente código. No será importante si ya hemos copiado otros scripts como el de mostrar últimos comentarios previamente.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<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>

3. A continuación guardamos la plantilla, y posteriormente marcamos la opción “expandir plantilla de artilugios”, y ahora buscamos el siguiente código:

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


4. Una vez hecho esto, justo ANTES de la etiqueta </b:loop> que hay un poco más abajo, insertamos el siguiente código:

1
2
3
4
5
<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>

5. Una vez hecho esto, que ya casi estamos, volvemos a buscar en la plantilla el siguiente código:

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

o este otro (según el tipo de plantilla aparecerá uno u otro.):

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


6. Justo a continuación añadimos para acabar las siguientes líneas, que serán las que escribirán los enlaces relacionados por pantalla.

1
2
3
4
5
6
7
8
<b:if cond='data:blog.pageType == "item"'>
<p>Entradas relacionadas:
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</p>
</b:if>

Una vez hecho esto, el resultado será muy similar al mostrado en mi blog. También me gustaría comentar que el script busca post de la misma categoría que el que hay simplemente, en conclusión es muy importante para que esta opción resulte útil usar correctamente las categorías.

93 pensamientos en “Entradas relacionadas en blogger

  1. laura

    Hola a todos!
    Antes de nada, agradecerte infinitamente la ayuda que nos prestas a los nuevos. En la mayoria de sitios que veo, la informacion que hay esta demasiado tecnica y no hay quien la entienda, asi q es como si no la dan.
    Si entendiera de que estan hablando no necesitaria ese tipo de ayuda no??
    Bueno, queria comentar que tengo un problemilla con el punto 3 de tu super tutorial: pongo en el buscador el texto que dices () pero me sale un mensajito de que el texto no existe….
    que estoy haciendo mal?

    1000 gracias….

  2. Criptozoólogo

    Funcionó perfecto. Había probado con un truco que vi en Vagabundia pero me mostraba las entradas relacionadas después de los comentarios y así no se veían; pero esta no tiene ningún defecto. De todos modos estoy preparando una nueva plantilla porque esa que tengo era temporal y ya pasó su época.

  3. jdg

    No funciona en el 4 paso te da un error. Te da el siguiente error: bX-2qsmc9 Espero respuesta (si puede ser rapida)…

    Salu2

  4. rodolfo

    gracias!!! en verdad gracias!!
    necesitaba este hack desde hace demasiado tiempo!!
    si pudiera te besaria pero estas del otro lado del monitor y eso va en contra de mis principios XD, por cierto jdg, ese error me salia a mi, pero no es por el codigo, es un error de blogger, lo que yo hice fue cambiar de navegador y ya funciono
    saludos!

  5. El blog del marketing

    muchísimas gracias por el post oscar…. es absolutamente un ejemplo de claridad y de cosas bien hechas

    he seguido paso por paso tus instrucciones, y estoy esperando ver su resultado… mil gracias, de verdad

    salu2
    pedro

  6. Oscar GP

    Muchas gracias a todos.

    Raúl en tu caso es que tal vez no has publicado suficientes entradas con la misma categoría, lo que hace es poner otras entradas con las mismas etiquetas. Un saludo

  7. Pingback: Agregar entradas relacionadas a Blogger | Tecnología e Informática | Noticias | Blog

  8. Eleté

    Oscar, muchisimas gracias.
    Yo estuve utilizando un widget parecido que vi en un blog en inglés pero andaba medio defectuoso: aveces mostraba 3 relacionados, aveces 6, y peor de todo repetia el post mismo entre las entradas relacionadas. Por suerte dejó de andar y tuve que buscar algo para sustituirlo y me encontré con este código tuyo.

  9. Giann

    Decía que mi plantilla no tiene aquello de “post-footer-line-3” (ni como “p” ni como “div”). ¿Qué puedo hacer?

  10. eduardo

    HOLA OSCAR, QUE TAL MUCHO GUSTO EN VERDAD SOY NUEVO EN EL FORO Y ME AGRADARIA MUCHO QUE ME RESPONDIERAS, ACABO DE HACER TODOS LOS PASOS DEL ARTICULO Y VIENDO TODO ESO SOLO ME SALE LA FRASE ENTRADAS RELACIONADAS, PERO NO HAY NINGUNA ENTRADA QUE APARECE, POR FAVOR RESPONDEME O EXPLICAME DETALLADAMENTE OS PASOS,GRACIAS

  11. Lupicius

    respecto a lo que dice ……
    WOLFTATU Says:
    Abril 11th, 2009 at 4:21 am

    SI LO HACEN EXACTAMENTE IGUAL SI SIRVE!!!
    GRACIAS

    Joder… creo que lo hice exacto y no tira………… jejeje 😛 ^^ de todas maneras he usado miles de cosa del blog y todas van de lujo… esta siempre me costo mas… por el temor a que no me funcionara y efectivamente no ha funcionado…

  12. Asun

    Hola. Estoy muy preocupada porque he perdido parte de mi blog. Intenté poner entradas relacionadas; previamente guardé la plantilla, pero no sé por qué perdí todo el blog. Posteriormente volví a elegir la misma plantilla que tenía y así recuperé parte del blog, pues falta lo que tenía en la barra lateral y además ha desaparecido “diseño”. ¿Podrías ayudarme?

    Gracias anticipadas.

  13. Asun

    ¡Uff! He conseguido solucionarlo. Ya no hace falta que te molestes.
    Creo que lo de las entradas relacionadas lo voy a tener que dejar, pues ya no me atrevo a tocar nada después del susto.

    De todas formas gracias por toda la ayuda que brindas.
    Saludos.

  14. diego

    hola copie el codigo correctamente pero solo me sale al fina el titulo entrada relacionadas pero no me salen las entradas….

  15. Arquimedes

    Ahora si funciona cambie la plantilla, pero tengo una pregunta si quiero que aparezca cualquier post no solo los relacionados, es decir que salgan aleatorio o cualquiera de los post, ya que no los relaciona por completo, porque tengo por ejemplo una etiqueta con deporte y no los relaciona, por favor chequea e mi pagina http://www.actualidad-24.com/ y dime como hago Gracias.

  16. eva

    hola.
    tengo tu web en favoritos para ir ojeando, ya que soy nueva en esto de los blogs.
    ya tengo en mi blog más de una cosita gracias a ti.
    te quería comentar sobre esto de las entradas relacionadas.
    me ha funcionado perfectamente, pero he visto en algunas webs que a parte del título de la entrada tambien sale una foto, en este caso no.
    se puede hacer de alguna manera??
    gracias.

  17. carlos

    Hola, disculpa intenté hacer esto pero no encuentro lo que viene en el paso 5, no me aparece ninguna de las dos =S muchas gracias

  18. masterhackermafya

    hola no entiendo por que no me funciona encontre en el paso 5 el segundo codigo parecido lo pege en seguida y nada disculpa hay alguna de colocar entradas relacionadas con imagen de antemano gracias muy buen blog sirve de mucho

  19. fr3d99

    A mi no me sale ninguno de los codigos del 5to Paso como hago! Mi plantilla se LLama “Garland WordPress Theme for Blogger Template”. me podran ayudar

  20. Flavio

    Felicitaciones por el blog, es realmente muy bueno. Me ha servido de mucho este post.
    Saludos desde Buenos Aires, Argentina
    Flavio.

  21. Felix Casanova

    Hola Oscar¡

    Buff, estoy de los nervios. En un blog que tengo de pruebas he implementado estas entradas relacionadas siguiendo tus instrucciones, y como no podia ser de otra manera, funciona perfectamente. El problema es que las letras salen muy pequeñas 🙁 ¿hay alguna solucion para modificarlas?

    Gracias y recibe un fuerte abrazo

  22. Jose Miguel

    Hola Rosa, como hago para que me funcionen este script junto con el de hacer que todos los links externos se abran en una ventana nueva???

    ya que para que cada uno de esos funcionen deben estar justo debajo de
    ] ] >

Los comentarios están cerrados.