Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Artículos relacionados con imagen en tu blog

Hace tiempo aprendimos a poner el truco de artículos relacionados en el blog y posteriormente vimos la forma de instalar los artículos relacionados por categorías.

Esta vez te traigo un nuevo truco con el que podrás mostrar las entradas relacionadas de tu blog junto a una captura de imagen (que contiene el artículo)...


Entradas relacionadas con miniatura de imagen, artículos relacionados con imagen en tu blog



Puedes ver el resultado del truco en este blog de pruebas.

Diseño>Edición de HTML>expandimos artilugios




Busca la etiqueta </head> y añade este script encima:

<script type='text/javascript'>//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAMZIQi2FtG6QZw-JCuAgBmQajsVN52mdHm3pfeSS-Pbw0kBf10_8-0Qje2FPsPOQ7PxG5rbJYKBATs2r_J44O7HDjiK1iI7lNfUdrdAp1DVOo5XRuWIf5Dn5G36K1v0mWP3VtBrXHSKh0/s320/blnoimg.png';}
if(relatedTitles[relatedTitlesNum].length>44) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 44)+"..."; 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('<h4>'+relatedpoststitle+'</h4>'); document.write('<div style="clear: both;"/>'); while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:4px;float:left;');
if(i!=0) document.write('border-left: solid 0.5px #6ecf59;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:108px;height:76px;border:0px;" src="'+thumburl[r]+'"/><br/><div id="related-titles">'+relatedTitles[r]+'</div></a>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</div>'); }
//]]></script>


Ahora busca la etiqueta ]]></b:skin> e inserta estos bloques de CSS encima:

#related-posts{
border: 1px solid #6ecf59;
overflow:hidden;
min-height:100%;
margin-top: 40px;
margin-bottom: 20px;
text-transform:none;
height:100%;
padding:0;
}
#related-posts h4 {
background:none repeat scroll 0 0 #D7F5D1;
border-bottom:1px solid #6ECF59;
margin:0 0;
padding:6px;
color:#333333;
font-family:Trebuchet MS,Arial,sans-serif;
font-size:14px;
font-weight:normal;
}
#related-titles{
width:114px;
height:78px;
text-align:left border:none;
padding-left:2px;
font-size:90%;
line-height:normal;
font-weight:700;
color: #315d28;
margin:4px 0 0;}

#related-posts a{color:#333;}
#related-posts a:hover{color:#333;background-color: #c3f4b9;}

Por último busca esta línea en tu plantilla:
<p class='post-footer-line post-footer-line-1'>

En caso de no encontrarla, busca esta otra:

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

Y agrega este código justo debajo:

<!-- bl_Articulos relacionados -->
<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 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;Te puede interesar...&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- bl_Fin Articulos relacionados -->

Selecciona la cantidad de entradas relacionadas con imagen a mostrar en la línea que ves en verde, reemplazando la cifra 4 por cualquier otra.

La frase que he marcado en naranja es el título que llevará el recuadro y puede sustituirse por cualquier otra cosa.

Guarda la plantilla para terminar:




Nota:

- Para reducir el tamaño de las casillas que recogen cada entrada relacionada, observa esta imagen y edita lo que ves en color rojo.

- Si deseas editar el gadget (colores, fondos, tamaños...) y no sabes como hacerlo, deja un comentario para que pueda ayudarte.


Referencias: Blogger Plugins

Maria Pilar-COCINICA dice...

Acabo de escribirte una Epístola y se me ha ido al carajo, llevo una tarde que me Va a estallar la cabeza.

Llego recomendada por Ana de Viento y Bambú, Porque tengo un problema, bueno dos, tengo un blog "ANDANZAS demás y" que no puedo hacer La función de copia y pega y claro después de haber preparado la entrada en Word la he tenido que transcribir y la segunda es que este blog no lo tengo en una cuenta de google y me gustaría cambiarlo.

Llevo toda la tarde para la entrada dichosa e estas pegas y la cabeza me va a estallar.

He cambiado de ordenador y no se si tengo algo desbaratado.

Mi dirección de correo google es pilarmarta8@gmail.com
y
mparbues@naointernet.com

en esta dirección es donde tengo el blog.

