Entradas relacionadas con miniaturas | Oloblogger Ahora que se está poniendo de moda el gadget de Linkwithin , he recordado que vi en Agosto un script de Blogger Widgets , que basado en la i...

12 de noviembre de 2009

Entradas relacionadas con miniaturas

Ahora que se está poniendo de moda el gadget de Linkwithin, he recordado que vi en Agosto un script de Blogger Widgets, que basado en la idea de las clásicas entradas relacionadas mediante enlaces de texto, desarrollaba un poco más la cosa incluyendo una imagen en miniatura. Como lo del Linkwithin es poco configurable por no decir nada y cualquier día lo hacen de pago o nos meten algo que no nos guste, más vale estar preparados con un sistema alternativo que bien podría ser este y que salvo por su rendimiento, es prácticamente igual que el otro.


La relación de estas entradas con la del post dónde se muestra, no está tan lograda como con Linkwithin. Esto es porque este sistema se guía exclusivamente de las etiquetas para encontrar las similitudes. Pero bueno, cumple bastante bien su función de ofrecer entradas relacionadas y, como se ha dicho, puede servir de alternativa.

Para instalarlo sin depender de scripts en alojamientos externos, he incluido el susodicho de manera que quedará en nuestra plantilla. Comenzamos en Diseño > Edición de HTML y pinchamos en "Expandir plantillas de artilugios". Localizamos el </head> y justo antes copiamos el script y el código para configuración CSS, que por su extensión, ocultamos pero dejamos disponible pinchando aquí.

<!-- Entradas relacionadas con miniatura. Script y Estilo -->
<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: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
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 thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioPyvXf5TL9O3V0ZkrJibdRXDQs4sTuvWtKQW_-tM-1Upktj__AJqxk-1zCicrUCrWAOtPKc1_HWH6TKtMOkxf4UDS3WIL7krKRzVILFPqzyZys0amUxqECkICEGNvutLQnb7UArTYYx0/s400/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() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}}
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 #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;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>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>
<!-- Entradas relacionadas con miniatura. Script y Estilo -->

Una vez hecho esto, seguimos hacia abajo y buscamos el lugar dónde queremos que aparezcan los enlaces. Allí pondremos el siguiente código. Lo normal será que lo pongamos en el pie del post (post-footer) y si tenemos plantillas clásicas, dentro de post-footer post-footer-line-3. Si tenemos ya algo metido ahí, pues lo colocamos a continuación para que esto salga lo último.

<!-- Entradas relacionadas con miniatura -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Posts relacionados&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Entradas relacionadas con miniatura -->

Si guardamos, ya tendremos disponible nuestro nuevo artilugio. No podremos apreciar los cambios con Vista Previa, porque tanto en el script como en la parte HTML, se ha incluido una condición para que sólo sea visible en las entradas individuales (item). Habrá que acceder a una entrada cualquiera para poder verlo en funcionamiento.

En esta última parte de código, var maxresults sirve para indicar el número de entradas relacionadas que queremos mostrar y var relatedpoststitle, para el texto que queremos mostrar delante de ellas. Las características de fuente, fondo y efecto hover, se puede configurar desde la primera parte del primer código facilitado aquí.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

167 comentarios :

  1. Gracias por el post a sido muy facil su instalacion. Verdaderamente agradecido.

    ResponderEliminar
  2. Oloman,

    ¿cómo se controlan las imágenes en los posts estilo .resumen? ( es decir para que aparezcan o no en el index )

    Grácias

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

    ResponderEliminar
  4. Muy buen post y explicación excelente ya lo tengo puesto en mi blog, pero en la penúltima entrada que e metido me salen solo 2 post relacionados y en la ultima que e metido no me sale ningún post relacionado en las demás si que me salen 5 post relacionados ¿Esto es asi o tengo algo mal?

    Saludos

    ResponderEliminar
  5. Excelente Post!!!
    Una vez más muchas gracias por compartir tu talento con los demás!
    Me ha sido muy útil, muy fácil de implementar en mi blog, y sobre todo que cumple con su cometido!
    Muchas gracias una vez más!
    Un abrazo y éxitos!

    ResponderEliminar
  6. Onlinestrenos "Cine Gratis Online" (Movies and Trailers):Peliculas Online Gratis para Ver & Descargar

    Enlazanos

    Afilianos que Te Afilio
    Link x Link ...

    Follow Me

    ResponderEliminar
  7. Hola, muy muy bueno, lo puse de inmediato.

    Te queria pedir ayuda en otra cosa, mi blog se demora mucho, pero demasiado en cargar, me podrias dar una mano?

    El blog al que me refiero es este

    http://www.labibliotecamedica.org/

    use varias de las cosas que enseñas aca.

    ResponderEliminar
  8. Bibliotecario, yo veo muy bien tu blog y muy rapido me carga...
    talvez sea tu linea..

    ;)

    buen post oloman, lo malo de esto creo que es que las imagenes en miniaturas asen q las originales cambien su tamaño por ejemplo si tengo una imagen cuadrada, esta miniatura la ase rectangular y la imagen sale expandida
    me entiendes? bueno pero es genial aparte de eso :)

    ResponderEliminar
  9. Mercier, supongo que te refieres a esta otra entrada. El script ya controla si el post tiene imagen o no. En el segundo caso, para que el sumario tenga más o menos el mismo tamaño que los que sí tienen imagen, se muestran más caracteres (que nosotros mismos indicamos en unas variables).

    ResponderEliminar
  10. n0re, yo veo 5 en todos los posts. Supongo que ya lo arreglaste.

    Seguidoresdelreydereyes, GIL, ©Daniel Angello™, Renzo, Biblioteario: Os recuerdo que esto es sólo una alternativa a Linkwithin que tiene un rendimiento mucho mejor.

    Bibliotecario: Como a Renzo, a mí también me ha parecido que carga en un tiempo aceptable. De todas formas, si quieres ver qué cosas son las que más tardan en cargar, por si quieres valorar eliminarlas, echa un vistazo a esto.

    ResponderEliminar
  11. Muchas gracias por la respuesta. No se demora mucho en cargar, pero en relacion a tu blog, el mio se demora bastante. Gracias de nuevo, revisare lo que me pasaste.

    ResponderEliminar
  12. Bueno, hace poco quité unas cuantas cosas que precisamente eran las que más demoraban y seguramente por eso ahora va mejor. Es cuestión de que te plantees gadget a gadget, si son necesarios o no.

    ResponderEliminar
  13. Hola, saludos, que excelente blog, peculiar la plantilla, amigo tengo una duda, me gustaria colocar un bloque de adsense el la parte superior derecha de mi blog, o cualquier gadget mientras quepa en ese espacio (200x200) pero no se como hacerlo, adjunto una imagen para que te des una idea.

    Imagen: http://www.fileden.com/files/2009/5/3/2428538/adsense%20unah.png

    Mi Blog: http://blogunah.blogspot.com/

    De antemano Gracias.

    ResponderEliminar
  14. @rielCastellanos a ver si de esta forma puedes hacerlo:
    http://oloblogger.blogspot.com/2009/08/blogger-como-eliminarsustituir-la.html

    ResponderEliminar
  15. Hola, gracias por responder, ya revise la entrada y probe lo que ahi decias, esto es lo mas cercano que he logrado siguiendo tus consejos, mira el blog de pruebas:
    http://webprosperity-negocio.blogspot.com/

    Ahora, como hago para alinearlo correctamente, no se si se pueda con esas propiedades de padding, margin, etc, soy un poco duro para estos temas, quisiera que este un poco mas hacia abajo y centrado en relacion con el buscador de mi blog, gracias.

    ResponderEliminar
  16. Lo he visto, pero cada vez que refresco veo algo distinto ;) Se ve que estás modificando cosas. Lo último que he visto es que ya casi has logrado ponerlo donde quieres. Si no lo consigues, indícame cómo lo estás haciendo.

    ResponderEliminar
  17. Hola, si, que observador eres, ya casi lo logro, no me preguntes como xq he estado probando cada cosa que cuando ya este terminado, no voy a tener idea de como lo hice ;) yo te aviso,me sirvio tu entrada la tome como referencia, mil gracias!

    ResponderEliminar
  18. Hola! ya quedo justo como lo deseaba, ahora puedo añadir lo que sea (adsense, imagenes aleatorias, frases, etc). Gracias por tu colaboracion, te dejo el enlace para que veas que tal quedo (fruto de 6 horas de trabajo)

    Enlace: http://blogunah.blogspot.com/

    Saludos

    ResponderEliminar
  19. Perfecto @rielCastellanos. Ha quedado perfecto :)

    ResponderEliminar
  20. Hola Oloman, disculpa que postee solo para preguntar un capricho que tengo, no se si sabes como lograr un slide de imágenes con enlaces, esto lo he visto en el escaparate de rosa: http://elescaparatederosa.blogspot.com/2009/08/rotando-imagenes-con-scriptaculous.html
    Pero no solo quiero eso sino que muestre las imagenes de slide aleatoriamente, vi en tú blog algo parecido con la diferencia que es cada vez que se refresca la página, http://oloblogger.blogspot.com/2008/12/imagenes-aleatorias-con-enlace.html

    Nose si puedes unir ambas funciones o si sabes de la existencia de un gadget que haga esto, esto lo utilizare para mostrar una imagen asociada a una categoria de manera que el visitante al ver la imagen haga click y este lo lleve a la categoria deseada, espero que puedas ayudarme, de todas maneras muchas gracias por compartir tus conocimientos ya que hay algunas cosas que ya estoy utilizando en mi blog, saludos

    ResponderEliminar
  21. Hola Volter100. Hace tiempo que yo también quiero hacer algo parecido y por eso me has tenido todo el día de ayer viendo el tema. Al igual que me pasó antes, no encuentro nada que haga rotar imágenes sin necesidad de refrescar y que además cambie el enlace según se va rotando. De momento consigo o una cosa u otra. De todas formas, te dejo apuntado porque en una de las pruebas que hice, me quedé bastante cerca de lograrlo. Pero algo falló y seguramente es una tontería de esas que no se ven hasta que lo miras con otros ojos.
    Lo dicho, estás en mi lista de tareas pendientes.

    ResponderEliminar
  22. Hola Oloman, jeje me parece este post excelente ya lo aplique en mi blog
    --
    te queria pedir algo de tu tiempo y ayuda :)
    bueno lo que quiero es cambiarle el color del enlace que dice COMENTAR que se encuentra al lado de la fecha, me gustaria que fuera rojo para que combine con el color de la fecha

    Saludos y Gracias! ^^

    ResponderEliminar
  23. Gracias por tu respuesta Oloman, gran blog esta dentro mis favoritos en firefox, no importa si no lo consigues ya que he apredido muchos tips utiles estos dias, gran trabajo, sigue así, saludos.

    ResponderEliminar
  24. La clase que controla ese enlace es
    .coment-antiguos a{text-align:center;}

    Sería suficiente con añadirle un atributo COLOR, pero es que además le falta una M, por lo que debería ser así:

    .comment-antiguos a{text-align:center;color:#990000;}

    Saludos.

    ResponderEliminar
  25. Ok Oloman, ya lo aplique en mi blog Muchas Gracias :)

    ResponderEliminar
  26. Hola oloman!

    Hace tiempo que no te saludaba..., me parece muy bien incluir el script dentro de la plantilla para no depender de alojamientos externos, lo cual no me gusta mucho, lo implementaré en mi blog.

    :)Muchas gracias y que tengas un estupendo día!

    ResponderEliminar
  27. Je,je. Se corresponde al saludo Karla ;D

    ResponderEliminar
  28. Hola Oloman!

    Una pregunta:
    -Estas de acuerdo en que te agregue en la sección de blogs de ayuda de mi blog?

    Te he agregado, pero si no te parece lo quito, no problema...:)

    Hasta luego y que tengas un excelente día, o noche!

    ResponderEliminar
  29. ¿Cómo voy a estar en contra? ;)
    Buenas noches.

    ResponderEliminar
  30. Muchas gracias, me funcionó perfectamente.

    ResponderEliminar
  31. Excelente Oloman!!!!!
    Mas facil no pudo ser...... Tengo una duda
    ¿Cual es mejor este Widget de Blogger
    o Linkwithin?

    ResponderEliminar
  32. xXx4bN3rxXx, cada cual tiene sus ventajas. Linkwithin gestiona mucho mejor las entradas relacionadas, mientras que con este no se depende de nadie.

    Por mojarme un poco, diría que Linkwithin me gusta más... de momento.

    ResponderEliminar
  33. Hola! muchas gracias por el post, es muy interesante y de mucha utilidad!
    nos vemos!
    saludos

    ResponderEliminar
  34. hola olomán, en http://cielosdondeestaeldinero.blogspot.com he puesto las miniaturas pero también el tell a friend y las miniaturas no aparecen. no sé si es por mi navegador que no las veo, o si son incompatibles. ¿puedes echar un vistazo a ver qué ocurre? gracias
    liliana

    ResponderEliminar
  35. Cn, ahora mismo se ven ambas. Lo que ocurre es que en los posts resumidos sólo te sale el tell a friend. Sin embargo, si miras en un post concreto, verás que debajo del icono de ese servicio, te salen las miniaturas de entradas relacionadas. Es como debe ser.

    En el primer post que tienes ahora te sale una única miniatura, pero debe ser porque no tienes más entradas con esa misma etiqueta...

    ResponderEliminar
  36. ah, gracias, olomán, entonces es mi navegador porque yo no veo nada...

    ResponderEliminar
  37. Je, je... Me parece recordar que no es la primera vez que me dices que la culpa la tiene tu navegador.

    ResponderEliminar
  38. pues, sí, olomán. por ej. no veo los anuncios de adsense en ninguna de mis weblogs y tengo más o menos 30... mi navegador es Camino de Mozilla. en serio. No lo acepta Google. Pero para mí es súper cómodo porque tengo a todos mis favoritos delante de mis ojos...

    ResponderEliminar
  39. Estoy aplicandolo y me sale este mensaje que no me deja guardar la plantilla

    Se ha encontrado más de un artilugio con el ID: HTML14. Los ID de artilugio deben ser exclusivos.

    Tengo que eliminar algo que instale anteriormente?
    Gracias

    ResponderEliminar
  40. Ese error no tiene nada que ver con la instalación de este sistema. Eso te indica que hay dos gadgets con la misa ID. Búscalos en tu plantilla y símplemente cambia el número de uno de ellos (HTML14 --> HTML22, por ejemplo) con cuidado de no utilizar un número que ya estés usando en otros gadgets (aparecen como widgets).

    ResponderEliminar
  41. Acabo de probarlo en uno de mis Blogs y me encanta cómo queda. Muchas gracias^^

    ResponderEliminar
  42. Hola Oloman, intenté incorporar las entradas relacionadas en mi blog, pero no sale nada, qué puede estar pasando? había seguido los pasos que da Gem@ para hacerlo y pasó lo mismo, nada. Como vos incorporás el script, pensé que quizás sería eso lo que faltaba, pero estoy en la misma. podrás darme una idea? Gracias.

    ResponderEliminar
  43. del Batitú, el gadget te funciona bien. Lo único por si no lo has tenido en cuenta, es que sólo muestra las entradas relacionadas en las entradas individuales; igual que pasa con el formulario de comentarios.

    ResponderEliminar
  44. jajaja ahora lo entiendo, me estaba desesperando. y pueden mostrarse en el inicio? es decir en las entradas principales? gracias Oloman

    ResponderEliminar
  45. Puede mostrarse en el inicio, pero es mejor no recargar la página principal. Este gadget parece más práctico para verlo cuando se está LEYENDO un post en concreto.

    De todas formas, para ello habría que quitar el primer condicional que hay en el código y el último cierre IF.

    ResponderEliminar
  46. ok Oloman, gracias por el consejo.

    ResponderEliminar
  47. Muchas gracias Oloman me funciono de +10 elevado al infinito siiii Saludos maestro!!

    ResponderEliminar
  48. Me encantó como me quedó!!! Muchas gracias

    Saludos!

    ResponderEliminar
  49. Hola Oloman, tengo varios problemas con linkwithin estoy tratando de hacer lo de entradas relacionadas pero no me aparece nada, sino que todo en blanco... por otro lado con la manera que mostras en esta entrada, el resultado no me sirve ya que yo quiero q los post relacionados salgan antes del "leer mas" (lo utilizo en todas mis entradas). Eso es lo q ando buscando... sabes alguna manera de hacerlo? (o de solucionar mi problema con linkwithin)

    ayuda porfa!

    http://bulvolar.blogspot.com

    ResponderEliminar
  50. Linkwithin tarda bastante en ir mostrando miniaturas Bulvolar, pero es porque su algoritmo las relaciona de una manera más compleja que este script. Además, he hecho unas pruebas en los últimos días y se ve que tienen ya tantos usuarios, que andan un poco saturados... a mi parecer.

    Y sobre este script, creo que lo más fácil y práctico es ponerlo entre condicionales para que no te aparezca en los resúmenes (Leer más). A propósito, tienes una frase sobre Leer más (la que no lleva enlace) que deberías quitar para que no apareciera dos veces.

    ResponderEliminar
  51. Hola buenas noches! En primer lugar agradecerte este trabajo. Mi consulta es que, pego en la plantilla lo que dices pero no me sale. Me dice que no puede grabarla porque no está correctamente cerrada. Lo pongo justo antes del head (no me deja poner los corchetes triangulares para enviarte el mensaje y los tuve que borrar) y en el pie, después de id='footer-2-3'/x/htm¬>, que es lo último que hay.
    Por cierto, el signo ¬ no va en esta dirección. Parece más un 7 pero no encuentro el signo en mi teclado.
    No sé si me he enrollado demasiado.
    Gracias. Sonia

    ResponderEliminar
  52. Madrina, hazlo en dos veces. Primero copia el código que tiene que ir antes del cierre del head (</head>) y tras grabar, añades el otro. Así podrás saber cual de los dos es el que falla.

    Sobre el segundo, esa parte se debe poner entre
    div class=post-footer-line post-footer-line-X
    (siendo X igual a 1, 2 ó 3) y su correspondiente cierre.

    Si no encuentras esta cadena de caracteres exacta, lo importante es localizar post-footer-line-X

    De todas formas, veo que tienes Linkwithin y hoy por hoy, ese widget funciona bastante bien.

    ResponderEliminar
  53. Anónimo4/3/11, 5:39

    Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  54. Tengo una consulta Oloman. Primero agregué el script de la página de LinkWithin y luego probe el que tu dijiste. Y me gustó mas el primero, el de LinkWithin. El único problema es que me aparece luego del "Leer más" en la página principal, y me gustaría poder ponerlo en el post-footer-line-3. Estaré esperando amigo, muchos saludos desde Paraguay, y gracias por la atención!

    PD: Por si querés pasar a mirar, este es el link.

    ResponderEliminar
  55. Mark date una vuelta por mi post sobre Linkwithin. Allí se explica que para que el gadget salga exactamente dónde tú quieras, tienes que incluir un div como este en el sitio en cuestión:
    <div class="linkwithin_div"/>

    Pero como allí también comento, yo no lo usaría para la página principal y lo condicionaría para que saliera sólo en post individuales.

    ResponderEliminar
  56. ¡Muchas gracias Oloman! Tengo otra consulta que te dejaré en alguna publicación que esté mas relacionada con el tema, es sobre el autor de las entradas.

    ResponderEliminar
  57. Saludos. Gracias por el código, aunque no se si el post sigue vigente, tengo unas dudas.

    He usado el script y Me aparece un cartel que dice "no image" supongo que es porque esos posteos no tienen imágenes ¿Hay alguna forma de cambiar ese "no image" por una imagen de mi elección, por ejemplo un logo de mi blog?

    ¿Se puede poner los enlaces también en la página principal y no solo en las entradas individuales?

    ResponderEliminar
  58. Arkano, la imagen para cuando no hay idem es la que lleva la dirección
    http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png
    Búscala en el script y la sustituyes por la que quieras.

    Y para que las entradas relacionadas salgan en todas las páginas, sólo tienes que quitar la primera y última línea del último trozo de código (sin tener en cuenta las líneas de comentarios).

    ResponderEliminar
  59. Gracias Oloman.
    El gadget de Linkwithin no me acababa de gustar.
    Despues de probarlo, este script me parece que lo supera.

    ResponderEliminar
  60. A mi parecer, no en cuanto a relación, Arkano. El de Linkwithin liga mejor los posts más similares. Este sólo se fija en la etiqueta, pero es verdad que los dos hacen más o menos lo que se pretende.

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

    ResponderEliminar
  62. tengo un pequeño problema no puedo hacer que me muestre mas de 5 entradas remplazo el 5, y pongo 8 pero = solo me muestra 5

    ResponderEliminar
  63. Supongo que lo cambias en el sitio correcto, Rodrigo. ¿Te diste cuenta de que hay dos max-results en el codigo? El que hay que cambiar es el segundo.

    De todas formas veo que usas Linkwithin y a mi parecer, ese servicio es mejor que este sistema.

    ResponderEliminar
  64. si reemplazo el 5 por el 6 en el lugar correcto.
    Es mas si pongo 2 me muestra 2 entradas relacionadas pero si quiero poner mas de 5 no pasa nada que es lo que puede pasar amigo?

    http://rodrigo-modoprueba.blogspot.com/2011/08/universidad-de-la-seduccion.html

    lo hice en mi blog de prueba amigo

    ResponderEliminar
  65. Rodrigo es muy extraño lo que comentas, tanto que no tengo ni idea de qué puede ser. El primer 6 es el máximo número de entradas a mostrar por defecto. El segundo es el limite particular que tú puedes poner. Quizás debas preguntar al autor. Aquí: http://goo.gl/4HNc

    ResponderEliminar
  66. oloman ya se tengo 8 entradas relacionadas , pero me saklne 6 arriba y 2 avajo , como puedo hacer para que me salgan, 4 arriba y 4 avajo??

    ResponderEliminar
  67. O sea, Rodrigo, que el problema era que no cabían todas en el espacio disponible y se quedaban ocultas. Bien, pues ahora prueba a reducir el ancho para que sólo quepan cuatro por línea. Eso se hace incluyendo un width en #related-posts. He calculado "a ojo" que con 340px podría ir bien. Añade también un
    #related-posts {
    ...
    width:340px;
    margin:0px auto;
    }

    Por cierto, quita el float:center; que no sirve para nada. Me acabo de dar cuenta :)

    ResponderEliminar
  68. el problema era que no reemplazaba en los dos max-results , pero al poner en 1 valor 9 y en el segundo 8 me aparecieron los 8 peros lo me kedan 6 arriba y 2 avajo y yo kiero ke me keden 4 y 4.
    Tu solo me decias que tenia ke reemplazar en el segundo y por eso no me aparecian las otras entradas.

    La solucionm es la misma ahora qu ya sabes lo que paso??

    http://www.seduccionvip.net/2011/08/pnl-para-directivos-joseph-oconnor.html

    me gustaria que mis entradas queden asi

    ResponderEliminar
  69. Rodrigo, la solución es la misma y consiste en ajustar el ancho de la caja principal que contiene todas las miniaturas, a un tamaño en el que no quepan mas que cuatro. De esa manera los otros cuatro se irán debajo. Si no funciona con la medida que te puse (340px) prueba con un poco más o un poco menos según quede. Y siento la demora...

    ResponderEliminar
  70. Muchas grasias muy buen post y fasil instalacion amigo ya que yo lo nesesitaba para mi blog de peliculas http://descarga-estrenos.blogspot.com/

    ResponderEliminar
  71. amigo y que tengo que modificar para que haya mas espacio entre las entradas??

    ResponderEliminar
  72. Rodrigo, las plantillas del nuevo diseñador como la que tú tienes, son muy puñeteras para modificarlas. De todas maneras puedes probar a poner un margen inferior (más grande si es que ya tiene uno) a la clase date-outer:

    .date-outer {margin-bottom:100px;}

    Cuando veas como queda -si funciona- entonces ya ajustas el valor 100 al que gustes.

    ResponderEliminar
  73. gracias oloman sos un maestro pero en que parte va tu codigo??


    .date-outer {margin-bottom:100px;}

    mas o menos antes ke va eplixcame o va en cualkier lado

    ResponderEliminar
  74. Rodrigo, eso es CSS. Lo puedes poner en cualquier parte entre las etiquetas SKIN. Si usas el Diseñador de Plantillas, lo puedes poner directamente en el apartado AVANZADO --> CSS

    Comprueba primero que no tienes ya un .date-outer en la plantilla, porque en ese caso, lo que tendrás que hacer necesariamente es modificar ese.

    ResponderEliminar
  75. Buenos días;

    perdón, he seguido los pasos pero sigue sin aparecerme - ¿que posibles errores podría tener?

    Muchas Gracias!

    ResponderEliminar
  76. Florian Graefe, es difícil saberlo sin pista alguna. Además, no veo que lo tengas metido actualmente en tu plantilla, por lo que tampoco puedo ver qué falta o sobra.

    Tienes que poner el código y grabar la modificación, teniendo en cuenta que con Vista Previa, no observarás los cambios, ya que esta es de la página Inicio y el gadget es para las de las entradas.

    Puedes grabar el código sin problemas, siempre que lo hagas dónde se indica. Si no funciona, no funciona, pero no te estropeará tu diseño. Simplemente no se verá. Si acaso, marca con comentarios el lugar de inserción para poderlo quitar fácilmente si al final no te gusta, no funciona o simplemente te aburres de él.

    Una vez que lo pongas me avisas para que eche un vistazo.

    ResponderEliminar
  77. Hola viejo felicidades por tu blog, es espectacular. Intento instalar tu código con las entradas relacionadas a mi blog, copio tu codigo lo guardo sin embargo no se aprecian cambio alguno. Me podrías ayudar?, cual es el motivo de esto?

    ResponderEliminar
  78. Hola de nuevo Oloman, por fin logre hacerlo funcionar en mi blog. Hace poco encontré tu web y me parece muy interesante déjame felicitarte, esta información me sirvió de mucho, estaré pendiente de nuevas entradas tuyas.

    Antes de que me olvide una consulta, no sé si puedes ayudarme quiero desabilitar o eliminar de mi blog los bonotes de redes sociales que salen al final de cada entrada en blogger. Gracias.

    Esta es la dirección de mi Web : http://www.estared.net

    ResponderEliminar
  79. Ok Dany Jhon. Sobre lo de los botones, aquí tienes la forma de activarlos. Desmarcando la opción que ahí se indica, se desactivan. Si los pusiste "a mano" ya habrá que hacer otra cosa algo más complicada.

    ResponderEliminar
  80. lo intente miles de veces y no se por que o que es lo que pasa, me podes dar una mano??? Oloman, me sale un solo post relacionado, pero creo que tenia otro codigo insertado anteriormente que habia sacado de otro sitio pero no recuerdo cual es, la cuestion es que fui borrando pedazos de codigo y el blog se ve bien, pero cuando aplico el codigo que tu estas citando me aparece solo una entrada en miniatura y en todos los post siempre es la misma miniatura, no se a que se debe, obviamente hay algo mal en mi plantilla, si la podes revisar te agradeceria infinatamente ya que no puedo dar con la solucion y se me esta hacindo complicado el tema ya que no se casi nada de html ni de java...Me gustaria que la revisies si es que podes, ya intente de todo y no puedo... gracias Oloman...

    ResponderEliminar
  81. Quizás es que probaste en un post con pocas entradas relacionadas. Acabo de ver este y aparecen 5: Post.

    De todas formas, lo que no veo son las miniaturas. Tendrás que buscar la manera de eliminar TODO el código que tenga que ver con tu script actual, porque desde aquí no puedo verlo todo, pero aún así, me da la impresión de que te faltan cosas y otras las tienes duplicadas.

    Como guía tienes el contenido de este post, pero haciéndolo todo al revés y quitando lo que dice que pongas. Luego lo instalas todo desde el principio. Es la vieja y superefectiva solución universal de la informática: reiniciar.

    Si no te funciona siempre puedes usar en su lugar Linkwithin, que es muy fácil de instalar. El enlace está al principio del post. Es la que yo uso actualmente.

    ResponderEliminar
  82. lo he puesto i no mi salin las fotos :( mi puedes dicer xk no mi salin porfa ¿?

    ResponderEliminar
  83. mi blog es este

    http://xfull-anime.blogspot.com/

    mi puedes dicer lo que mi falta i xk no mi sali :(

    ResponderEliminar
  84. The Zorro, no tengo ni idea, pero es que desde aquí tampoco puedo verlo. Lo único que puedo comprobar es que no hay cargada ninguna imagen y que el SRC no tiene dirección alguna. Por eso no te sale nada. Supongo que es porque el código está mal copiado. Prueba a instalarlo de nuevo.

    Si no te funciona, lo intentas otra vez pero esta vez con el que hay en el enlace original (el de Blogger Widgets).

    De todas formas, veo que también usas Linkwithin y ese en mi opinión, va bastante mejor. Si opinas lo mismo sólo es cuestión de borrar los rastros de este.

    ResponderEliminar
  85. Hola, una pregunta, intenté poner el gadget en el sidebar pero no funcionó. me daba error, sin embargo en post footer sí.

    Necesito ponerlo en el sidebar, cómo puedo hacer eso?

    ResponderEliminar
    Respuestas
    1. No lo he probado, pero quizás funcione si sacas de ese código la línea
      <div id='related-posts'> y su correspondiente cierre que está al final y pones ambos sin nada más en la barra lateral. Si no pita entonces nada, porque el resto necesariamente tiene que ir en ese LOOP que a su vez sólo funciona en esa parte de la plantilla.

      Aquí he visto otros sistemas por si te interesan.

      Eliminar
  86. Hola puse el gadget pero el problema es que cuando estoy en cualquier entrada me aparecen como entrada relacionada la misma entrada que estoy viendo (que sale la primera). ¿Existe alguna forma de que solo salgan las demás entradas relacionadas, sin que aparezca la actual?

    ResponderEliminar
    Respuestas
    1. Este gadget busca posts con la misma etiqueta que el que se está viendo. El problema en tu caso es que tiene poco dónde escoger y por eso supongo que también te incluye la entrada actual. Cuando tengas más entradas de cada etiqueta supongo que no te pasará.

      Eliminar
  87. Hola:
    Primero ya antes que nada, agradecerte la inestimable ayuda que nos proporcionas.
    He puesto las "Entradas relacionadas" y me va bien, pero quiero poner una imagen por defecto, para los post que no tienen imagen. Por otro lado, he probado a poner un borde a las fotos pero no me sale.
    ¿Me podrías ayudar con estas cosillas? GRACIAS...

    ResponderEliminar
    Respuestas
    1. En el primer trozo de código, la dirección http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png es la de la imagen por defecto para posts sin imágenes. Si lo que quieres es un propia, tendrás que cambiar esa dirección por la tuya.

      Y sobre el borde, si lo viera instalado te lo diría seguro, pero creo que hay que añadirlo en #related-posts . Si no pita ahí prueba en #related-posts a

      Eliminar
  88. Hola Oloman!, muy buen post y fácil de aplicar, ya lo implementé en mi blog de prueba. ¿como haría para lograr que todo me quede centrado y también para disminuir el tamaño de la letra de cada uno de los títulos de los post relacionados?

    Muchas gracias!!!

    ResponderEliminar
  89. Hola Oloman, muchas gracias... tanteando lo arreglé quedó muy bueno gracias por este aporte.

    ResponderEliminar
  90. Estoy intentando poner el codigo que propones, y no tengo mucha idea de lenguaje html, así que me encuentro con dos problemas:

    Por un lado, no se qué quiere decir exactamente: Localizamos el /head y justo antes copiamos...

    Ni tampoco encuentro en mi código html nada parecido a:
    (post-footer)

    ni parecido a:
    post-footer post-footer-line-3

    mi blog es mavaldecasas.blogspot.com

    ¿puedes ayudarme? Gracias!

    ResponderEliminar
  91. Veamos. Cuando doy alguna referencia de ese tipo (antes del head, busca el post-footer), me refiero a la plantilla (Edición HML) a la que se puede acceder desde el Escritorio. Son como digo, referencias para saber dónde cambiar, quitar o insertar código. A veces, para ver esas referencias necesitas marcar la casilla "Expandir plantillas de artilugios", aunque suelo hacer mención a ello cuando es necesario. Con esa casilla marcada es como verás por ejemplo ese post-footer o post-footer-line-3.

    ResponderEliminar
  92. Gracias por tu post Oloman, linkwithin no me funcionaba, así que lo he intentado con tu código y ya está, funciona perfectamente y es fácil de modificar a propio gusto.

    ¡Saludos y gracias de nuevo!

    ResponderEliminar
  93. Hola, una pregunta, ya lo implemente pero por alguna razón no me aparece T-T) no entiendo porque segui todo lo pusiste T-T)

    ResponderEliminar
  94. ¿me podrias ayudar?, si quieres puedo mandarte mi plantilla de blog
    te lo agradecereee mucho T.T

    ResponderEliminar
    Respuestas
    1. ¿En cúal de tus blogs lo pusiste? Es que lo de la plantilla no puede ser... No he tenido más remedio que empezar a cobrar cuando me pedís resolver problemas tan personalizados o sobre cosas que ni siquiera he explicado en el blog, como forma de reducir el número de consultas y por supuesto, para ganarme un poco la vida con esto.

      En Yuripedia veo que tienes Linkwithin...

      Eliminar
  95. mm.. trate de ponerlo en al yuripedia pero no me funciono T-T) mm.. y no me quedo otra que dejarle el linkwithin mm.. bueno creo que le tendre que dejar ese por que no me funciona el otro u.u
    xDD ha de ser mi loca plantilla xD ya ni modos :(

    ResponderEliminar
    Respuestas
    1. Es lo que tiene toquetear tanto por ahí adentro: se entretiene uno pero a veces genera problemas :) Linkwithin está bien y funciona mejor que este sistema. Sólo lo puse como alternativa de emergencia.

      Eliminar
  96. Otra entrada que uso!
    Muchas gracias! Eres grande!

    ResponderEliminar
  97. Lo que pasa simplemente es que encuentras lo que yo previamente he necesitado también. Salí con ventaja, sólo eso :)

    ResponderEliminar
  98. me quedo perfecto, pero soy tan torpe que te pregunto si es posible ponerle un fondo a todo el bloque incluyendo el texto de post relacionados....

    saludos master

    ResponderEliminar
  99. #related-posts es la id que engloba todo el código. A esa es a la que tienes que añadir el fondo:

    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    background: #cc0000;
    }

    Ya cambias tú el color ;)

    ResponderEliminar
  100. Tengo el linkwithin en estos blogs con la misma plantilla, intento e intento poner este widget que considero mejor y no puedo.

    El código segundo lo intento poner después de post-footer, o de post-footer-line-3, lo guardo y nada.

    www.charlottemasonsp.blogspot.com es uno de estos dos blogs iguales

    No sé qué tiene esta plantilla que he alterado. Si pongo el widget de entradas populares, todas las entradas se me van del centro a debajo de los widgets del lateral... no sé si habré hecho algo mal en el html cuando estuve tuneando la plantilla.

    Gracias por echar un vistazo a mi consulta.

    ResponderEliminar
    Respuestas
    1. Bueno, lo veo, pero desde dentro ;)

      Eliminar
    2. Silvia el segundo codigo va despues de < d i v class='post-footer'> cuando vayas a edicion HTML recuerda expandir los artilugios para que puedas visualizar esa parte!!

      Te dejo el primer codigo el cual eh editado con un efecto mas llamativo a ver que te parece:

      http://www.mediafire.com/view/?q3z1a4xqkr4zi2p

      Cuento con su visita en mi blog Androtecnology.blogspot.com

      Eliminar
  101. Hermano antes que nada gracias por este post, quedo de lujo en mi blog http://androtecnology.blogspot.com/, debo confesar que utilizaba linkwithin pero no me actualizaba las imagenes y decidi eliminarlo.

    Ha este he logrado darte un toque mas llamativo haciendo algunos cambios, como es el color de fuente, color de fondo al pasar el mouse, tamano de imagen, borde a las imagenes, etc.

    Necesito que me ayudes en algo, desea agrandar el area de texto, ya que solo se visualizan dos lineas, he intentado de todo y no lo he logrado, si me puedes ayudar plz.!!

    ResponderEliminar
    Respuestas
    1. Lo he mirado muy rápido, pero creo que en este trozo es dónde se fija la longitud en caracteres del título del post:

      if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";

      Eliminar
    2. Quedo de lujo!! Gracias hermano desde republica dominicana!! +10

      Eliminar
    3. Si estuvieras cerca de San Juan te daría un recado para pasar a un primo mío que anda por allí ;)

      Eliminar
  102. excelente blog y gracias porque funcionó a la prefección

    ResponderEliminar
  103. Hermano gracias por tus tutos son de gran ayuda. Queri hacer esto hace un tiempo y no sabia como saludos.

    Mi blog Emprendedores Panama.

    ResponderEliminar
  104. no se donde ponerlo :( ... o sea... veo que en post footer pero lo pongo y no se ve :( http://elsecretodelabuenalectura.blogspot.com/2013/07/walking-disaster-beautiful-2.html me ayudas?

    ResponderEliminar
    Respuestas
    1. Actualmente no aparece en tu plantilla por lo que es posible que lo estés añadiendo donde no es. Hay dos post-footer, uno para la plantilla móvil y otro para plantillas normales. Busca ambos y pon el código en el que no usaste.

      Eliminar
    2. no ahora no esta porque lo quite :/

      Eliminar
    3. Razón por la que no puedo ver dónde está el problema, pero de todas formas comprueba lo que te dije de los dos sitios posibles dónde se puede poner. Sólo en uno funciona.

      Eliminar
  105. Oloman exelente post esta genial, tengo unas preguntas hay alguna forma de ponerlo en la barra lateral, otra como cambio el titulo quisiera ponerlo en ingles pero no encuentro la manera de cambiarlo si me puedes ayudar te lo agradeceré mucho

    ResponderEliminar
    Respuestas
    1. Este tal cual está no sé cómo se podría meter en la barra lateral, pues sólo se puede ejecutar desde la plantilla porque incluye un loop (entre otras cosas).

      Eliminar
  106. Excelente tutorial! Muchas gracias!

    ResponderEliminar
  107. Muchas gracias por el trucos Oloman :D

    ResponderEliminar
  108. Hola Oloman, siempre ayudandonos con este blog tan maravilloso que tienes, en serio, si tuvieras un boton de paypal pa aportarte algo lo haria, aunque sea pa un cafe!

    Bueno, he puesto los post relacionados, pero si te fijas http://mjkelectronik.blogspot.com.es/2014/02/llamadas-gratis-por-whatsapp.html me sale el fondo que tengo en la barra lateral bajo al titulo "post realcionados". Supongo que se puede personalizar el post-footer-line-3 para que no salga el fondo ese?
    Mil gracias por tu ayuda, el blog es http://mjkelectronik.blogspot.com.es/

    ResponderEliminar
  109. Oloman, no te molestes, lo he conseguido yo solita!!! Edite la parte #related-posts h2{ y le puse el color, y como no sabia como quitarle el fondo, supuse que si ponia background: este estaria por encima del otro, XD y asi fue, sin fondo y con otra letra. Estoy orgullosa de mi misma jeje, y que sepas que todo gracias a ti, he aprendido mucho siguiendote

    ResponderEliminar
    Respuestas
    1. Vale, vale XD Te iba a decir que si lo hiciste tú no tenías que dar las gracias, pero tras terminar de leer tu comentario ya me toca decir... de nada ;)

      Eliminar
  110. Hola amigo. ¿Hay alguna manera de hacer que se vean las entradas relacionadas en la versión móvil del blog?
    Muchas gracias. Saludos.

    ResponderEliminar
    Respuestas
    1. En la versión móvil que te ofrece Blogger "de serie" creo que no. Tendrías que hacer que tu blog fuera adaptable y entonces saldría todo lo que tengas en él. Escribe "RWD" en el buscador de la izquierda y tendrás más información sobre eso si es que la necesitas.

      Eliminar
    2. De momento lo que he hecho ha sido poner el gadget de Linkwithin con el parámetro mobile="only". Así se ve el tuyo en versión web y el otro en móvil.

      Eliminar
    3. ¿Pero el de LInkwithin se adapta al formato del móvil? Es que hace mucho que no lo uso y el primero que sacaron era de tamaño fijo.

      Eliminar
    4. Sí que se adapta bien. De todas formas he hecho caso de tu recomendación y adaptado tu plantilla mínima RWD, ahora sí que es todo mucho más fácil y se adapta a cualquier dispositivo. Muchas gracias.

      Eliminar
  111. hola mil gracias por este tutorial yo con Linkwithin era imposible me daba error pero en cambio con tus pasos me ha salido perfectamente, pero una duda que me surge...ya se que son entradas en miniatura pero igual que he cambiado el tipo de letra, color, etc, hay alguna manera de cambiar:
    1º) el tamaño de la caja para que se vea un poquito mayor.
    2º) el tamaño de la letra con el titulo del post que aparece dentro
    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola. Se van a deformar un poco, pero si no quieres estar trajinando dentro del script que es mucho más complicado, lo más sencillo es añadir esto a tu CSS:
      /* Para las imágenes */
      #related-posts img {
      width: 120px !important;
      height: 120px !important;
      }
      /* Para el texto */
      #related-posts a div {
      width: 120px !important;
      font-size: 16px !important;
      }

      Eliminar
  112. Mil gracias por fin una persona a la que le impirtan nuestros comentarios y resuleve nuestras dudas...ole por ti

    ResponderEliminar
  113. quería hacerte una pregunta, he estado mirando tu blog pero no encuentro nada al respecto, era para saber como reducir espacio entre entradas, es decir, entre post o entradas yo tengo un separador en forma de imagen (huellas de perro), pero no se por que me queda muy separado respecto a la ultima entrada que publico y no se si se me esta escapando algún atributo o como hacerlo. Te estaría eternamente agradecida si pudieras ayudarme con eso. Un montón de gracias.

    ResponderEliminar
    Respuestas
    1. No te vuelvo a mirar nada mientras que sigas teniendo esa utilidad para que salte un aviso cuando pulsas botón derecho. Realmente no impides que te copien ni nada de eso, pero a mí me estorba bastante para poder ver el fuente. Es broma, pero considéralo: Deshabilitar botón derecho, pero olvidaros de proteger el contenido.

      Con respecto a la separación:
      .post {
      margin: 0 0 45px 0;
      margin-top: 1em;
      margin-top: 2em;
      padding-botton: 2em;
      }
      ...ese 45px que ves es el culpable. Redúcelo.

      Eliminar
    2. Un Millón de gracias por tu respuesta...puedes creerte que ¡¡¡no sabia que
      tenia activado lo del boton derecho del ratón!!! Seguramente cuando cree el
      blog (no tenia ni idea de que iba esto, y seguro que por desconocimiento o
      inexperiencia lo vi por algun tutorial y lo agregué, si no lo he hecho mal creo que ya está deshabilitada esa opción.. MIL disculpas ;)

      Respecto a lo del post que me decias, esos valores que tu me dices no me
      aparecen en la plantilla de html, he estado echando un ojito y a mi me
      salen siguientes valores:
      .post {
      margin: 20px 0;
      padding: 10px 0;
      margin: 0 0 $(post.margin.bottom) 0;
      margin-top: 1em;
      padding-botton: 1em;

      .comments h4 {
      font: $(post.title.font);
      margin: 1em 0 0;
      margin-top: 1em;
      }
      .post-body {
      margin: 30px 0 0;
      font-size: 110%;
      line-height: 1.7;
      margin-top: 0.30em;
      clear: both;
      padding: 30px 0 0;
      }

      No se si es que estoy haciéndolo mal, o no estoy en el lugar correcto de la plantilla, pero estoy volviéndome loca para intentar reducir espacio entre las etiquetas del final del post y el separador de imagen con huellas de perro ¡Ya no sé si tengo cabeza o bombo ;)! jolin y no soy capaz de dar con ello...

      Mil gracias por ayudarme a saber cositas para mi blog lo empece hace 3 meses y se que tengo mucho trabajo por delante para tenerlo tan completo y bonito como el tuyo y algunos que hay por la Red.

      Perdona ser tan pesadita :( y como siempre un millón de gracias por todo.

      Eliminar
  114. Belén, es esto lo que tienes que cambiar por lo que te dije: margin: 0 0 $(post.margin.bottom) 0;

    Ese $(post.margin.bottom) es una variable que Blogger convierte en el valor 45px y por eso yo lo que veo es lo de margin: 0 0 45px 0; Se podría hacer de otra manera más ortodoxa, pero como fácil, cambia exactamente margin: 0 0 $(post.margin.bottom) 0; por margin: 0 0 10px 0; y cuando veas que funciona cambia ese 10px por el valor que quieras.

    ResponderEliminar
  115. Estoy de acuerdo con que es mejor no depender de servicios externos, linkwithin tiene un fallo tremendo, muestra entradas que han sido borradas, otros proveedores no dan instrucciones suficientes para instalar porque dan por supuesto que sabes programar. Se supone que su función es facilitar pero no lo hacen, te pasas horas averiguando sobre una cosa muy concreta cuando en ese tiempo podrías hacer un tutorial de xhtml y aprender mucho más en general. He decidido que ya que hay que echar horas aprendiendo lo haré para ser lo más autónoma posible con mi plantilla, no para usar servicios de empresas que no me ha facilitado nada ni me han ahorrado tiempo, al contrario, me lo han hecho perder, y algunas encima hasta te ralentizan la carga del blog. Una pregunta Oloman, cuando implemento este script (y otras versiones con pequeñas variaciones que fui encontrando en la web) me pasa que me salía como sugerencia la misma entrada en la que estaba, ¿habría alguna forma de evitar esto, hacer que siempre coja una entrada diferente, no la misma en la que ya está?. Ahora mismo no tengo el código puesto, lo borré para que no saliera eso. Creo que es algo de mi plantilla que hace una interacción inadecuada, si pudieras echarle un vistazo lo puedo escribir otra vez por si puedes localizar el fallo.

    ResponderEliminar
    Respuestas
    1. Pues no te sé decir Anam. Es verdad que alguna vez he visto alguna relacionada que era la misma entrada dónde estaba, pero rara vez. La relación está basada en las etiquetas y sólo se me ocurre que esto pase con alguna etiqueta concreta con muy pocas entrada.
      De todas formas, la parte que se ocupa de evitar eso es la función removeRelatedDuplicates_thumbs(), pero como este script no lo hice yo y no estoy demasiado ducho en ese lenguaje, pues no sabría depurarla bien.

      Eliminar
    2. Lo que pasaba era que tengo pocas entradas y sólo una para cada etiqueta, actualmente las he quitado. ¿Crees que se podría hacer que en lugar de mostrar los post relacionados por etiqueta los muestre todos, como linkwithin?

      Eliminar
    3. Por cierto, para no quedar como una zopenca :), cuando dije que hay empresas que no lo explican suficiente me refería concretamente a Add This, nunca conseguí que funcionara, está claro que los demás (linkwithin, engageya, outbrain...) son muy fáciles de instalar incluso para el más novato. Algunas generan muchísimo tráfico de sus robots al blog y no me gusta porque no sabes si te desvirtúa la estadística y si lo quitas de GA lo mismo estás quitando también las visitas de personas.

      Eliminar
    4. Linkwithin tiene una base de datos que registra todos los posts y un algoritmo -que no es público- que hace que el sistema sea totalmente distinto. Con los recursos que tenemos en Blogger y JavaScript, esta solución es la óptima actualmente.

      La respuesta por tanto es no; no se puede hacer sólo con JavaScript un sistema similar al de Linkwithin.

      Eliminar
  116. gracias oloman , excelentes explicaciones y ayudas

    ResponderEliminar
  117. Saludos Oloman.... despues de tanto batallar y romperme el coco... este fue el unico post que me funciono para las entradas relacionadas en mi Blog..... nuevamente te reitero.. que esta es una de las mejores webs en ayuda a Blogueros... Mil y Mil Gracias... DTB.. Felicidades....

    ResponderEliminar
    Respuestas
    1. Supongo que es porque aquí compruebo todo antes de publicarlo y además suelo poner demos para que se vea que efectivamente funcionan los códigos y me parece que en algunos otros sitios no es así ;)

      Eliminar
  118. Hola.
    Estoy tratando de agregar este como muchos otros codigos de entradas relaconada en mi blog, pero tengo un problema, todos los codigo que agrego me generan un problema.
    Me explico: Mi blo es con entradas cortas, no se como llamarlo.. tiene el : Leer mas
    predeterminado.. Las entradas se ponen solas automaticamente cada una con el : Leer mas.
    Entonce cuando agrego esto de entradas relacionadas.. Funciona perfectamente bien al final del post.
    Pero cuando voy a Home
    se muestra le titulo: Quizas te interese..
    encima del titulo de los post (en las entradas cortas en home)
    Y se ve parte de las entradas relacionada.
    Si son con enlaces.. se muestran parte de los enlaces, y si son con imagenes en miniatura, tambien se muestran arte de las iagenes en miniatura.
    Podrias ayudarme a solucionarlo, por favor?
    He tratado con todo lo posible hasta donde el conocimiento me ayuda pero nada funciona.
    Quizas exista algun codigo que evito que esto se vea en home..?
    Solo quiero que se vea al final de cada entrada, esto depues de hacer clic en leer mas.
    Aqui mi enlace quizas puedas hechar un vistazo!!
    De ante mano mil gracias!
    http://www.confiaencristo.net/

    Aqui unas capturas tambien, gracias por la ayuda..
    Asi se ve al final del post y es donde quiero que se vea solamente:
    http://i.imgur.com/RPdzUjg.png

    Y asi se muestra al ir a home:
    http://i.imgur.com/kV1LrSx.jpg

    Vez como se muestra el titulo encima del titulo amarillo de cada post.
    Eso es lo que quiero eliminar, quiero que no se muestre en home.
    Porfis ayudame!!! Gracias!!!

    ResponderEliminar
  119. Hola nuevamente..
    Pido disculpa, porque en realidad no habia puesto tu codigo cuando cuando deje el coentario anterior.
    Lo que paso es que yo pense que era el mismo que habia visto y agregado de otra pagina (blog).
    Era casi el mismo formato, por eso al verlo pense que era el mismo..
    Pero digo casi jejejeje porque aunque se ven casi igual ambos codigos y el proceso es el mismo, debo decir que este es diferente jejeje porque gracias a Dios.. Me dije dejame probar, esto por un comentario de alguien mas que dijo que era el unico que le habia funcionado bien..
    Y yo me dije ha de tener algp, si he probado tanto uno mas no me quita nada..
    asi lo hice, lo probe sigueindo al pie de la letra tus instrucciones y que crees jejejeje
    ME FUNCIONAAAAAAAA!
    No te imaginas lo feliz que estoy jejeje
    eres increible.. llevo dos dias tratando de pooner esto y nada me funcionaba
    este es el unico codigo que no me repite el titulo de (Post Relacionad) en home..
    Las imagenes son un poco pequenas poro da igual.. lo que hice fue aumentar el numero de tradas relacionadas para que estas llenen el espacio.. y se ve bien.. Mil mil gracias!
    Dios te bendiga mucho y te siga usando con esa maravillosa sabiduria!
    En verdad gracias!
    Resuelto!!!

    ResponderEliminar
    Respuestas
    1. Bueno, pues no hice nada especial para que te funcionara como querías, pero te leí tan feliz que no quería dejar pasar la oportunidad de comentar algo.

      Gracias por la efusividad de tu mensaje y por hacerme saber que te funcionó :)

      Eliminar
  120. Hola Oloman! cómo va todo?

    Hace unos días el Linkwithin dejó de funcionarme, en mis 5 blogs, no sé si fue al activar la opción del htpps , la cuestión es que después de toquetear decidí eliminar los scripts que tenía en las plantillas y los formatos que había hecho añadiendo en el CSS
    Encontré esta entrada tuya y a pesar de que ya lleva casi 7 años, leyendo el último comentario, que era de hace unos días, ya vi que no estaba obsoleta, así que decidí ponerla en práctica.

    Acabo de añadir al blog (el de cocina) y me funciona perfecto, pero dime una cosa (cuando puedas, ya sabes que no hay prisa y somos muchos los que te preguntamos)
    *He añadido que se vean 8 entradas relacionadas, eso no cargará demasiado el blog? Por lo que veo, me funciona bien y se ven las 8, siempre que haya suficientes entradas relacionadas, claro!
    *En el comentario 116, te piden que si es posible agrandar la cajita de la imagen y aumentar el tamaño de la letra y tú das un código a añadir en el CSS y chico, no creo que haga algo mal, pero no hay manera de que se me agrande, por lo que de momento lo he eliminado a la espera de que tú puedas iluminarme ☺, a ver si tú me puedes decir qué me falla....porque la verdad es que se me ven las imágenes y las letras muy chiquitillas. No me importa que me digas que añada algo en la plantilla directamente, y si es en css en plantilla, recuérdame que es lo que tengo que encontrar de skin no se qué o algo por el estilo
    *He aumentado el nº de letras que salían en los títulos (según explicas en el comentario 104) en mi caso, el nombre de la receta y se me ve entero (a ves me paso un poco jajajaj).

    Y bueno, después de leerme los taitantos comentarios de esta entrada, no paras de decir que te gustaba más el Linkwithin, a ver.....a mi nunca me ha fallado éste y además lo tenía tuneado a mi gusto, pero tampoco le veo nada raro a éste que tú das, y por lo que he visto en unas pocas entradas, veo que sí que me relaciona los post (que tampoco pasaría nada si no los relacionara). Tal vez el otro, si tenía 5 imágenes, siempre te salían las 5 aunque no tuvieran nada que ver, y en éste, si no está relacionada, parece ser que no sale, lo cual, tampoco me importa demasiado.

    En resumidas, que m'enrollo y seguro que ya te has perdío (es que no tengo remedio ☻), que a ver si es posible que me indiques cómo aumentar las cajitas de las imágenes y el texto que aparece debajo de ellas, que no me funciona el código que das en el comentario 116.1

    A la espera quedo.......un fuerte abrazo

    Andaira

    ResponderEliminar
  121. Hola Anadaira. Voy por partes

    Que haya más o menos entradas relacionadas sí que afecta a que haya una mayor o menor carga, pero realmente de 4 a 8 -por ejemplo- no hay diferencia apreciable.

    El Linkwithin me gusta por lo que comenté, que relaciona mejor las entradas porque es un servicio específico para eso. Sin embargo, relacionando inconvenientes/beneficios, me quedo con este otro que explico en el post.

    Por último, para agrandar las imágenes correctamente habría que rehacer un poco el código JavaScript (este post es antiguo), pero como solución rápida puedes editarlo y cambiar los tres 72px que encontrarás por otros tantos 100px. Con eso pixelarán un poco las imágenes pero es el cambio más fácil que desde aquí te puedo indicar.

    ResponderEliminar
    Respuestas
    1. Gracias Manolo, lo has bordao!. Lo he dejado en 110px y lo he bajado a que se vean 7 entradas relacionadas, porque así se me veían todos los recuadros en una sola línea.
      Tu entrada tendrá solera, pero funciona de maravilla.
      Como siempre MUCHÍSIMAS GRACIAS!!!!!
      Un abrazo

      Eliminar
    2. uinssss y además he aumentado el tamaño del texto...y al primer intento!!!!!

      Eliminar
    3. Jajaja.... Me encanta que te encante ;)

      Eliminar
  122. Saludos Oloman! Por fin me hice un tiempo para retomar la configuracion de aquel indice para TODAS las entradas que no pude configurar, pero se me atravezo primero esto de las Entradas relacionadas con miniaturas, asi que despues de pegar los codigos y modificar un poco el fondo, los tamaños y las cantidades me llena de regocijo platicarte que funciona extraordinariamente bien. Muchas gracias por poner a nuestra disposicion este gran artilugio. Si alguien quiere verlo funcionando puede darse una vuelta por aqui:

    BFdeS 2017-02-10 - Minifaldas (50 Fotos)

    Aparte de reiterar mi agradecimiento y atreviendome a quitarte mas tiempo, tambien quiero hacer 3 pequeños comentarios.

    Por un lado, uno de los blogs pone el titulo en mayusculas, los demas no... Como por donde le busco para quitarle esa caracteristica a la configuracion del HTML (se ve "rarito"). Se te ocurre algo?

    Por otro lado, como vi que se podia hacer y nada mas por curioso trate de que se vieran las miniaturas tambien en la pagina principal, asi que quite todo el renglon que dice:

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

    y el otro renglon con /b:if tanto en el primer codigo (el que va antes de /Head) como en el segundo y no pasa nada... a esos renglones te refieres?

    Y por ultimo, no se si por negligencia, flojera o simple modestia dejas siempre incompletos tus codigos, por favor, deberias de incluir lo siguiente:

    href="http://www.oloblogger.com/2009/11/entradas-relacionadas-con-miniaturas.html" style="display: block; font: normal bold 12px Arial,Sans-Serif; margin: 10px; text-align: right; text-decoration: none;" title="indice">Script obtenido en Oloblogger

    a ti te qita un minuto, pero a los legos como yo nos lleva entre 30 y 40 minutos con ensayo/error... No se vale ;)

    Gracias por todo y por aqui te seguire dando lata.

    ResponderEliminar
    Respuestas
    1. Hola. Me alegro de que te vayan saliendo las cosas ;)

      Para cambiar lo de mayúsculas/minúsculas, lo primero sería que los títulos de tus entradas tuvieran todos el mismo formato. la parte que tienes que modificar del script es esta:
      <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>

      Dentro de la etiqueta STYLE pon un text-transform: uppercase; (o lowercase, o lo que necesites) y listo.

      Con respecto a lo que se vean las miniaturas en la página principal, primero no creo que sea conveniente añadirlas ahí y segundo creo recordar (el artículo tiene 8 años) que el script no funcionará bien en portada porque no está preparado para ello.

      Sobre lo de que dejo incompletos los códigos, gracias, pero es muy raro que añada un crédito de autoría. Si vosotros lo queréis hacer, pues agradecido, pero no es necesario.

      Saludos ;)

      Eliminar
    2. Voy a tirarme un clavado en lo del titulo, muchas gracias. Y como bien dices, lo de las miniaturas en la pagina principal no creo que se vea bien, solo queria probar si se podia... :)

      Respecto al credito de autoria, yo sabia que no podia ser ni flojera ni negligencia :) Ya en serio, asi como hay que decir "por favor" y "gracias", tambien hay que reconocer de quien vienen las cosas. Asi que en la medida de lo posible pongo la referencia en los artilugios que amablemente pones a nuestra disposicion, explicando como ponerlos en funcionamiento y resolviendo dudas.

      Y como es buena hora, vamos a ver como nos queda el

      Índice por etiquetas que muestra TODAS las entradas publicadas

      Nuevamente, muchas gracias Olo! Nos estamos leyendo por aqui.

      Eliminar
  123. Hola creo que soy la unica que no le funciono, supongo que lo puse mal es que en mi codigo html no encontre el post footer u.u termine con dolor de cabeza. Ayudame please

    ResponderEliminar
    Respuestas
    1. Hola Cubanita. Busca bien porque lo acabo de comprobar y si tu blog es este, con seguridad que tiene un post-footer porque yo lo he visto. Realmente tiene dos. Los cambios los tendrás que añadir por tanto dos veces.

      Eliminar
  124. Hola oloman, me encanto el post, pero quisiera saber como coloco la imagen mas grande, no la necesito en miniatura, el CSS se puede modificar para agrandar la imagen del post?

    ResponderEliminar