Poner entradas relacionadas con miniatura en blogger (I)


Bueno ya he estado unos días fuera sin escribir en mi blog, pero, ya he vuelto en el día de hoy les traigo un truco funcional aunque su instalación es fácil alguna veces puede dar lío pues todo varía según el código de la plantilla y se trata de poner las entradas relacionadas en nuestro blog un ejemplo de como se veria sería el siguiente:


Así que para agregar esto en nuestro blog primero vamos a Plantilla | Editar HTML y buscamos la etiqueta </head> antes de ella pegaremos lo siguiente:

<!-- 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; /*Tamaño de la letra*/
color: white; /*Color de la letra*/
font-family: Arial, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:white; /*Color letra sin pasar el mouse*/
transition: all 0.7s ease 0s;
}
#related-posts a:hover{
color:black; /*Color letra al pasar el mouse*/
}
#related-posts a:hover {
background-color:#d4eaf2; /*Color de fondo al pasar el mouse*/
border-radius:10px;
}
</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]='http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/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 -->

Muy bien, hecho esto seguirá la parte más incómoda pues es la que varia según el código de su blog para que se visualice correctamente lo normal será ponerlo en el pie del post (post-footer) si ya hay algo allí recomiendo que se coloque debajo de esto para que se vea a lo último generalmente está línea va expresada así búsquenla:

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

Si no les da entonces esta pero el proceso es igual:

<div class='post-footer'> 

Debajo de esta línea irá el siguiente código:


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

Y listo podría decir que ya estuvo todo es importante guardar lo cambios y visualizar directamente desde un post ya que desde una vista previa el script no se ejecuta en lo absoluto, si tienen duda alguna no olviden comentar. 

Hasta la próxima,

85 comentarios:

  1. Un problema fácil de solucionar. El letrero POST RELACIONADOS sale en color blanco y como mi blog www.quepodemosver.com está en blanco no se distingue. ¿Cómo puedo ponerlo en rojo o negro?

    El artículo un 10 ha funcionado a la primera, incluso en torpes como yo.

    ResponderBorrar
    Respuestas
    1. Cjam1963 ¿Qué tal?, bueno entré a tu blog y veo bien lo de el color de entradas relacionadas no hay problema ya por el color ahora veo el color de la mini descipción de cada entrada relacionada en la partede abajo es blanca pero al pasar el mouse es negra, esto lo puedes arreglar en el CSS del código que di:

      #related-posts a{
      color:white; /*Color letra sin pasar el mouse*/
      transition: all 0.7s ease 0s;
      }

      En donde está el white pon el color escrito en inglés que desees que se note y guardalo.. Así ya te habrá funcionado....

      Saludos,

      Borrar
    2. Mil gracias Andrés por tu ágil y rápida respuesta.
      La primera parte la conseguí yo cambiar a rojo y la segunda parte me ha servido tus instrucciones.
      ¡¡¡Bravo por el artículo!!! consulta resuelta

      Borrar
    3. De nada es con gusto........ Saludos y gracias por escoger este artículo...

      Borrar
  2. He probado varios tutoriales y éste funciona y a la primera.
    Parecía imposible!
    Muchas gracias por la ayuda Andrés!!!!

    ResponderBorrar
  3. Oye bro de todos los métodos que realice este fue el único que funciono, muchas gracias.

    ResponderBorrar
  4. No soy capaz de ponerlo porque no me aparece la línea de post-footer ¿Será que mi plantilla no lo permite?

    ResponderBorrar
    Respuestas
    1. Hola A Ponernos Guapas Comprendo que no halles tal línea prueba no copiandola y pegándola, sino escribiendo caracter por caracter en el buscador de código de blogger así sale muchas veces, quedo atento.

      Saludos ;)

      Borrar
  5. hola ami me salio pero uno solo quisiera saber si es problema de mi blog o que es, y si sabes el problema me podes decir la solucion, muchas gracias genio

    ResponderBorrar
    Respuestas
    1. Hola Franco Suarez cuando dices que sólo te aparece uno es uno que ya que el problema pueda radicar en algún código o método en tu blog deja el enlace.

      Saludos,

      Borrar
  6. Llevo intentándolo desde hace meses y no hay manera. Ni siquiera con tu tutorial. No sé si se debe a que he insertado ya varios elementos en esa zona, pero aun probando a insertarlo antes o después de lo que ya tengo implementado, no hay forma. Gracias, igualmente. Un abrazo.

    ResponderBorrar
    Respuestas
    1. Hola Rebeca Como dices si hiciste otros métodos y no te dieron resultado debes eliminar y dejar tu plantilla como la tenías antes de aplicar el truco ya que si los dejas así sea un fragmento de CSS por ejemplo podrías tener problemas y líos con ello, también ten en cuenta la versión de JQUERY.

      Saludos,

      Borrar
  7. Gracias, Andrés Felipe. El Css lo he revisado a fondo varias veces y créeme he borrado todo lo relativo a este widget y su script. A ver si con el truco que he descubierto hoy por casualidad, doy con la solución. En todo caso, mil gracias por responder. Tomo nota, no obstante, sobre lo del JQUERY, pues quizá ahí esté la clave. Un abrazo.

    ResponderBorrar
    Respuestas
    1. Hola Rebeca Claro entiendo, quedo atento a cualquier inquietud que tengas.

      Saludos,

      Borrar
  8. Como se puede hacer para visualizar mas texto del titulo porque solo aparece una pequeña parte del titulo y me gustara que se mostrara mas???????????

    ResponderBorrar
    Respuestas
    1. Hola Chadlers Reynols el título de toda la caja del gadget se encuentra modificable en estas líneas descritas:

      #related-posts h2{
      font-size: 1.6em; /*Tamaño de la letra*/
      color: white; /*Color de la letra*/
      font-family: Arial, “Times New Roman”, Times, serif;
      margin-bottom: 0.75em;
      margin-top: 0em;
      padding-top: 0em;
      }

      Saludos,

      Borrar
  9. Excelente!

    Solo una pequeña ... como hago para poner mas relacionados, me aparecen 4 y me gustaría disponer de mas.

    Saludos.

    ResponderBorrar
  10. Nada ya lo he encontrado...

    es aqui :

    var maxresults=5;


    Un saludo!

    ResponderBorrar
  11. Hola amigo! He probado tu widget y me funciona en un 90%... ¿Sabrias decirme porqué no se ven algunas de las imágenes?

    Muchas gracias de antemano

    Lo he probado aqui: www.actiontalesfanfictions.blogspot.com

    ResponderBorrar
    Respuestas
    1. Hola Roberto he revisado tu caso es un poco raro pensé de pronto que es por el tamaño de la primera imagen que cargas en tu post es decir la primera de arriba hacia abajo prueba cambiándola por una más grande, y por otra parte trata de que esa imagen para cada post sea cargada directamente por la herramienta de blogger para subir imágenes y no colocando un link de terceros para simplemente hostearla y que esta se muestre en tu sitio.

      Saludos,

      Borrar
  12. Si uso Picasa como hosting de las imagenes (aunque es cierto que, con tantas imagenes que manejo, las tengo allí clasificadas)...
    ESpero que no se a eso porque tendría entonces casi 500 entradas para revisar

    Muchas gracias por atenderme!!

    ResponderBorrar
    Respuestas
    1. Hola amigo, sí podría ser posiblemente eso pero eso no involucra que revises tus 500 entradas, son de esos casos raros de la vida web porque la verdad es la primera que veo ese error con un blog y este código para entradas relacionadas.

      Saludos,

      Borrar
  13. Una pregunta amigo. Me podrías ayudar con un código para que en mi blog se puedan ver las entradas en miniatura asi como en "http://hackstore.net/"

    Me refiero por ejemplo allí donde dice anime. Y que aparecen todas las entradas en miniatura, Se podría hacer eso en blogger.
    Gracias de antemano.

    ResponderBorrar
    Respuestas
    1. Claro se puede hacer pero a mi me queda muy poco tiempo para ayudarte ya que tengo una academia por la cual responder haha es todo diseño web pero no lo encontrarás exactamente así eso sería que buscaras mucho a la final son entradas relacionadas y aprendes un poco de CSS podrías modificarlo...

      Saludos,

      Borrar
    2. Ok. Muchas gracias de igual manera.

      Ahorita en tiempo libre tratare de aprender.

      Saludos.

      Borrar
  14. Hola! El tutorial me ha servido un montón y eso que soy bastante torpe.
    El caso es que me gustaría que las imágenes de los post relacionados quedaran centradas y no en el margen izquierdo, ¿cómo puedo hacerlo?
    Gracias!!

    ResponderBorrar
    Respuestas
    1. Hola Rocío, entonces cambiando los píxeles... aquí

      podrás padding-left:5px;

      Me cuentas si te salió ya que te respondí este comentario a los afanes haha voy de salida...

      Borrar
  15. hola como puedo cambiarle el tamaño a los post estan muy pequeños, es posible?

    ResponderBorrar
    Respuestas
    1. Hola Amigo, para hacer lo que quieres implica mover varas elementos para darle un tamaño mayor proporcional a toda la caja de post relacionados por ello no puedeo indicarte todo el paso a paso por aquí.

      Saludos,

      Borrar
  16. Hola Andres estos post relacionados se relacionan según la etiqueta del artículo ??

    Yo necesito que si un artículo cualquiera de mi blog tiene la etiqueta CULTURA, los post relacionados que aparecen abajo sean de la misma etiqueta

    ResponderBorrar
    Respuestas
    1. Hola Amigo, así es trabajando en función de la misma etiqueta según el articulo tal cual como lo describes..

      SAludos,

      Borrar
    2. Andres sabes si el código sirve para móviles? ???

      Borrar
    3. De que se visualice por supuesto siempre y cuando en blogger no tengas la versión para móviles activada en Blogger ahora bien el sistema de entrefas relacionadas no es responsive lo cual sería desventaja y no se vería muuuy bien.

      Saludos,

      Borrar
  17. Hola.

    Lo he intentado, pero nada... ¿Sigue funcionando?...

    Saludos

    ResponderBorrar
    Respuestas
    1. Hola ANZAGA el truco aún sigue 100% ON a lo mejor algún paso estás haciendo mal...

      Saludos ;)

      Borrar
  18. Hola, el post me ayudó mucho me funcionó a la primera.
    Pero me pregunto si puedes hacer un pequeño tutorial de como modificar el tamaño de las miniaturas para que se vean más grandes ya que son muy pequeñas.
    Gracias. Un saludo

    ResponderBorrar
    Respuestas
    1. Hola Anónimo, Claro, fíjate en el SCRIPT casi al final del código que copias viene un fragmento así tal cual:

      width:72px;height:72px;border:0px;

      Entonces los números que ves 72 72 al ser una imagen cuadrada las miniaturas deben ser igual sólo modifica esos dígitos a tu gusto y ya está ;)

      Saludos,

      Borrar
  19. Hola Andrés Felipe,
    Gracias por el post, muy facil y de excelente resultado. Con tu blog voy aprendiendo a codificar y ... soy un nuevo seguidor!
    Dos preguntillas:
    1/ Quiero centrar los 5 cuadrados de las miniaturas, pero sin que el título ni la ralla que hay debajo de éste, se muevan de la parte izquierda. (lo intente con "padding-left:5px;", pero se mueve todo el bloque, título, ralla y miniaturas).
    2/ He agrandado las fotos, y ahora me gustaria que los titulos de cada cuadrado de las miniaturas tuviesen la longitud (ancho) igual que la foto.
    Por si quieres echar un vistazo al blog: http://elbuscaracons.blogspot.com.es/
    Un saludo y gracias.

    ResponderBorrar
    Respuestas
    1. Hola Xavi es un gusto para mi recibir un comentario tan amable entre cientos que llegan mensualmente al blog jaja también leí un correo tuyo que me llegó luego lo contestaré, respondiendo tus preguntas:

      1. Centrar las sola imágenes no es fácil pero tampoco imposible medio ojee el SCRIP que no es de mi autoría pero lo comprendo ya de tanto posts y scripts que tengo empiezas a atorarte con recordar como funcionaba cada uno jeje pero bueno, me comentas que modificaste el paddin left para el parámetro "#related-posts {" dicho parámetro en CSS afecta todo ya que el css de todo en general debes saber que en css para afectar el css hacia una imagen o grupo de imágenes debe haber un parámetro declarado cualquier regularmente como ".img {" en este caso lo tenemos claro pero no directamente en el CSS que tu manejas o que ves ¿En donde está? en el JS código JavaScript allí metido a las malas en teoría jaja y es por ello que es cansón modificar se puede pero explicartelo en un comentario es eterno sin embargo si le trabajas un poco anexando el css entre el js donde ves lo de las imágenes hasta ahí por es parte. (PERSONALMENTE ES MUCHO TRABAJO PENSANDO SÓLO PARA ESE OBJETIVO)

      2. Entiendo veamos hice unas pruebas en tu blog mirando tu código desde mi navegador me dio resultado haciéndolo de esta forma, en el CSS de este código busca esta parte "#related-posts a:hover{" y "#related-posts a{" listo allí justo debajo de cada uno pega lo siguiente "width:72px;" cambia el 72 por el ancho que tienen tus fotos así me dio resultado a mi se ajustó al ancho de tus imágenes...

      Saludos,

      Borrar
  20. Gracias por la rapida respuesta.
    El punto 1 dare una ojeada (aunque tengo muy muy pocos conocimientos) y mientras añadiré un cuadrado mas, para que se vea más centrado.
    El punto 2, modificado y perfecto.
    Un saludo.

    ResponderBorrar
  21. Hola Andrés,
    Añadí un cuadrado más, en total seis, y ahora no se porque me repite la misma entrada que estoy viendo, y hay muchas mas entradas que coinciden con la etiqueta.
    Solo acepta un maximo de cinco cuadrados?
    Un saludo.

    ResponderBorrar
    Respuestas
    1. Hola Xavi, busca este fragnmento:

      indexOf("\"",b+5);d=s.substr(b+5,c-b-5)

      Donde ves los digitos "5" modificalos por 6 a ver que sucede con el nuevo cambio que deseas hacer así por encimita creería que no es más,

      Saludos,

      Borrar
  22. Un saludo Andres,

    La plantilla de blogger que uso trae las entradas relacionadas que se ven perfectamente en el pc, el problema es que en la versión móvil no consigo visualizarlas, supongo que debe ser algo que no he marcado, pero como no tengo conocimientos de programación no consigo solucionarlo. No sé si me podrías ayudar a resolverlo. Te dejo el nombre del blog por si te puedes pasar: fyrampisrecetas.blogspot.com

    De antemano muchas gracias por tu tiempo

    ResponderBorrar
    Respuestas
    1. Hola Ámparo veamos, versión móvil si hablamos de la versión móvil habilitada desde blogger no va ser posible que sea vea nunca ya que blogger predefine una plantilla al habilitar esta opción, ahora bien hay plantillas que vienen ya "Responsive" es una plantilla completamente adaptativa para un celular tablet pc etc y no necesitas habilitar la opción de versión móvil en blogger porque allí sí se podría ver todo los gadgets y elementos puestos, pero, depende de la configuración del código de plantilla y eso está inicialmente en quién la programó o hizo del todo que sería de donde la sacaste es por ello que no se ven no están pre configurados para ello y desde mi posición sería complejo sacarte el paso exacto en un sólo comentario :( pro veo que hay buenas opciones en la versión móvil de tu plantilla no creo que haga falta habilitar relacionados...

      Saludos,

      Borrar
  23. ¡Muchas Gracias! Llevaba dos días buscando una manera, y el que había encontrado a través de un pluging o app, mostraba las entradas relacionadas en la página principal y no sólo en la entrada en concreto como yo quería, y luego conseguí otro que si era sólo al entrar en la entrada pero no tenía miniaturas, hasta que por fin conseguí el tuyo y funcionó como lo deseaba!

    Muchas Gracias! <3

    ResponderBorrar
    Respuestas
    1. Hola Laura, en con gusto recuerda que peudes seguir el blog....

      Un saludo,

      Borrar
  24. Respuestas
    1. Hola, intenté acceder a tu blog tristemente lo tienes en privado por invitación, pero, lo que te puedo decir así por encima, hiciste alguna modificación con otro truco o gadget en tu blog a veces pueden existir conflictos de código indexados..

      Saludos,

      Borrar
  25. Gracias Andres quedo super genial
    AL final acabo funcionando perfectamente
    Mui buen aporte

    ResponderBorrar
  26. Gracias, pero es que es enorme el gracias. Había intentado varios métodos y nada. Y en este no me aparecía el título ni l descripción. Solo fue cuestión de hacer unos pequeños cambios. Agrandé la imagen. En fin, gracias una vez más. Me salvaste la vida... https://victorino1963.blogspot.com/ Un abrazo desde Ibagué, Tolima.

    ResponderBorrar
  27. Una consulta, ¿como puedo hacer para que los post relacionados no sean siempre los mismos? es decir, que cambien, gracias.

    ResponderBorrar
    Respuestas
    1. Hola Anónimo para el caso de este truco no es posible ejecutar una variación en los contenidos que tu dices....

      Saludos,

      Borrar
  28. Muchisimas gracias,fue el unico qué me funciono, saludos

    ResponderBorrar
    Respuestas
    1. Hola Darkness me alegra que te sirva saludos,

      Recuerda seguir el blog,

      Borrar
  29. hola , eh agrandado el tamaño de las miniaturas , como indicas aqui
    width:72px;height:72px;border:0px;
    , pero se ven borrosas, alguna manera de agregar calidad , espero pueda ayudarme. Gracias.

    ResponderBorrar
  30. Gracias por tu post. Una pregunta los post relacionados me quedan a la izquierda. Como hago para centrarlos ? Lei un comentario tuyo que hay que colocar padding-left:5px; -- pero esto es lo que ya viene para copiar y pegar. Disculpa , pero si me lo puedes explicar mejor te lo agradecería.
    Y otra pregunta más - esta configuracion de " enlaces relacionados..¿no inciden en la velocidad de la web ?

    ResponderBorrar
  31. hola, Andrés, muy bien el código. Pero quisiera que me apoyarás. MIra copié es escriptm, pero no me quedó como el tuyo: las letras de blog se ven más grandes y las imágenes más grandes y las tienes en dos hileras: que tendría que hacer, gracias. ¿Ppdrías darte una vuelta por mi blog?: https://www.buenosescritos.com/

    ResponderBorrar
    Respuestas
    1. Hola Javi las letras del blog? haces mención al título de cada entrada?.

      2. Cuando dices que las tengo en dos hileras hablas entonces de mi gadget "posts relacionados" el tutorial lo tengo aquí:

      http://www.blogginred.com/2018/04/colocar-adsense-en-entradas.html

      Sin embargo debo actualizarlo ya que algunas imágenes han caído, pero si logras entender lo que dice el texto sin necesidad de imágenes estará más que bien y lo habrás hecho.

      Saludos,

      Borrar
  32. hola, como puedo poner las etiquetas encima de la imagen del thumnail

    ResponderBorrar

ESTAMOS EN: