Mil Trucos Blogger

Posts Relacionados con miniaturas más grandes y efecto de opacidad

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

51 Comentarios

  1. Septiembre 15, 2012    

    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 😀

    • Septiembre 16, 2012    

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

  2. Septiembre 16, 2012    

    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.

    • Septiembre 16, 2012    

      No entiendo tu duda amigo 😕

    • Septiembre 16, 2012    

      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.

    • Septiembre 20, 2012    

      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…

    • Septiembre 20, 2012    

      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

    • Septiembre 21, 2012    

      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.

    • Septiembre 22, 2012    

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

  3. Anonymous Anonymous
    Septiembre 16, 2012    

    siii haslo porfas n-n

  4. Octubre 4, 2012    

    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

    • Octubre 4, 2012    

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

  5. Octubre 11, 2012    

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

    osea omitir una cierta etiqueta pero conservando el mismo sistema

    • Octubre 11, 2012    

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

    • Octubre 12, 2012    

      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”‘>

  6. Octubre 23, 2012    

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

    Espero respuesta,

    Gracias y saludos!

    • Octubre 23, 2012    

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

  7. Noviembre 3, 2012    

    muchísimas gracias

    • Noviembre 3, 2012    

      Gracias por comentar 😛

  8. Noviembre 4, 2012    

    Muy bueno juvinao, ya lo implemente y queda perfecto 😀

    • Noviembre 5, 2012    

      Abel me da mucho gusto que hayas utilizado este truco.

      Saludos.

  9. Noviembre 29, 2012    

    Hola amigo, como puedo centrar este gadget?

  10. Enero 16, 2013    

    Gracias me sirvió mucho 😀

  11. Anonymous Anonymous
    Enero 19, 2013    

    gracias compadre, el unico tutorial que realmente me sirbio

    • Enero 21, 2013    

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

  12. Enero 24, 2013    

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

  13. Febrero 16, 2013    

    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!

    • Febrero 17, 2013    

      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!

  14. Febrero 24, 2013    

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

    Ya lo puse en mi blog y fuciona maravillosamente

    Muchas gracias por compartirlo

    • Febrero 26, 2013    

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

      Saludos 😛

  15. Marzo 3, 2013    

    Gracias, muy útil

  16. Anonymous Anonymous
    Marzo 4, 2013    

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

    • Marzo 7, 2013    

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

    • Anonymous Anonymous
      Marzo 9, 2013    

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

    • Marzo 12, 2013    

      En que blog tienes ese problema 😕

  17. Abril 21, 2013    

    Muchas gracias por el truco, funciona perfectamente 🙂

  18. Junio 20, 2013    

    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.

  19. Julio 24, 2013    

    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!

  20. Noviembre 29, 2013    

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

  21. Enero 8, 2014    

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

  22. Febrero 19, 2014    

    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

  23. Febrero 23, 2014    

    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 *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo