Post relacionados


Viendo algunos borradores, me encontré con este, una entrada que comencé hace tiempo, pero que se quedó en borrador y hoy es publicada.
Me preguntaban como colocar el widget para mostrar las entradas (post) relacionadas. Vamos a ver cómo hacerlo:

♠ Entramos a Diseño/Edición de HTML y Expandir plantillas de artilugios.
♠ En la plantilla, con la ayuda de Ctrl+F, buscamos : ]]></b:skin> y debajo de éste colocamos el siguiente script:

Ver script completo [+/-]...

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


Donde dice relatedTitles.length && i < 20) nos indica las entradas que se mostrarán según los caracteres que formen el título de las mismas.En este caso podemos cambiar el valor 20 por el que deseemos.
Para cambiar l número de post a mostrar, cambiamos el valor de :if (cuantosPosts == 3) {

♠ Ahora, buscamos en la plantilla, siempre con ayuda de Ctrl+F, el siguiente código y agregamos lo que está en color naranja:

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


Podemos cambiar el número de entradas que se mostrarán cambiando el valor de max-results=10 , pero les recomiendo que sea un número bajo para que la página no demore al momento de cargar.

♠ Ahora (paciencia,ya vamos a terminar!),buscamos <p class='post-footer-line post-footer-line-3'/> y debajo de éste colocamos el siguiente código:

<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>


♠ Como no podemos ver si funciona adecuadamente el script en vista previa, debemos de tener una copia de la plantilla. Finalmente damos click en Guardar Plantilla.

Dudas, son bienvenidas.

► Referencia: Vagabundia.

12 opinaron:

Juan Carlos

Creo que lo agregaré al blog de Leyani.

Un abrazo

Responder
Sandra S

Hola Jéssica! Hermoso tu blog, con mucha información útil. Ya lo había recorrido antes, pero no te había dejado un comentario por falta de tiempo. Te felicito por tu dedicación!!

Gracias por pasar por mi pequeño espacio, siempre sos bienvenida!!

Un abrazote en HTML!!

Responder
Jéssica YK

Juan Carlos:sí,creo que sería muy útil para tu blog.

Saludos

Responder
Jéssica YK

Sandra S: gracias por la visita y ya sabes, si tienes alguna dudad con algún código, me avisas.

Saludos

Responder
squirrel

Es lo que buscaba, pero ahora, me da un poco de miedo meterme con el código :((

Pero con tus explicaciones siempre sale bien, sólo que le tengo algo de miedo al código jeje.

Besos

Responder
pantalla_adicta

Hola! hice todo casi tal cual lo explicas... casi, porque en el último paso no encontré lo que había que buscar, y sencillamente pegué el código donde me parecía que debía ir. Y tuve suerte! :D
Gracias por ayudarme, Blogger no me ayudó. De paso, haré publicidad de tu ayuda, ok?

Responder
Jéssica YK

» squirrel: no hay por qué tenerle miedo, parece difícil, pero es sencillo :)

» pantalla_adicta: me alegra que mi ayuda te haya servido; y gracias por la publicidad, también tu blog queda agregado a mi blogroll.

S@lu2

Responder
Javier Ledesma
Este comentario ha sido eliminado por el autor.
Responder
Anónimo

gracias por el tips lo hize en mi blog, pero no me funciono no me sale nada, me puedes ayudar

Responder
Jéssica YK

Anónimo: para ayudarte necesito ver tu blog para ver cuál es el problema, sino, no podré ayudarte :(

S@lu2

Responder
Francisco

Hola Jesi, tengo problemas!!! Hice todo como lo tenés explicado, y cometí el gran error de no guardar una plantilla.

El tema es que tengo los códigos como acá pero no me figuran las entradas relacionadas!???

Me das una mano ?

Grs

Responder
Jéssica YK

» Francisco:
Lo que he podido ver en tu plantilla es que falta el último código de la entrada, el que empieza con:

<div class='post-footer-line post-footer-line-4'>

Si no está ese puede ser el problema.

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio