Añadir Entradas Relacionadas con miniaturas a tus entradas en Blogger


Banner de la entrada Añadir Entradas Relacionadas con miniaturas a tus entradas en Blogger
Puede ser interesante la incorporación de un apartado de entradas relacionadas al finalizar una entrada del blog con el fin de mostrar a los visitantes posibles contenidos que también le puedan interesar dentro del sitio. Curiosamente Blogger no ofrece aun esta funcionalidad de forma nativa en la configuración de sus entradas si bien a lo largo de los años han ido apareciendo diferentes widgets o códigos para insertar en la propia plantilla que tengamos activada.

La opción de insertar un código dentro de la plantilla normalmente ofrece una mayor posibilidad de personalización respecto al número de entradas relacionadas a mostrar o la forma en que lo hagamos y los pasos para llevarlo a cabo son relativamente sencillos.

Insertando Entradas Relacionadas en nuestra plantilla del blog

CSS y Javascript de Entradas Relacionadas


En primer lugar deberemos ir a nuestro escritorio de Blogger y desde ahí acceder al blog en el que estemos interesados añadir el código accediendo a la sección de Plantilla para posteriormente elegir Editar HTML donde una vez mostrado el código de nuestra plantilla buscaremos el final de la etiqueta head, </head> e insertaremos el siguiente código.
<!--Entradas Relacionadas-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}

#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}

#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>

<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXYfFzjR1RFV6uRaecq4aaLj47GO55UwOWvxq-pNPvssYY7E1aDyhS83cDHJbsDP28K1gmt2jOQB-yTrxF2mEWbqp0APfRCxZxxZ0uG2iC74xWSXmyBAT26s-U_1ouEM3BxtKJwjxr7P1X/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Entradas Relacionadas&quot;;
</script>

<!-- <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger3.js' type='text/javascript'/> -->

<script>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();

function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoT3_fpemq1Tmyubs6A4oWnDUP3CVSFUI3dujjMozmZCwO8ShIuQ824EsLbU79KpSLoKcAi_F5nDj3xXX5382VUnU72GuYrVlNNnGaEK2gwNooLLRkQAFFSbqLJuVuQuV4uhixeIK_Mxvy/s1600/noimage.png";}
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}
}
}
}

function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}

function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}

function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#d4eaf2";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!relatedTitles[i]))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:96px;height:96px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
i++;
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}

//]]>
</script>
<!-- remove --></b:if>
<!--Fin de Entradas Relacionadas-->

Personalizando el Javascript de Entradas Relacionadas


El inicio es simplemente el estilo con el que queremos mostrar la sección pudiendo editarse al gusto ya de cada uno, luego si se observa dentro del código aparece comentada la siguiente línea
<!-- <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger3.js' type='text/javascript'/> -->
Esto se debe a que buscando encontré un javascript que ya realizaba la función para mostrar las entradas relacionadas, de hecho existen bastantes en las que solo varían datos de personalización a la hora de mostrarlos, aunque como no se ajustaban a la forma que quería para el blog opte por insertar el script en la plantilla que es lo que se muestra entre las etiquetas
<script>
//<![CDATA[
<!--Javascript de Entradas Relacionadas-->
//]]>
</script>

Como se muestran las miniaturas en pantalla


Dentro del propio javascript una de las líneas más interesantes a editar puede ser
document.write(' href="' + relatedUrls[r] + '"><img style="width:96px;height:96px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
Que muestra el formato en que aparecerá en pantalla cada caja de entrada relacionada pudiendo editarse el tamaño al gusto de cada uno modificando los valores correspondientes a los diferentes atributos. Otra de las líneas que se podrían editar por temas visuales son las correspondientes a la URL de la imagen a mostrar si no hay coincidencias
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoT3_fpemq1Tmyubs6A4oWnDUP3CVSFUI3dujjMozmZCwO8ShIuQ824EsLbU79KpSLoKcAi_F5nDj3xXX5382VUnU72GuYrVlNNnGaEK2gwNooLLRkQAFFSbqLJuVuQuV4uhixeIK_Mxvy/s1600/noimage.png

Número de entradas y titulo del bloque


Esta nos muestra una imagen que se pondrá en el caso de que la entrada no disponga una propia con la que generar una miniatura.Fuera del javascript en el mismo código a nivel de visualización de resultados son importantes también
var maxresults=5;
var relatedpoststitle=&quot;Entradas Relacionadas&quot;;
Donde “maxresults” es la variable con la que asignamos el número de entradas relacionadas que queremos mostrar y “relatedposttitle” será el titulo del apartado de entradas relacionadas dentro de la entrada del blog.

Código para mostrar en pantalla Entradas Relacionadas


Terminada la parte anterior buscaremos dentro del cuerpo, body, de la plantilla la siguiente línea
<div class='post-footer'>
Puede estar duplicada en cuyo caso deberemos buscar la segunda que aparezca en la búsqueda y justo encima de esta insertaremos el siguiente código.
<!--Entradas Relacionadas-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'><br/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxCk7ua-3cVCj8j6QKzL50iruIelAJjd_zAeliCpwZXhVZdvX3vxU1D4sBlihVTl6R5_HkfnZRH_8Pz1HFx_EVe2Hw4loh-nBqcIFACWEadI2D5OSWtdqh64mXYn9rOkCLzRam91ypHIhe/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!--Fin de Entradas Relacionadas-->
Guardamos la plantilla y comprobamos si los cambios se han efectuado correctamente.

56 comentarios:

  1. Excelente compadre, me quedó espectacular. Muchas gracias.

    ResponderEliminar
  2. Muchísimas gracias, este es el primer código de entradas relacionadas que me funciona en mi plantilla

    ResponderEliminar
  3. Como hago para que muestre el titulo entero y no se corte con los "..." ??

    ResponderEliminar
    Respuestas
    1. tienes que cambiar el valor 35 relacionado con el array relatedTitles por uno mayor

      Eliminar
  4. como cambio el tamaño de los cuadros a un poco mas grande y donde se cambia el tipo de letra del texto entradas relacionadas

    ResponderEliminar
    Respuestas
    1. esta en la parte de 'Como se muestran las miniaturas en pantalla' para ambas partes aunque el tipo de fuente se puede modificar desde la parte de css

      Eliminar
  5. Excelente, muchísimas gracias, fíjate que estaba buscando esta opción desde hace tiempo, encontré una opción pero uno se tenia que registrar y eso como que no me pareció muy bien, ademas habían otras un poco complicadas, y como no soy experto en el aspecto de scrips y todo eso de los lenguajes, por eso la propuesta que expones esta perfecta. Gracias mira como quedo mi blog de Psicologos

    ResponderEliminar
  6. Genial, lo he podido hacer. Una pregunta, como hago para que me quede centrado? Es que se me queda a la izquierda. Me caben 6 cuadrados como máximo, porque con 7 ya se me baja, pero se queda alineado a un lado.
    Gracias.

    ResponderEliminar
    Respuestas
    1. puedes intentar añadir un ""align='center'" dentro del "div id='related-posts'" del body o en la parte del css dentro de #related-posts

      Eliminar
  7. Hola de nuevo, conseguí hacerlo sin problemas en un blog de pruebas. Pero en cambio al cambiar la plantilla en un blog que ya tengo desde hace años, haciéndolo exactamente igual no me sale. Sabes por qué puede ser? Agradecería mucho que me echaras una mano. Puse unas líneas superiores e inferiores para delimitar la zona, el caso es que veo las líneas pero en el centro no me aparecen los cuadrados con las miniaturas.
    Muchas gracias de antemano por tu ayuda.

    ResponderEliminar
    Respuestas
    1. la plantilla es muy 'vieja'? tiene importada la librería jquery?

      Eliminar
    2. Muchas gracias por responderme. El blog tiene bastante tiempo pero he cambiado la plantilla poniendo la primera opción de Picture Window. Cómo puedo saber si tengo la librería jquery? En caso de no tenerla, como la puedo obtener?
      Gracias de nuevo.

      Eliminar
    3. Buscando por Internet, he descubierto como saber si tengo o no la librería. Si no me equivoco tengo que buscar en el html esto: jquery/, pero no me aparece nada. Así que antes de < / head>, he pegado esto:< script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/ >
      Es la última versión. Así que después he hecho todos los pasos para poner las miniaturas de las entradas relacionadas, pero nada... veo las líneas que he puesto para separar pero dentro ni el título de Artículos relacionados, ni las miniaturas. Espero tu respuesta para poder avanzar.
      Muchas gracias.

      Eliminar
    4. he puesto la primera opción que me salia en Picture Window en http://sandbox-shirlero.blogspot.com/ y haciendo los 2 copiar y pegar directamente funcionaba, sin añadir nada mas, es el mismo tema el que te salia a ti?

      Eliminar
    5. Pues es que si creo un blog nuevo y pongo esa plantilla me funciona, en cambio sobre mi plantilla de antes, modificada a Picture Window, no puedo hacerlo.
      Lo de la galería jquery es así como te he puesto?
      De qué manera rápida me podrías ayudar a descubrir porqué es?
      Gracias.

      Eliminar
    6. No se qué he tocado, pero he conseguido que funcione :)
      Muchas gracias como siempre por tu interés y ayuda.
      Un saludo.

      Eliminar
  8. Buenas, he copiado el código que has puesto, en el lugar que indicas, pero solo me sale el titulo entradas relacionadas, pero no me sale ni miniaturas ni el texto. Me puedes ayudar. Gracias.

    ResponderEliminar
    Respuestas
    1. si te sale impresa la variable 'Entradas Relacionadas' pero el resto no solo se me ocurre que te hubieras confundido y pegaras la parte de codigo que va dentro del body debajo de footer en lugar de encima la verdad

      Eliminar
  9. Muchas gracias, antes tenia Linkwithin pero nunca se actualizaba, pero, ¿hay alguna forma de que queden iguales?, es que le puse 4 entradas y cada entrada la divide con una linea de puntos pero la primera no tiene una linea a la izquierda (le falta una linea), y las demas si tienen a ambos lados

    ResponderEliminar
    Respuestas
    1. en la parte de CSS prueba a añadir 'border-left: 1px dotted #DDDDDD' en la parte de '#related-posts'

      Eliminar
  10. ¡Funciona!, me encanta porque no me gusta usar servicios externos, algunos ralentizan la carga de la página, linkwithin tiene el fallo de seguir mostrando entradas eliminadas y otros no dan instrucciones suficientes para instalarlos a quienes no somos expertos, en las horas que he perdido intentándolo podría hacer un tutorial de xhtml y hacer yo misma lo que ellos ofrecen. Una pregunta, en algunas entradas me muestra como sugerencia la misma entrada en la que está insertada, ¿cómo se podría quitar?.

    ResponderEliminar
    Respuestas
    1. Mejor dicho, cómo se haría para que no sugiera la misma entrada en la que está insertada.

      Eliminar
    2. revisa los copy/paste a ver, aunque fuera la única entrada con una única categoria/tag nunca se mostrara en el related

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
    4. Los copy paste estaban bien (ahora mismo el código lo tengo borrado para que no me saliera eso), me pasa con las demás variantes de este hack que he ido probando por la web, pero el tuyo me gusta mucho de cómo se queda en aspecto, los tamaños y los colores, queda muy elegante. Si tienes alguna manera de ver mi plantilla desde tu posición los puedo volver a implementar, a ver qué falla.

      Eliminar
    5. cual es la url de tu blog? intentare raptar un pc para mirarlo, ultimamente no tengo tiempo para conectarme a mirar nada y cuando lo hago es desde mbl

      Eliminar
  11. Te agradezco muchísimo el ofrecimiento, al final voy a tratar de implementar otras soluciones. Si no lo lograra lo más adecuado sería acudir al inventor del hack, que está en Vagabundia.

    ResponderEliminar
    Respuestas
    1. si no te pueden ayudar ahí, el 'inventor' o lo mas cercano a el que encontré en su día pasaba por bloggerplugins si mal no recuerdo, ya es como te veas con el ingles

      Eliminar
  12. Hola!!! me funciono gracias, solo que no se si se puede hacer que las entradaa que muestre sean a lo random por que a mi solo me muestra las entradas recientes de las etiquetas. Gracias de ante mano :D

    ResponderEliminar
    Respuestas
    1. habría que cambiar la función que saca la lista entera, creo que hay ya gente que hizo un código mas especifico para lo que tu buscas, en vez de buscar entradas relacionadas busca entradas al azar

      Eliminar
    2. Gracias, buscare sobre ello :)

      Eliminar
  13. Por fin encontré una manera que funcionara y con una buena explicación. Muchas gracias :)

    ResponderEliminar
  14. Este es el mejor artículo que encontré sobre este gadget. Muchas gracias por compartirlo. Ha sido muy útil

    ResponderEliminar
  15. Gracias, me ha funcionado de maravilla

    ResponderEliminar
  16. Hola, he intentado ponerlo en mi blog y no me sale nada de nada :(
    si me podrías ayudar seria te lo agradecería
    besos

    ResponderEliminar
    Respuestas
    1. Estoy igual, en un bucle! lo he puesto muchas veces...es una plantilla simple...estoy viendo de wordpress es más sencillo para los widget.gracias por la aportación.

      Eliminar
    2. Cuales son las urls de los blogs? Perdón por tardar tanto en responder pero tengo el tiempo libre y 'la Internet' abandonados =|

      Eliminar
  17. Hola! Resulta que no existe la línea < div class='post-footer '> en mi plantilla, así que no he podido terminar los cambios. ¿sabes como puedo solucionarlo?

    ResponderEliminar
    Respuestas
    1. Hola! dentro de las plantillas que ofrece blogger la mayoria tiene esa linea, a mi me sucedio lo mismo, pero despues de seguir buscando si la encontre, sigue buscando

      Eliminar
  18. Por fín!! Muchísimas gracias!!! Llevaba mucho tiempo buscando esta forma y, además de estar explicado fenomenal, me ha funcionado a la primera!!! Un saludo.

    ResponderEliminar
  19. Por fín!! Muchísimas gracias!!! Llevaba mucho tiempo buscando esta forma y, además de estar explicado fenomenal, me ha funcionado a la primera!!! Un saludo.

    ResponderEliminar
  20. ¿Se podrían colocar en la sidebar (al estilo Entradas populares)?

    Gracias.

    ResponderEliminar
  21. Saludos amigo.. lo quise poner en mi blog.. pero antes probarlo en mi blog de pruebas pero no me funciono.... me podrias regalar una ayudita?

    link del blog de pruebas: http://pruebasjoralgom.blogspot.com/

    Link del blog donde quiero que esten: http://joralgom1.blogspot.com/

    de antemano gracias y disculpa por el spanm... un Abrazo !!! :)

    ResponderEliminar
  22. Buenas noches Ramón,muchas gracias por este tuto que llevaba buscando hace tiempo pero… no me funciona.:-(
    he seguido los pasos pero nada…puede variar según el tipo de plantilla?
    un saludo,
    gracias.
    Sofie

    ResponderEliminar
  23. muchas gracias!! primera que me sirve!!

    ResponderEliminar
  24. Hacia dos dias estaba con esta mierda y nada funcionaba!!! Esta, finalmente funcionó!!! Muchas gracias!!!!!!
    (SI te gustan los viajes, te invito a www.letrasdeviaje.com)

    ResponderEliminar
  25. Muchas gracias, el único código que he encontrado que me ha funcionado, y encima a la primera!

    ResponderEliminar
  26. como se puede hacer para visualizar mas texto del titulo porque solo aparece una pequeña parte del titulo y me gustaría que se mostrara mas.
    ?????

    ResponderEliminar
  27. ¡Hola! El link del script http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger3.js se ha caído y ya no me salen los posts relacionados :/ ¿Hay algún link del script actualizado? Me iba muy bien para el blog...!

    ResponderEliminar
  28. Excelente, después de buscar y buscar, editar y editar la plantilla, termine en este post, fue lo único que me funciono.
    Luego de hacer un par de modificaciones... Este es el resultado:
    http://i.imgur.com/OSVWqBF.png

    Sí, mi blog es de dragones (videojuego) :P

    ¡Muchas gracias!

    ResponderEliminar
  29. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  30. Excelente por un articulo que da en el grano.

    ResponderEliminar
  31. interesante pero una pregunta, ud sabe el codigo para colocar entradas en miniaura como este blog: http://gnula.nu/ , tengo un blog de peliculas y necesito este codigo...muchas gracias.

    ResponderEliminar