Artículos Relacionados con Imagen en Miniatura en Blogger


Anterior mente escribí un artículo donde explicaba cómo poner artículos relacionados en blogger, el caso es que dicho código ha sido modificado trayendo mejoras en la usabilidad del blog, este  código muestra imágenes en miniatura junto a los artículos relacionados. Puedes verlo funcionando en este mismo blog.

Lo que podemos destacar de esta nueva versión, es que además de mostrar imágenes en miniatura, te muestra una imagen en español si un artículo no tiene imágenes. Este  widget fue desarrollado en bloggerplugins.

Para ponerlo en tu blog, ve a Diseño > Edición de HTML > Expandimos los artilugios con la ayuda del buscador de Firefox (Ctrl + F) buscamos la etiqueta </head> y justo antes pegamos el siguiente código que te dejo en está otra página.

Ahora busca la siguiente linea de código en tu plantilla:

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

Si no la encuentras, puede estar definida en otras plantillas como:

<p class='post-footer-line post-footer-line-1'>

Justo despues pega el siguiente código:

<!-- Articulos relacionados con miniaturas -->

<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>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;Artículos relacionados&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

<!-- Articulos relacionados con miniaturas -->

Este código te mostrará 4 imágenes en miniatura, pero si tu quieres puedes cambiarle el número de imágenes a mostrar en var maxresults=4; cambia el número cuatro por el número de entradas que quieres que se muestren.

83 comentarios:

Sus el 20 de febrero de 2010, 13:00 dijo...

¡Por fin una manera de poner "artículos relacionados" que funciona y me gusta cómo queda!

Administrador el 20 de febrero de 2010, 14:43 dijo...

Hola Sus, me alegra que te haya gustado!

La Trucoteca el 27 de febrero de 2010, 12:35 dijo...

Hola Eduardo!
Hace poco que hemos descubierto tu blog, y la verdad es que nos parece que tiene trucos de gran calidad :)
Esta entrada nos ha servido mucho :)
Ya estás enlazado en nuestra sección "Blogs de Ayuda".
Un saludo!

Anónimo dijo...

Hola!
Una preguntilla:
¿Cómo se puede separar cada bloque de entradas relacionadas? Lo digo porque me salen todas muy juntas unas de otras, y me gustaría que me saliera como te salen a tí :)
Gracias por el truco, está genial :)
¡Saludos!

Administrador el 27 de febrero de 2010, 13:37 dijo...

Hola Javier, me alegra saber que los post no los he escrito en vano, ya que están siendo de muchas utilidad, también me he pasado por tu blog, y la verdad es que me gusta, lo enlazare ahora mismo.
Saludos!

Administrador el 27 de febrero de 2010, 13:55 dijo...

Hola Anónimo, localiza está línea en el código que copiaste de la otra páginas:

document.write('<a style="text-decoration:none;padding:5px;float:left;');

Fíjate que el pandding es de 5 pixeles, cambialo por el número de pixeles que quieras.
Un saludo!

Jose el 5 de marzo de 2010, 5:30 dijo...

Hola, de todos los codigos utiles que tome de aqui, no sabia en cual comentar jaja... mirami pagina, esta quedando genial gracias a gente como tu que se preocupa y principalmente se OCUPA de que todos "aprendamos" a "relacionarnos" mejor con este "mundo" genial... GRACIAS!!
Abrazos desde argentina!!

Administrador el 5 de marzo de 2010, 7:19 dijo...

Hola Jose, Bienvenido al blog, me he pasado por tu página y la verdad es que está genial, el botón de ir arriba a quedado perfecto.

Un saludo y gracias por comentar en mi blog.

Jose el 5 de marzo de 2010, 8:05 dijo...

Gracias, la verdad que toda mi pagina, incluyendo la modificacion de la plantilla (que esta muy buena!!) esta hecha en base a lo que nos enseñas aqui a todos quienes tomamos aficion por esto...
espero crecer tanto como tu. deseame suerte jaja!
Abrazos, ya somos amigos!...

Administrador el 5 de marzo de 2010, 12:12 dijo...

Me alegra saber que mis post no son escritos en vano, y crecerás todo lo que tu quieras, te deseo un mogollón de suerte con tu blog.

Un abrazo igualmente para ti, amigo.

minddecay el 7 de marzo de 2010, 10:47 dijo...

Gracias por el post, me sirvio bastenate, y debo reconocer que me gusta mas este que el de links.

Modifique los colores para que quedaran adecuados a mi template.

Saludos

Administrador el 7 de marzo de 2010, 12:38 dijo...

Excelente minddecay, se ve perfecto en tu blog.

Un saludo!

Madness Films el 13 de marzo de 2010, 2:33 dijo...

Hola de nuevo! pues no me aparece la linea en ese codigo de la pagina que redirecionas. Lo unico que he encontrado que se puede asemejar es esto: div style
No se si será lo mismo o que pero no me aparece la linea que mencionas y eso que la he buscado con el subrayador. :(

Un saludo y espero tu respuesta.

Administrador el 13 de marzo de 2010, 4:00 dijo...

Eddie Lamorgue, pues dicha línea ya la he puesto en color verde para que la puedan encontrar más fácil, pásate a verla.

Saludos!

Anónimo dijo...

Gracias por responder pero por que la linea que me marcas en verde ahora no tiene nada que ver con la que en este post señalabas??

Un saludo!!

Eddie Lamorgue

Administrador el 14 de marzo de 2010, 3:28 dijo...

Eddie Lamorgue creo que ya te entendí, en el código de la otra página no tienes que buscar ninguna línea, las lineas que señalo las tienes que buscar en tu plantilla con los artilugios expandidos.
Saludos!

Anónimo dijo...

¡Hola! Felicidades por la pagina. Estoy contruyendo un nuevo sitio con esta plantilla http://btemplates.com/2009/11/23/wp-boxed-tech/demo/ por lo que la cambio regularmente y en ocasiones no me deteacta esto de los articulos relacionados ¿Que puedo hacer?

Administrador el 23 de marzo de 2010, 8:04 dijo...

Hola Anónimo, pues no sabría decirte a que se debe el problema, lamento no poder ayudarte.
Saludos!

nochesamarillasg el 26 de abril de 2010, 17:16 dijo...

hola eduardo sanguino,tengo una dúda,es posíble que los "Artículos Relacionados con Imagen" aparescan sólo en cáda ¿post individual? es posíble con este codigo? muchas gracias :)

Administrador el 30 de abril de 2010, 14:39 dijo...

Hola nochesamarillasg, la verdad no sabría decirte si es posible, pero puedes plantear tu pregunta a donde le dan soporte a este Script Bloggerplugins.

Saludos!

Unknown el 5 de mayo de 2010, 3:03 dijo...

Hola, mi pregunta es ¿también se puede habilitar este complemento desde internet explorer si no tenemos firefox? gracias Eduardo

Administrador el 5 de mayo de 2010, 6:22 dijo...

Hola Carolum, por supuesto que sí, si tienes I.E. 7 por ejemplo has la combinación de tecla Ctrl + F y te aparecerá el buscador del navegador y hay pones el código que quieres buscar en tu plantilla y listo.

Saludos!

Ani el 6 de mayo de 2010, 9:17 dijo...

Pues yo debo ser nula porque no me sale, he exo todo como me has dicho y no aparece nada de nada...ya que se debería de ver al momento no??
gracias
tambien lo he intentado poner con linkwhitin y tampoco se me ve...

Nena/VioletaCentaúro6260 el 21 de mayo de 2010, 11:01 dijo...

Muchisimas gracias, me sirvieron d elas dos formas. :)

Administrador el 29 de mayo de 2010, 13:16 dijo...

Hola Nena, me alegra saber que te ha servido, me he pasa por tu blog y a quedado perfecto.

Saludos!

Joseph Aldi el 31 de mayo de 2010, 16:48 dijo...

hola, disculpa me podrias ayudar porque realize los pasos que indicas pero no veo nada en mi blog, ni siquiera me salen articulos relacionados, q podra ser, saludos y gracias

Laser el 2 de junio de 2010, 0:22 dijo...

Hola Eduardo,

gracias por este gran aporte, mi pregunta es si es posible cambiar el temaño de los thumbails?

Un saludo.

Administrador el 3 de junio de 2010, 7:46 dijo...

Hola Laser, si es posible, ve a Diseño > Edición de HTML > y busca la siguiente linea de código:

style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div

Ahora cambia los valores en width:72px y height:72px por los valores que tu quieras por ejemplo 100 pixeles, guardas los cambios y listo. Ahora los thumbails se verán más grande.

Un saludo!

Joseph Aldi el 3 de junio de 2010, 20:37 dijo...

repito ejeje, me podrias ayudar no entiendo porque no me sale nada, la plantilla me carga bien, pero no me sale nada

Administrador el 4 de junio de 2010, 6:26 dijo...

Hola Jose Sicaja - jasa01, vuelve a intentarlo nuevamente, si no sale nada me dices cual es tu blog y me envias una copia de tu plantilla a

admin@pazosblogger.com

Saludos!

Quimica Facil el 4 de junio de 2010, 19:15 dijo...

Hola Eduardo;

Bueno gracias por poner este articulo.

Pero la verdad no me funciona, no se si es ami solamente.

Bueno..

saludos,!

Administrador el 8 de junio de 2010, 7:08 dijo...

Hola FarmaSoft.tk, gracias por tu comentario.

Saludos!

Fiesta y Chocolate el 17 de junio de 2010, 8:04 dijo...

Muchiiiiiiisimas gracias!!!! Ha sido súper fácil.

Administrador el 18 de junio de 2010, 6:35 dijo...

Hola Fiesta y Chocolate, me alegra que te haya sido fácil, ya que ha algunas personas se les complica, gracias por tu comentario.

Un saludo!

headbanger24 el 23 de junio de 2010, 22:06 dijo...

Hola, por algun motivo que desconozco no logro que me resulte :/

Administrador el 24 de junio de 2010, 7:21 dijo...

Hola headbanger24, me he pasado por tu blog y está funcionando perfectamente el script, me alegro que lo hayas logrado.

Saludos!

headbanger24 el 25 de junio de 2010, 16:41 dijo...

de hecho no lo está :( o por lo menos yo no lo veo, de todas formas hice todo de nuevo y nada =/
deberia estar arriba del boton de facebook y nada, luego lo puse abajo de este y nada tampoco, porque supongo que sale de inmediato cierto?

mi blog; http://www.headbanger24.co.cc/

gracias!

gracias!

Webmaster el 28 de junio de 2010, 17:28 dijo...

Buenas, me quedo perfecto mil gracias. El tema es que el fondo de mi blog es negro y la letra no se ve bien ya que coincide el color. ¿Se podra cambiar el color de la letra?

Administrador el 29 de junio de 2010, 6:39 dijo...

headbanger24, veo que tienes el script de artículos relacionados sin imagen, tienes que borrar todo el código perteneciente a dicho script, y volver a poner el código de este artículo. Si no va puedes utilizarLinkWithin que también te permite mostrar artículos relacionados con imagen en miniatura.

Saludos!

Administrador el 29 de junio de 2010, 7:02 dijo...

Hola Webmaster, claro que puedes cambiarle, busca en el código que copiaste de la otra página está parte

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;

Fíjate donde dice color: black cámbiale black que es (negro) por red que es (Rojo)o por el color que tu quieras, guarda los cambios en tu plantillas y listo.

Un saludo!

Anónimo dijo...

Yo quiero que debe aparecer al entrar en una entrada, que tambíén se vea en la página principal.

Un saludo y gracias

Anónimo dijo...

no me sale..intente varias formas, pero no me da ningun resultado.. podrian ayudarme... mi blog es

www.selvanet20.blogspot.com


muchas gracias

Administrador el 9 de julio de 2010, 7:38 dijo...

Hola SelvaNet, otra opción seria LinkWithin un widget que te permite mostrar artículos relacionados con imagen en miniatura,ademas su instalación es de lo más sencilla.

Saludos!

CoRaSsOn el 22 de julio de 2010, 11:23 dijo...

HOla!!!
Llevo toda la tarde buscando como poner Articulos relacionados despues de mis entradas. Me a sido de lo mas sencillo ponerlo con tus indicaciones pero a la hora de la vista previa de la entrada veo los Articulos relacionados y en cuanto pueblico la entrada desaparecen!!
Que puedo estar haciendo mal??

Enhorabuena por el blog y muchas gracias por tu tiempo!!!

Administrador el 23 de julio de 2010, 7:09 dijo...

Hola CoRaSsOn, me he pasado por tu blog, y el script está funcionado bien. Este script muestra las entradas relacionadas cuendo el usuario hace click en el título de una determinada entrada.

Gracias por tu visita!

CoRaSsOn el 23 de julio de 2010, 7:44 dijo...

Uppsss perdona, tienes razon...
Pensaba que deberia de salir tambien en la pagina principal...
No se si deberia de preguntarte a ti, pero sabes porque no me funcionan las pestañas de arriba??
Estoy empezando con esto del blog y llevo un cacao!! jejeje

Muchas gracias!!!!! y enhorabuena por tu blog!!!

Administrador el 23 de julio de 2010, 12:13 dijo...

No te funciona porque no tienes ningún enlace, solo tiene el título, has lo siguiente.
Ve a Diseño > Edición de HTML > con la ayuda de (Ctrl+F) te aparecerá un buscador interno del navegador, y en la caja de búsqueda pones el texto Sobre mi enseguida el buscador localiza el texto en la plantilla y verás algo así:

<li><a href='TU LINK AQUI' title='Sobre mi'></a></li>

Fíjate donde dice TU LINK AQUI remplaza ese texto por la dirección de tu entrada que escribiste sobre ti, guarda los cambios y listo.

gian sebastiano el 27 de julio de 2010, 17:00 dijo...

Gracias por pagina de verdad me ha servido mucho para mis blogs. A mi no me funciono el post "articulos relacionados con imag" lo hice con el problema es que lo hace para todos los post que publico menos para el primero.

Administrador el 28 de julio de 2010, 11:05 dijo...

Hola Gian Sebastiano, gracias a ti por visitar el blog. Respecto al problema con este script no sabría que decirte. Pero que bueno que te has instalado LinkWithin es una buena alternativa.

Saludos!

RocksNRules el 31 de julio de 2010, 21:39 dijo...

Hey que tal?

Estoy usando este widget en mi blog, pero ¿cómo hago para que las entradas relacionadas sólo se muestren en las páginas individuales y no aparezcan en "leer más" también?

Mira mi problema: http://rocksnrulestv.blogspot.com/search/label/Conciertos?&max-results=5

Un saludo

Unknown el 1 de agosto de 2010, 8:15 dijo...

Hola, me gusto mucho tu post, acabo de ponerlo en mi blog y queda genial
Queria darte las gracias

un beso

Administrador el 2 de agosto de 2010, 12:32 dijo...

Hola RocksNRules, este script esta configurado para que se muestre en páginas independientes y no en la página principal, para eso está encerado con una condicional, pero si no funciona en tu blog puede ser alguna incompatibilidad con algún script que tienes en tu plantilla. Saludos!

Hola teofermi, gracias a ti por tu comentario, me alegra saber que te ha sido de ayuda. Un saludo!

Anónimo dijo...

Hola mi amigo! sos un genio! muy bueno tu blog...queria preguntarte, si los articulos relacionados, se relacionan en base a los Tags? o en base al contenido de la entrada? porque yo los puse en mi blog, pero parece que relaciona mas bien con los Tags que con los titulos o contenido...

Muchas gracias!! saludos

Administrador el 15 de agosto de 2010, 10:54 dijo...

Hola Nikó, me alegra saber que te gusta el blog. Respecto este script, muestra los artículos relacionados en base a los "Tags". Saludos

descargas1link el 17 de agosto de 2010, 21:53 dijo...

Primero que todo muchas gracias por la página.. me ha sido muy util... Mi pregunta es simple, ¿se puede centrar las entradas?

Anónimo dijo...

Eduardo, acabo de probarlo en el blog que tengo para hacer estas prueba y funciona a la perfección.
Muchísimas gracias realmente por la explicación... hace días que estaba detrás de una buena opción y o la mitad no me resultaban o no me daban el resultado que quería.
Gracias !

Administrador el 24 de agosto de 2010, 9:27 dijo...

Hola El Cholija, que bueno que has encontrado la opción que se ajusta a tu necesidad aquí en este blog, me alegra saberlo. Un saludo y gracias por tu comentario.

Orlando A. el 24 de agosto de 2010, 21:12 dijo...

Saludos desde venezuela. felicitaciones por este gran sitio, como hago para colocar una linea divisoria despues de cada entrada, ya que cuando agrego el script me salen las entradas relacionadas pero sin ninguna linea que los separe como por ejemplo el que esta en esta pagina que es de color azul. Espero me puedan ayudar al respecto, les estare muy agradecido.

Administrador el 25 de agosto de 2010, 10:06 dijo...

Hola Orlando A., gracias por tu felicitación. Pues el código que está en este post tiene el código para poner la línea de separación (margen) sólo que en algunos navegadores como Google chrome no se ve, si has puesto este truco en tu plantilla busca está parte del código CSS:

('border-left:solid 0.5px #d4eaf2;"');

como puedes ver, es un borde, solido, grosor 0.5px y el otro código es el color #d4eaf2. Saludos!

Unknown el 26 de agosto de 2010, 12:15 dijo...

Fantástico , funciona bien y queda mejor.
Poco a poco voy tuneando mi blog pero sin ayudas como la de Pazos Blogger seria muy complicado.
Muchas gracias

Administrador el 26 de agosto de 2010, 23:26 dijo...

Hola Alfalfa, bienvenido al blog, me alegra saber que los trucos que hay en este blog te sean de ayuda para mejorar tu blog. Un saludo!

Orlando A. el 27 de agosto de 2010, 5:18 dijo...

Muchas gracias eduardo, agradecido por tu respuesta y nuevamente mis felicitaciones por este gran sitio de mucha utilidad para muchisimas personas. saludos cordiales y exitos, de un nuevo seguidor desde Venezuela.

Administrador el 27 de agosto de 2010, 9:55 dijo...

Gracias a ti Orlando, encantado de leer tu comentario, y me alegra que sea seguidor de este blog. Un abrazo!

Anónimo dijo...

Gracias por el codigo y por el post tan bien explicado, lo acabo se hacer de nuevo, porque anteriormente me salio "Articulos Relacionamos" con mayusculas, pero ahora esta bien.

Administrador el 20 de septiembre de 2010, 23:44 dijo...

@curio17, gracias a ti por tu visita. Por cierto, tienes buen contenido en tu blog, si sigue así tendrás buenos resultados. ¿Que tiempo llevas como blogger?.

Anónimo dijo...

Yo me inicie como blogger el 2009, diciembre, ahi hize mi primer post de prueba (en otro blog), luego me ausente 2 Meses para averiguar mejor del tema, y me meti de lleno a partir de marzo, sobre todo desde junio, pero en el blog actual (Tu Great), Gracias por preguntar.

Saludos!!!! no hay duda que la frecuente actualización y el contenido original son muy importantes.

Gracias nuevamente!!! Tienes un gran blog!!

Administrador el 24 de septiembre de 2010, 23:37 dijo...

ok, buen blog, lo veo que tiene futuro, pero si piensas escribir para largo deberías de comprarte un dominio personalizado, así se verá que tu blog crece en visitas con un dominio de primer nivel. Luego pones adsense y pagas tu dominio. Te lo digo porque veo que eres buen editor y puedes sacarle provecho a Internet y ganar de lo que te gusta hacer.

Saludos!

Anónimo dijo...

Gracias por los consejos los tendre en cuenta, Saludos!!!! y Gracias nuevamente

Administrador el 3 de octubre de 2010, 12:12 dijo...

ok.

Un saludo!

Diverso Magazine el 13 de noviembre de 2010, 18:45 dijo...

No me funciono, seguire usando el linkwithin que hasta ahora es el unico que sirve

Administrador el 14 de noviembre de 2010, 9:34 dijo...

Hola Diverso Magazine, que pena puede que sea alguna incompatibilidad con algún script que tienes en tu plantilla. Saludos!

Administrador el 14 de noviembre de 2010, 9:44 dijo...

Hola Pedro Donangelo, gracias por tu comentario encantado de leerte, me alegra que te guste el contenido del blogs. Respecto al widget no sabría decirte donde hay que hacer la modificación para que consideré todas las entradas, pero puedes plantear tu pregunta en el blog del creador de este winget. Saludos!

Luis el 24 de noviembre de 2010, 18:23 dijo...

Que gran post muchisimas gracias amigo, habia encontrado esto en otros blogs pero no me habia funcionado.

Saludos y de nuevo gracias!

Administrador el 25 de noviembre de 2010, 3:46 dijo...

Hola Luis, me alegra saber que te has encontrado la solución en este blog. Por cierto me he pasado por tu blog es nuevo pero tienes artículos interesantes. Saludos!

Kata dijo...

Hola!!! Muchas gracias por esta info, me ha servido mucho.
Sin embargo, al terminar parece estar todo alineado a la derecha, incluso el título. ¿Cómo hago para centrarlo?
Gracias de antemano ^-^

Anónimo dijo...

gracias, esto me ha sido de mucha utilidad, muchas gracias................. es muy buen blog!!

Anónimo dijo...

hola, quisiera preguntar, se puede cambiar el titulo de color, (articulos relacionados), gracias............

Jose el 16 de abril de 2011, 19:37 dijo...

Hola hice los pasos como me diiste y no he podido, lo volvi a intentar y no me sale
¿que puedo hacer?

Blogroll el 19 de abril de 2011, 11:30 dijo...

Hola y muchas gracias por este widget pero mi pregunta es si se puede modificar para mostrar domas las imagenes? como articulos relacionados solo con imagenes?
Gracias y Saludos

Unknown el 15 de junio de 2011, 3:07 dijo...

Muchas gracias Eduardo, el post es algo antiguo pero me ha ido al pelo.

Aquí (StreoSoft) se puede ver en funcionamiento, he puesto un var maxresults=7; y lo dicho queda perfecto ni necesito cambiar el estilo ;)

Marta Cuesta el 12 de agosto de 2011, 14:33 dijo...

Hola, pues es la primera vez que visito tu blog y me gusta mucho, pero tengo un problema con esto de artículos relacionados con imágenes.

El primero que no me sale en el Inicio, si le doy a un artículo luego sí que me sale pero mostrándose todos los artículos no.

Lo segundo es si se puede cambiar el tamaño del título de Artículos Relacionas ya que lo encuentro excesivamente grande.

Muchísimas gracias de antemano.

Administrador el 3 de septiembre de 2011, 11:12 dijo...

Excelente muchas gracias por el código, me quedo muy bien. Lo único que no me sale el contorno gris como esta en la foto..

Saludos Cordiales!!
Juan

[»↘z¢↖єηн∂тσ∂σ«] el 8 de septiembre de 2011, 10:46 dijo...

no me srive este es mi blog y no se ven http://solowweextremotv.blogspot.com/

Quieres Comentar

Todos los comentarios están siendo leídos y moderados.

- Todos los comentarios deben ser relacionados con el artículo
- Serán borrados aquello comentarios que sean considerado SPAM
- Si quieren pedir ayuda,que no tenga nada que ver con el post, utilicen la página de Contacto
- Los comentarios serán publicados a la brevedad mínima posible

¿NO PUEDES COMENTAR?

¡Si no puedes ver la caja donde tienes que poner la palabras de verificación, has clic en donde dice "Verificación de palabras" y te saldrá la cajita donde tienes que ingresar la palabra!

NO TE OLVIDES DE RECOMENDAR PAZOSBLOGGER.COM A TUS AMIGOS

miércoles, 18 de noviembre de 2009

 

Ayuda para blog - Pazos Blogger Copyright 2010 | Template por:Brian Gardner | A Blogger por: Bloganol | Modificado y Diseñado por:Eduardo Sanguino