Mil Trucos Blogger

Gadget de últimas entradas en miniatura para Blogger

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

Hola amigos de Mil Trucos Blogger, estos días he estado algo inactivo pero en el día de hoy voy a compartir un genial truco con ustedes, que nos llega desde la blogosfera malaya que de seguro compensará el tiempo que estuve fuera, se trata de un genial gadget que muestra las últimas entradas que se han publicado en nuestros blogs y muestras estas entradas en forma de una pequeña imagen en miniatura que al pasar el cursor por ella muestra el título de la entrada.

Gadget de últimas entradas en miniatura para Blogger

Gadget-de-ultimas-entradas-en-miniaturas-blogger

Para agregar este truco en tu blog solo debes ir a Plantilla, Editar HTML y agregar antes de la etiqueta </head>  lo siguiente:

<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>

 

Ahora antes de ]]></b:skin> agrega lo siguiente:

/* CSS Recent Post Gallery */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}

 

Ahora agrega en un gadget (HTML/JavaScript) lo siguiente:

<script>
var arlina_thumbs = 72; 
var arlina_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script>

 

Solo queda guardar los cambios y disfrutar de este genial gadget 🙂

0
Shares

Relacionados...

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

5 Comentarios

  1. krterw krterw
    Septiembre 25, 2015    

    Responsive ? no. Saludos

    • Juvinao Juvinao
      Septiembre 28, 2015    

      Hola amigo, hice las pruebas desde un blog con diseño responsive y este truco desde el móvil se ve muy bien 😉

      Saludos

  2. Noviembre 20, 2015    

    Juvinao, recientemente activé el protocolo HTTPS en mi blog, querría saber si existe la posibilidad de que las imágenes y URL’s de este código de últimas entradas en miniatura para Blogger comiencen en HTTPS y no en HTTP, ya que esto me quita la encriptación completa del blog.

    • Juvinao Juvinao
      Diciembre 5, 2015    

      Hola Nicolas, habría que probar pues la verdad no sé si funcione, cuando tenga algo adelantado te contesto.

      Saludos

  3. Enero 25, 2016    

    Muchas gracias por el tutorial. He conseguido dejar las imágenes más grandes y en una sola columna.

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