JMiur [E]

Esta es una variante para mostrar Posts Relacionados. En este caso, lo único que debemos hacer es agregar el script en la plantilla.

La ubicación depende de cada caso pero, por ejemplo, podemos agregarla como un nuevo bloque dentro del pie de página de los posts. Estos, se identifican con el siguiente código:
<p class='post-footer-line post-footer-line-1'>
.......
</p>
Y, normalmente, en una plantilla standard, hay tres:

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

El primero, contiene los datos el autor, el segundo las etiquetas y el tercero no tiene uso y es el que suele emplearse para agregar marcadores sociales y otro tipo de detalles personales.

Busquemos:

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

o bien

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

en el primer caso, agregamos el script justo debajo de </p> en el segundo caso, en la línea inmediata ya que quiere decir que no hay contenido.

El código es el siguiente:
<b:if cond='data:blog.pageType == "item"'>
<div class='post-footer-line post-footer-line-4'>
<h2>Posts Relacionados</h2>
<div id='post-relacionados'/>
<script type='text/javascript'>
var inicioBlog = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listarEntradas(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(inicioBlog.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('post-relacionados').appendChild(div1);
}
}
}
function buscarEntradas(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&amp;callback=listarEntradas');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
buscarEntradas(inicioBlog, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</b:if>
Al igual que en el primer caso, podemos personalizar este bloque para adaptarlo gráficamente a la plantilla.

44 comentarios:

Neo  

Hola!!!

Quiero probar este truco en mi plantilla pero me da un error:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.

Lo que hago es poner el código debajo de:

p class='post-footer-line post-footer-line-3'/

La segunda forma de hacerlo. Y me sale despues el mensaje de error cuando guardo la plantilla.

¿Dónde está el error?

Gracias.

Responder
JMiur  

Gracias por el aviso Neo, había un error de transcripción y ya está solucionado. Disculpa el problema.

En general, esto es causado porque los scripts poseen el signo < (menor) par comparar cosas y eso es malinterpretado por Blogger.

Hay que reemplazarlos por &lt;. Ya lo he hecho y lo he probado pegándolo en otra plantilla sin que diera errores.

Responder
Don Atealgo  

Una pregunta, cómo deduce que los post están relacionados? Por las palabras del título?

Responder
Neo  

Bueno, ya lo agregue a mi Blog y no da error. Lo que pasa es que no veo nada de post relacionados, me explico:

1º- Si estoy en la página principal de mi blog no se ve nada de Post Relacionados en la entrada. Hay que pinchar en el titulo de la entrada para ver al pie Post Relacionados.

2º- Si lo hago de la segunda forma, si veo el título al pie de la entrada que pone Posts Relacionados, pero no hay nada más.

¿No me debería aparecer ahí, los post relacionados con el contenido en cuestión de la entrada? A mí no me aparece nada de nada.

Si tienes tiempo te metes en mi blog y le hechas un vistazo:

http://neocinetv.blogspot.com/

Gracias.

Responder
Petitabruixa  

A raíz de lo que le ha ocurrido a Gem@,te he descubierto y voy a linkarte porque me parece muy interesante este blog.

Por otra parte, me encanta tu biografía !!!

Muchos besos y Luz !!!

Lili;)

Responder
Fede  

Uf! Solo pasaba para agradecerte los email de ayer, no pongo mi sitio, porque no acostumbro a dejar comentarios...un tema que debo resolver. Mi anonimato es exesivo.
Dos cosas:
1-Me quede mudo con la entrevista realizada en Café de por Medio, gracias por haberlla compartido y por responder mis email ;)
2-No puedo creer que solo entraba a escribir agradecimientos y comentarios sobre la entrevista...Y caí justo aquí. Este post es un 10. He hecho lo mismo varias veces, de manera muy desprolija y no tenía ningún sentido comentarselo a la blogosfera. Creo que voy a cambiar mis codigos y luego mandar a los lectores a donde corresponde.
Si bien tu edad no coincide con la de mi padre, ya que él es bastante mayor, por momentos me has hecho leer sus palabras.
Sigá jugando, del otro lado hay alguien haciendo lo mismo.
Ah! sobre el link que me enviaste ayer para poner el menú desplegable, lamento decirte que mis conocimientos no me han dejado avanzar, sobre todo porque no explican las cosas como aquí. Ya lo resolvere, pero por el momento todos los sitios que veo que tienen el codigo que corresponde, lo ponen en JavaScript y oculto.
Me voy a jugar y quizás a trabajr jugando.

Saludos.

Fede.

Responder
JMiur  

Don Atealgo:
La relación está basada exclusivamente en las etiquetas que coloquemos en los posts. Para decirlo de otro modo, estos hacks muestran una lista de posts con las mismas etiquetas.

Petitabruixa:
Bienvenida y gracias por el comentario :)

Neo:
El hack sólo funciona en las páginas individuales, eso es normal. Hasta donde lego a ver en tu blog, el script está funcionando. Una posibilidad es que no tengas habilitados los feeds del blog CONFIGURACION / FEEDS (no debe estar en none). Cualquier cosa, envíame un mail y vemos de qué se trata. Igualmente, hoy publicaré uno más que es el que ya está funcionando en este blog y que, a mi gusto, es el más flexible.

Fede:
Gracias por el esfuerzo de "comentar" :D

Responder
Bole  

Hola he intentado poner este scrpit, parece que lo tengo todo bien y el feed esta habilitado y aunque acabo de empezar el blog ya tengo al menos 2 post por etiqueta.
¿podrias mirar porque falla? jmiur
http://elmundodebole.blogspot.com/

Por otro lado ciertamente es desesperante comentar en Blooger, aunque tu lo has solucionado bastante con el popup.
Conocí el blog ayer y estoy alucinado de la cantidad de info que dipones para el personal y eso que no he salio todavia de la categoria Blooger.
Buen trabajo, sino te importa te mandaré un email sino consigo solucionarlo.
Un saludo

Responder
JMiur  

Lo estoy viendo. Así a simple vista, todo parece estar bien, el script toma los datos correctamente pero no parece buscarlos o escribirlos.

Habría que ver la plantilla para intentar descubrir el fallo. Si quieres mandarme un mail trataré de buscar el problema.

Responder
Anónimo  

Gracias pero en ninguna de mis plantillas encuentros p class='post-footer-line post-footer-line-3' ni 1 ni 2 , expandi artilugios ,use ctrl f , probe en diferentes blogs y no encuentro el motivo pk yo no tengo esos codigos. te agradeceria me dieras una ayudita.saludos

Responder
JMiur  

Necesitaría ver tu sitio online, sino, es imposible.

Responder
Angel, el aprendiz  

Hola Jmiur

A mi tb me pasa lo mismo: muestra el "post relacionados" pero no muestra ningun post.

¿Puede ser que los feeds estén direccionados a feedburner?

mi blog de pruebas: http://almacigaxxi.blogspot.com/

Responder
JMiur  

Angel, lo que veo online parecería ser correcto así que imagino que debe haber algún pequeño error que no logro detectar así.

Si quieres, puedes enviarme la plantilla por mail y reviso el código real.

No es un problema de Feedburner, eso es seguro.

Responder
Angel, el aprendiz  

Muchas Gracias, JMiur

Con el script corregido si me ha funcionado.
Serían cosas de las comillas o los corchetes, o algo así.

YA funciona todo. Muchas gracias de nuevo

Responder
JMiur  

Me alegro que se haya resuelto, Angel.

Responder
Dante  

Muy bueno el post.

Gracias. Sigo leyendo los que salga aqui.

Responder
Therside  

Hola!
probé el truco en mi blog y no me sale nada en los post relacionados
aparece solamente el titulo
tendrá algo malo el blog, revise los feeds y están bien.
veo q angel, el aprendiz tenia el mismo problema cual fue la solución en su caso?
probé tutoriales en otros blogs pero este ha sido el único q no tiro error
si me puedes ayudar muchas gracias
therside.blogspot.com

Responder
JMiur  

Como no veo que ahora esté en tu blog, necesitaríasque me explciaras el problema o que lo coloques para verlo funcionar online.

Responder
Anónimo  

Soy el que ha intentado ya hacerlo de varias maneras(concretamente la pimera) y he decidido borrar los cambios y ponerlo debajo del post pero me pone Post relacionados y no muestra nada,bueno lo he hecho 2 veces y las dos me pasa lo mismo, tengo el feed en completo.Si alguien le paso y me puede ayudar
elgatoencerradotv.blogspot.com

Responder
JMiur  

Tengo mis dudas repecto a si está correcto el script. Es difícil de ver online porque hay cosas que sólo se ven en la plantilla. En este archivo de texto están las 3 partes, copaidas de mi plantilla. Revisa si coinciden o copia y pega para más seguridad.

Responder
Anónimo  

no puedo ver el documento que me envias. mi plantilla es http://www.lacoctelera.com/elgatoencerrado/posts/view/1221890.a ver sime encuentras el error recuerda que mi blog es elgatoencerradotv.blogspot.com
gracias

Responder
JMiur  

Abre el archivo o descargalo; es un archivo de texto común y corriente.

Responder
Anónimo  

a ver resumo lo que he hecho:puse el script tocho despues de/skin.2Guardé .3-marqué Espandir elementos.4-busque :if cond='data:label.isLast != "true"' y añadi el codigo.5-con exandir elementos marcado añadi el tocho este que viene en esta pagina despues de 'post-footer-line post-footer-line-3'/.¿que he hecho mal?¿me falta algo?(yo quiero que me aparezca un bloque de post relacionados SOLO despues de cada entrada,pero que no se muestre en la pag principal)

Responder
JMiur  

Pués, ahi las estoy viendo: CAPTURA

Responder
Anónimo  

primer fallo encontrado:el primer script que hay en post relacionados 1 no es el mismo que me has mandado en el documento de texto.El que me has mandado funciona y el otro no.(yo ya partia de que los codigos funcionaban...)

Responder
JMiur  

No, son distintos. funcioan en diferentes lugares y tienen datos diferentes.

Responder
Administración  

Si pero lo que queria era que apareciesen encima de los comentarios.Solo tengo que aregar (en el sitio adecuado) el script que hay en este articulo?

Responder
JMiur  

Sí, utilizando lo que está en el archivo de texto; son una copia textual del contenido de mi plantilla.

Responder
Anónimo  

Ya está gracias :)

Responder
Jorge Verón Schenone  

Sr. JMiur, deseaba hacerle un comentario y solicitarle algo de ayuda con relación al script. Lo estuve probando en el blog de pruebas (cuya lectura se encuentra limitada únicamente a los autores del blog) y no funcionaba; ocurría lo que comentaban algunos usuarios, sólo se visualizaba el título: "Posts Relacionados", pero no se mostraban los mismos. Decidí entonces probarlo directamente en el blog principal (lectura abierta a cualquier usuario) y funcionó muy bien (ambas plantillas son idénticas, poseen la misma configuración y actualizaciones). Ahora, el pedido de ayuda :). El script muestra en los artículos relacionados el que hemos leído (cuando se encuentra agrupado bajo otra etiqueta) y en otros casos, muestra la etiqueta y el contenido en blanco. Aún me falta mucho camino por recorrer para comprender el javascript (al menos al nivel de este y otros scripts que realiza). ¿De qué forma podría limitar ésto?. Primero pensé en los elementos condicionales, pero no llegué a buen puerto. Luego vi un comentario de Solrec (el nº 10 del post "http://vagabundia.blogspot.com/2007/10/blogger-posts-relacionados-1.html") y creo que por pasaría la solución. Alguna orientación para comenzar a modificar este script?. Sé que elaboró posteriormente otras modificaciones, en 2 posts posteriores; pero éste script, por la facilidad de ubicación y por la combinación que me permite realizar con el script de Anhvo ("Leer más" con miniaturas) me resulta una excelente solución. Muy agradecido por su tiempo y dedicación al tema Blog. Saludos ! Jorge

Responder
JMiur  

Jorge:

Este script siempre me pareció más complicado de comprender y difícil de implementar. Debe ser justamente porque no lo entiendo muy bien. Por eso es que uso el otro, el que está en la tercera parte de esta serie de posts, cono todos los agregados y modificaciones propuestos.

De este, sólo puedo darte una idea general. Se me ocurre que, usando el mismo criterio de Solrec, podría agregarse algo similar en function listarEntradas(json)

Primero, guardar en una variable la página en uso:

var dirURL = document.URL;

Ahora, creo que lo que habría que interceptar es la creación del elemento LI que es lo que mostrará un post. Algo así:

if (alturl != dirURL) {
var li = document.createElement('li');
.................................

}

Para que se muestre sólo si es otra página distinta a la que estamos.

Responder
Jorge Verón Schenone  

Ahora funciona perfecto, muy amable por su tiempo y dedicación, JMiur !.-
Con más tiempo, voy a probar el script que menciona en el post: "http://vagabundia.blogspot.com/2007/10/blogger-posts-relacionados-3.html".-

Saludos, Jorge

Responder
JMiur  

Oh, me alegro que funcionara :D

Responder
piXel  

JMiur estoy probando este script porque la plantilla que tengo (http://solomochila.blogspot.com) no me deja agregar elementos debajo de las entradas, algo rara pero por ahora funciona.

El script está funcionando muy bien, pero quería modificarle un detalle... después del texto "Post Relacionados" escribe el nombre de la etiqueta en la que busca los post... simplemente mi idea es sacar eso, que no la imprima, busqué un rato hice varios intentos pero no logro saber cual es la línea que se encarga de imprimir eso... me podrás dar una mano?

Responder
JMiur  

piXel:
Yo diría que deberías eliminar estas líneas:

var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);

Responder
piXel  

Esa!!.. así de fácil... muchas gracias...

Recordé que tenía algo abandonada la lista de links del blog... ahora sumamos uno más.. Vagabundia..

muchas gracias..

Responder
JMiur  

Gracias, piXel, nuy amable de tu parte :D

Responder
Jigsaw-Bourne  

pues yo no encuentro ninguno de los codigos del principio, se que hay un gadget que detecta las entradas sin poner codigos HTML pero me va fatal, las entradas no están relacionadas

Responder
ÄbäddöŅ™  

Que tal, el script me funciona muy bie, pero tengo un problema: los títulos de los posts relacionados me los muestra con números y símbolos cuando por ejemplo una etiqueta tiene tílde (México por ejemplo) y me gustaría que lo mostrara 'correctamente'. ¿Cómo lo soluciono?

Responder
JMiur  

Eso no sabría decirte cómo corregirlo. Como puedes ver acá, los acentos se muestran correctamente en los títulos.

Responder
Erdier  

bien ahora seria util un tutorial para personalizar la fuente los tamaño y espacios entre otras coas q queda feo como esta por defecto, almenos el tamaño

Responder
JMiur  

Eso varía con cada plantilla, no tiene una respuesta única. en elc aso de este ejemplo en concreto debes crear las reglas de estilo y probar:

.post-footer-line-4 {}
.post-footer-line-4 h2 {}
.post-footer-line-4 ul {}
.post-footer-line-4 ul li {}
.post-footer-line-4 ul li a {}
.post-footer-line-4 ul li a:hover {}

Responder
Jerson Peña Pérez  

Por favor, como puedo hacer para quitar la funcion de listar las publicaciones por etiquetas?

Responder
JMiur  

No sé a qué te refieres. Si es el gadget Etiquetas, lo eliminas; si son enlaces que se ven en el post, los deshabilitas editando el elemento Blog en la primera pantalla de Diseño o eliminando el código.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR