Viajar por Europa

mayo 30, 2011

Entradas relacionadas para Blogger

Entradas relacionadas para blogger en forma de lista, simple,  que ayuden a que los visitantes de tu blog puedan quedar un poco más enganchados ofreciendole otros artículos a leer puedes configurarlas con distintos scripts.


Uno de los más utilizados para incluir entradas relacionadas  es el LinkWithin e incluso un widget en blogger. Pero en mi caso estaba buscando la manera de incluir una lista de entradas relacionadas que fuera como una continuación del post y sin nada de imágenes, algo simple una relación de los titulos de entradas, que permita al lector decidir si quiere leer algo más, sin tener que perder tiempo buscando por el blog y con un estilo minimalista, simple, nada de imágenes.


Encontré el script que hay a continuación, así es que lo incluyo tal como explico y como tiene que estar sometido a un bucle constante,  incluyo los códigos de la segunda ventana dentro del LOOP que aparece en plantilla de blogger (bucle de variables de los posts) y solo me quedaba decidir el sitio donde tiene que aparecer "Entradas relacionadas" y el sitio es    a continuación de la última linea del post. Sabemos que hay tres lineas en la plantilla referidas al post: line-1, line-2 y line-3 (post-footer-line post-footer-line-3) es ahí donde queria que se viera las entradas relacionadas con el post, así es que pego las lineas de la última ventana a continuación y asunto resuelto.

Tienes que insertar justo antes de: ]]></b:skin>

<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 == 5) {

break;

}

}

document.write('</ul>');

}



//]]>

</script>

Ahora para capturar las entradas relacionadas a través de las etiquetas y  del feed de tu blog y que dichas entradas se vayan actualizando,  busca:<b:loop values='data:post.labels' var='label'>
Baja un par de lineas y antes del cierre de LOOP </b:loop> insertas:


<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name +

"?alt=json-in-script&callback=related_results_labels&max-results=10"'

type='text/javascript'/>

</b:if>


Debajo de esta linea: <div class='post-footer-line post-footer-line-3'> inserta las siguientes. Con ello consigues posicionar "entradas relacionadas" en la plantilla de blogger. Si quieres cambiar el título por otro puedes hacerlo, te lo he señalado en negrita:


<b:if cond='data:blog.pageType == "item"'>

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

<h4>Entradas relacionadas:</h4>

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>

removeRelatedDuplicates();

printRelatedLabels();

</script>

</b:if>

</div>

</b:if>

Guardas y pruebalo. Supongo que antes has guardado una copia de seguridad de tu plantilla. Si no es así no toques nada. Haz una copia de seguridad y despues vuelves. Los protagonistas de ésta modificación de plantilla son Vagabundia y la que fué una de las mejores blogger`s Rosa, cuyo recuerdo siempre perdurará en la blogosfera.

2 comentarios:

  1. NO pude crearlo, mi sito es www.sotypc.com, no aparce la linea bueno la segunda instruccion la de labels, o loop, que podra ser?

    ResponderEliminar
  2. Eduardo he visto tu codigo fuente. No se a que puede ser debido. Te aconsejo, mira una plantilla de blogger y buscas loop. Compara la parte en la que se encuentre con tu html, a ver si puedes ver la diferencia.
    Me cuentas. ¿vale?

    ResponderEliminar

Si haces un comentario procura que no sea anónimo y si estás solicitando algo al menos espero que votes en Google Plus. Saludos.