Si me puedes ayudar te lo agradeceré infinitamente.

Saludos

María Pilar

SN.Systems dice...

Hola, Jaime que tal, bueno me intereso mucho este truco, lo aplique ami blog, pero por la editada de colores no ahy problema lo se editar perfectamente, el problema es que solamente se visualiza una linea, no aparecen las entradas relacionadas, dime que tengo que hacer para poder visualizarla correctamente, intente tener activada la casilla de "mostrar etiquetas", pero no me funciono, y si tengo entradas, y cada una de ellas tienes su respetiva etiqueta o ¿probablemente sea el tipo de platilla que manejo?.

Muchas Gracias. Saludos ... :D

Jaime Trujillo Escobedo dice...

Hola María Pilar, antes de nada voy a decirte que no debes ponerte nerviosa, todo tiene una solución.

El problema del "copia y pega" parece más un cambio en la configuración del teclado / ratón.

¿Copia cualquier otra cosa? Es decir, ¿Puedes copiar el texto de un documento de word al bloc de notas?

Para mudar el blog de una cuenta a otra haz lo siguiente:

1) Inicia sesión en blogger con la cuenta en la que tienes el blog que deseas "mudar".

2) Una vez dentro dirígete a Configuración y después entra en el apartado "Permisos".

3) Escribe la dirección de correo (gmail) que usas en tu otra cuenta y pulsa el botón "Invitar".

4) Cierra sesión en blogger.

5) Accede a tu correo (Google Mail) para aceptar la invitación que te has enviado.

6) Seguidamente, inicia sesión en blogger con la cuenta de gmail.

7) Comprueba que aparece el blog en tu escritorio. Ahora cierra sesión.

8) Vuelve a blogger e inicia sesión de nuevo con tu antigua cuenta (mparbues@naointernet.com).

9) Ve a Configuración y después entra en el apartado "Permisos". Haz clic en el enlace que dice otorgar privilegios de administrador y que encontrarás a la derecha de tu otra cuenta.

10) Cierra sesión con esa cuenta e inicia sesión con la de gmail para poder ver el blog en tu nuevo escritorio ;).

Jaime Trujillo Escobedo dice...

Mr. JDN, ¿podrías decirme la dirección de tu blog? Así podré darle un vistazo. De todas formas, puede deberse a que en las etiquetas de tus entradas no tengas un número superior a 3 posts y por tanto, no se muestran artículos relacionados.

Ŵebmaster™ dice...

Jaime, excelente se ve ese truco, pero en mi plantilla no encuentro...

< d i v class='post-footer-line post-footer-line-1'>

< p c l a s s='post-footer-line post-footer-line-1'>

Puedes darme una mano con eso?

Gracias nuevamente

Jaime Trujillo Escobedo dice...

Ŵebmaster™, prueba a añadirlo justo después de la etiqueta <data:post.body/> e ignora las citadas en la entrada ;).

Ŵebmaster™ dice...

Jaime, definitivamente excelente! ya funciona a la perfeccion debajo del data:post.body :)

Jaime Trujillo Escobedo dice...

Me alegro mucho de que por fin hayas conseguido instalar el truco de artículos relacionados, Ŵebmaster™.

Ya veo lo bien que te quedó ;).

David Zuñiga dice...

ok, el truco si me funciono pero como le hago para centrar el cuadro que encierra las entradas.. y ha decir verdad quiero centrar todo pero no se como.... me ayudan

Jaime Trujillo Escobedo dice...

Nelson David Veliz Zuñiga, para ello edita el siguiente bloque como te muestro a continuación:

#related-titles {
color:#315D28;
font-size:90%;
font-weight:700;
height:78px;
line-height:normal;
margin:4px 0 0;
padding-left:32px;
width:114px;
}

Incluye el valor que ves en negrita y listo ;).

Martin dice...

Hola jaime he instalado este truco en mi blog http://musica-cristiana-videos-gratis.blogspot.com/ y quiero personalizarlo un poco. QUIERO QUE ME MUESTRE 4 ENTRADAS RELACIONADAS, PERO NO SE PUEDE DEBIDO A LO ANGOSTO DEL "MENU", ¿como hago para reducir espacio en las entradas relacionadas?

Jaime Trujillo Escobedo dice...

Hola Martín. Lo que pides ya está resuelto. En la entrada, en la sección "Notas" encontrarás un enlace a una imagen en la que explico la forma de reducir el espacio.

馬丁 dice...

Hola Jaime creo que esta es la primera vez que dejo un comentario :P realmente quedé impactadísimo con este post, ya que lo estaba buscando desde hace muuuuuuuuchoooooo tiempo.
Pero te quería hacer una pregunta al respecto porque quisiera colocar este mísmo cuadro pero que quede transparente, es decir que no se le vean los bordes verdes ni nada, que solamente quede el título de "Quizás te intrese" las imágenes abajo y el titulo de las imágenes pero sin que se vea el cuadro.
Eso ¿¿¿podría ser posible??? de ser posible por favor solicitaría tu gran ayuda.
Desde ya estoy hiper agradecidísimo por este gran post que tanto buscaba, espero tu respuesta hasta prontoooo!!!!

馬丁 dice...

Se me olvidó comentarte que por otro lado no pude encontrar las dos opciones de códigos que colocastes casi al final del post donde dice:

Por último busca esta línea en tu plantilla:
........(puse puntos porque no me deja colocar el código)

En caso de no encontrarla, busca esta otra:
........

y no se como seguir :((

馬丁 dice...

perdón por la molestia pero ya solucioné todo muchas gracias de todas formas Jaime!!!

Jaime Trujillo Escobedo dice...

馬丁, no hay absolutamente nada que perdonar ;). Es un gusto tenerte por aquí por lo que si necesitas cualquier otra cosa no dudes en preguntarme.

¡Abrazos!

Angel Canales dice...

Hola Jaime.. gusto saludarte :p, tengo una pregunta respecto a este truco.. habria forma de quitarle el texto?
Quisiera que solo quedara la imagen. Gracias..

Jaime Trujillo Escobedo dice...

Por supuesto, Angel Canales. En el bloque CSS que empieza con #related-titles{ edita la línea color: #315d28; de manera que obtengas color: transparent;.

Si no funciona avísame y te daré otra solución.

Saludos!

kora_jr63medina dice...

hola Jaime trate de intalar pero no funcion en mi Blog segun yo, segi los pasos al pie de la letra. Habre hecho algo mal?
gracias por tu apoyo

Jaime Trujillo Escobedo dice...

Korajr63medina, ¿En qué blog intentaste agregar el truco? ¿Aparece algo relaccionado con el widget (bordes o fondo) en las páginas de entradas individuales?

ALF dice...

Había visto varias formas de crear enlaces relacionados pero ésta se lleva el premio. Me ha costado encontrar tu blog, es una mina de oro de recursos!!

Muchas gracias :-)

Jaime Trujillo Escobedo dice...

Muy agradable tu comentario, Fluff. Estoy encantado de tenerte por El Balcón. El artilugio ha quedado perfecto con esos bordes rosados.

teofermi dice...

Hola Jaime, hacia un monton de tiempo que buscaba una entrada como la tuya, he probado infinidad de ellas pero ninguna me funcionaba porque ademas tengo instalado el artilujio ese que lee los articulos y en todas las veces que lo he puesto en mi blog me daba error, leia todo y parte de la plantilla tambien jajjaa, asi que no tenia buenos resultados eso de los articulos relacionados, pero con el tuyo es diferente, hasta ahora no me ha dado ningun error y ademas lo he personalizado a mi gusto, asi que ya eres mi idolo y genio personal, me ha quedado para mi gusto...estupendo pero queria preguntarte una cosilla, no se como acortar la linea de encima de los recuadros, me gustaria que quedara justo donde terminan los cuadraditos de las miniaturas, ¿es posible y donde debo modificarlo? ya con la personalizacion he quedado mueeeeerta jajjajjaja
espero tu inestimable ayuda

besos de teo

Jaime Trujillo Escobedo dice...

¡Hola teofermi! Estaré encantado de ayudarte pero necesito que instales el truco. He accedido a tu blog ('teofermi1.blogsp...') pero no pude localizar el marco que contiene los posts relacionados.

Muchísimas gracias por tales palabras escritas, me hacen sentir de maravilla.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo