En esta oportunidad les voy a compartir un truco que estoy seguro les va a encantar y es otra forma de posts relacionados con imagenes en miniatura más grandes y efecto de opacidad al pasar el cursor sobre ellas.

Para agregar este truco a tu blog sigue los siguientes pasos:

1.  Agrega el siguiente script antes de  </head> 

<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="http://imgclasificados3.emol.com/78987370_0/imagen_no_disponible.gif";showRandomImg=true;aBold=true;summaryPost=200;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="200" height="250" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';document.write(trtd);j++}document.write('</ul>')}function showrecentposts5(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var trtd='<li id="nav-post-'+i+'" class="ui-tabs-nav-item"><a href="#post-'+i+'"><img width="100" height="69" src="'+img[i]+'"/><span>'+posttitle+'</span></a></li>';document.write(trtd);j++}}function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="maskolis_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}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.gform_foot.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://imgclasificados3.emol.com/78987370_0/imagen_no_disponible.gif'}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);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h1>'+relatedpoststitle+'</h1>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 10px 10px 0;float:left;background:#e6e6e6 url(http://4.bp.blogspot.com/-PE4DGGi62Rc/UAV05DVyMbI/AAAAAAAAHrQ/acf9emv3Od4/s1600/bar-bg2.png) repeat-x top;border:1px solid #c9c9c9;');if(i!=0)document.write('background:#e6e6e6 url(http://4.bp.blogspot.com/-PE4DGGi62Rc/UAV05DVyMbI/AAAAAAAAHrQ/acf9emv3Od4/s1600/bar-bg2.png) repeat-x top;border:1px solid #c9c9c9;"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="width:132px;padding:0 10px;color:#333;height:35px;text-align:center;margin:0px 0px; font:14px PT Sans Narrow; line-height:16px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>

2.  Ahora agrega el siguiente CSS antes de  ]]></b:skin> 

#related-posts{float:left;width:105%;}
#related-posts h1{background:none;color:#173b3c;font:16px Oswald;padding:3px;text-shadow:0 1px 1px white}
#related-posts .maskolis_img {border:4px solid #999;padding:0px 0px;width:132px;height:165px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;margin:10px 8px 5px}
#related-posts .maskolis_img:hover{opacity:.8;filter:alpha(opacity=80);-moz-opacity:.7;-khtml-opacity:.7}

3.  Por ultimo pega el siguiente codigo debajo de <div class=’post-footer-line post-footer-line-3′>

<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=12&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;<b>Otros Post Interesantes</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>

El numero 6 resaltado en azul corresponde a las entradas que se van a mostrar.

Por ultimo guarda los cambios.

Categorías: Trucos Blogger

51 commentarios

Enzo Zapata · septiembre 15, 2012 a las 11:14 pm

No podes hacer un tutorial para poner las entradas de esa forma también?
Así como es común ver en sitios de películas por ejemplo…

Muchas gracias 😀

    Juvinao · septiembre 16, 2012 a las 6:05 pm

    Enzo tu quieres las entradas tipo magazine cierto?, si es asi ya hay varios tutoriales en la red pero si quieres hago uno. 😎

VacilandoUnRap · septiembre 16, 2012 a las 4:25 am

como le ago para que no me muestre solo las entradas de una etiqueta sino que todas las entradas de un blog completo, porfavor, saludos.

    Juvinao · septiembre 16, 2012 a las 6:06 pm

    No entiendo tu duda amigo 😕

    VacilandoUnRap · septiembre 16, 2012 a las 7:47 pm

    Como aplico este mismo truco en mi blog pero que ME MUESTRE LAS ULTIMAS ENTRADAS DEL BLOG, no de una sola etiqueta si no que de LAS ULTIMAS ENTRADAS, saludos.

    VacilandoUnRap · septiembre 20, 2012 a las 5:04 am

    Puedes responderme porfavor? si no entendiste la pregunta si gustas puedo redactartela mejor… un saludo, me interesa mucho este truco porque tengo uan gran idea para esto…

    Juvinao · septiembre 20, 2012 a las 7:56 pm

    Mira aqui te dejo el link de una entrada donde explico como agregar un gadget de ultimas entradas,revisalo.

    http://www.miltrucosblogger.info/2012/05/gadget-de-posts-recientes-con-imagenes.html

    VacilandoUnRap · septiembre 21, 2012 a las 11:38 pm

    mmm, no, no me refería a eso sino que mostrar las ultimas entradas recientes pero con ESTE ESTILO, con el estilo de las entradas de este post, saludos y por cierto, yo no soy el usuario de abajo anónimo.

    Juvinao · septiembre 22, 2012 a las 4:29 pm

    Toca revisar el CSS y mirar que se puede retocar para que aparezca de esta forma :cold:

Anonymous · septiembre 16, 2012 a las 8:38 am

siii haslo porfas n-n

Alma de Adra · octubre 4, 2012 a las 11:18 am

Hola, gracias porque se parece mucho a lo que estaba buscando :), lo he instalado y va estupendamente y lo he personalizado un poco en el css… me gustaría saber si el fondo gris se podría eliminar, es decir, que sólo queden los bordes y el fondo transparente o blanco, en mi caso.

Y muchas gracias otra vez.

Un saludo

    Juvinao · octubre 4, 2012 a las 8:06 pm

    Alma por ahora solo he podido el borde gris cuando logre eliminar todo te respondo de nuevo ok 😛

LykaiosSD · octubre 11, 2012 a las 4:51 am

hola buenas ^^
disculpa, es posible ponerle una excepción a una etiqueta en especifico?

osea omitir una cierta etiqueta pero conservando el mismo sistema

    Juvinao · octubre 11, 2012 a las 8:53 pm

    LykaiosSD la unica condicion para que el truco funcione es añadir una sola etiqueta a la entrada 😎

    LykaiosSD · octubre 12, 2012 a las 8:53 am

    jeje bueno por ahí iba la cosa, es que lo que quería era omitir una sola etiqueta, para los aportes que necesitaba viene una etiqueta genérica (osea para todos los aportes) y otra única para cada uno, me interesaba que pasara de largo solo esa etiqueta en particular sin la necesidad de quitarla ya que ambas me sirven mucho, menos para esto xD

    eso si, muchas gracias por acercar este widget, está muy bueno y estético

    pero bueno, creo que lo pude arreglar agregando un
    <b:if cond=’data:label.name != «ETIQUETA-OMITIDA»‘>

Esencia de Fútbol · octubre 23, 2012 a las 11:03 am

No me sale!!! Puede ser como comentan, porque en mis posts hay varias etiquetas? Dejo solo una?

Espero respuesta,

Gracias y saludos!

    Juvinao · octubre 23, 2012 a las 4:43 pm

    Amigo no importa el numero de etiquetas que tengas el truco debe funcionar, al menos que en esas etiquetas no hayan mas posts archivados.

aaron marquez · noviembre 3, 2012 a las 3:01 am

muchísimas gracias

Abel Nightroad · noviembre 4, 2012 a las 7:55 pm

Muy bueno juvinao, ya lo implemente y queda perfecto 😀

    Juvinao · noviembre 5, 2012 a las 9:36 pm

    Abel me da mucho gusto que hayas utilizado este truco.

    Saludos.

Juan David Romero · noviembre 29, 2012 a las 8:55 pm

Hola amigo, como puedo centrar este gadget?

Pablo626 · enero 16, 2013 a las 1:41 pm

Gracias me sirvió mucho 😀

Anonymous · enero 19, 2013 a las 6:44 am

gracias compadre, el unico tutorial que realmente me sirbio

    Hayder Juvinao · enero 21, 2013 a las 9:08 pm

    De nada amigo, ya sabes que estamos para ayudarte en lo que necesites.

DooMsDay DooMs · enero 24, 2013 a las 8:22 pm

quien me podria ayudar segui los pasos y no me aparesen en mi blog???

Miguel López Dávila · febrero 16, 2013 a las 4:42 pm

Gracias mi estimado, todo me resulto muy bien pero a pesar de ello cuento con un percance… quisiera saber como le cambio la «imagen no disponible» que sale cuando se publica un post sin imagen, por una predeterminada o una mía. Te agradecería puedas ayudarme.
Cualquier cosa mi correo es: shiniggami@hotmail.com

Suerte y éxitos!

    Alberto Franco · febrero 17, 2013 a las 1:35 pm

    Lo de la imagen no disponible es porque no tendras puestas etiquetas en tus entradas para que te salgan las imagenes tambien debes poner una foto en tu entrada para que te salga en ete truco. Es decir debes poner en una entrada la etiqueta por ejemplo «juegos» y en esa entrada una imagen de un mando de play station por ejemplo y cuando tengas muchas entradas con la etiqueta juegos ya te saldra en otros post interesantes las imagenes de las entradas con la etiqueta juegos.

    Espero averte ayudadoc ualquier duda o problema ya sabes 🙂

    Un saludo!

BdeBourak · febrero 24, 2013 a las 7:51 pm

¡¡¡Fantástico!!! justo lo que estaba buscando.

Ya lo puse en mi blog y fuciona maravillosamente

Muchas gracias por compartirlo

    Hayder Juvinao · febrero 26, 2013 a las 7:06 pm

    Gracias por tu comentario amigo, que bueno que te haya funcionado

    Saludos 😛

Medidor de ec · marzo 3, 2013 a las 4:47 pm

Gracias, muy útil

Anonymous · marzo 4, 2013 a las 2:55 am

por lo menos di donde tener q centrarlo y da el codigo exacto eh intentando centrarlo y no puedo!!

    Hayder Juvinao · marzo 7, 2013 a las 8:39 pm

    Pero amigo no hay que centrar nada, el truco se acomoda al ancho de tu blog 😉

    Anonymous · marzo 9, 2013 a las 9:41 pm

    cuando puse estos post relacionados no se acomodo al centro sino a la izquierda por eso pido ayuda.

    Hayder Juvinao · marzo 12, 2013 a las 4:59 pm

    En que blog tienes ese problema 😕

Jhonathan Chiriguaya · abril 21, 2013 a las 12:27 am

Muchas gracias por el truco, funciona perfectamente 🙂

Ginsou · junio 20, 2013 a las 3:45 am

Disculpen me pueden ayudar quiero poner este truco pero no me sale esta parte en mi plantilla.

-div class=’post-footer-line post-footer-line-3′-

solo tengo hasta el -div class=’post-footer-line post-footer-line-2′-

(obien los guiones los pongo porq no deja comentar en HTML)
Espero su ayuda. Gracias este y otros trucos.

Jhonny Silva · julio 24, 2013 a las 6:29 am

Amigo, ¿Que tal? He intentado colocar estas entradas y no he podido, creo que es por mi plantilla, me gustaría que me pudieras ayudar con un poco de asesoria.

¡Saludos!

jo cansur · noviembre 29, 2013 a las 1:22 am

Hola… es posible colocar «posts relacionados» pero como gadget… por ejemplo: colocarlo en la sidebar.

Walther David Cruz · enero 8, 2014 a las 8:56 pm

no funciona amigo y lo tengo instalado en mi blog puedes checar por favor te lo agradecere mucho http://2pelis.com

Luis Reyes · febrero 19, 2014 a las 5:49 pm

Gracias por el truco amigo pero no se como arreglar las imágenes me salen demasiado grandes ya busque y busque y no se como arreglarlas te agradezco tu ayuda espero una respuesta de tu parte te dejo mi blogs para que lo revises……http://peliculasmkvjuegospcseriestv.blogspot.com/ y me digas que problema puedo tener

Liricista En el tejado · febrero 23, 2014 a las 3:23 am

Muchas gracias, ¿cómo puedo ajustar el tamaño de estas?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *