Mil Trucos Blogger

Gadget de posts al azar con imagen en miniatura y resumen

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

En otra oportunidad ya había publicado una entrada con un gadget de post o entradas al azar pero aquel era muy limitado pues solo mostraba el titulo del blog, en cambio el gadget del día de hoy muestra una imagen en miniatura así como también un pequeño resumen o fragmento del post.

Gadget de posts al azar con imagen en miniatura y resumen

El gadget se ve de la siguiente manera:

Gadget de posts al azar con imagen en miniatura y resumen
Para agregar este gadget a tu blog, debes ir a Diseño, Añadir gadget, HTML/JavaScript y pegar allí lo siguiente:
<style>
#random-posts img{border-radius: 10px;float:left;margin-right:5px;
width:75px;height:75px;background-color: #F5F5F5;padding: 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 12px;text-transform:uppercase; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; padding: 4px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=110;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"></script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'> 
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"></script>')};
</script>
</ul>

Ahora solo debes guardar los cambios.

A continuación se muestran algunos aspectos que puedes personalizar de este gadget.

width:75px;height:75px Son para configurar el tamaño de la imagen en miniatura que muestra el gadget.
width:75px;height:75px Son para configurar el número de posts a mostrar.
var rdp_snippet_length=110; Son para configurar el número de caracteres a mostrar en el resumen.

Espero que les haya gustado este tutorial y no olviden compartir este post con tus amigos en tus redes sociales.

0
Shares

Relacionados...

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

20 Comentarios

  1. agosto 4, 2014    

    muy bueno el gadget y para cuando el el de mostrar emoricones

    • Anonymous Anonymous
      agosto 4, 2014    

      para kuando dejes de ser virgen, osea nunka :ng

      • agosto 8, 2014    

        Amigo anónimo un poco más de respeto por los usuarios por favor 🙂

        Saludos

        • agosto 26, 2014    

          No tiene nada que ver con esto, pero el title=”” del botón Responder dice ‘Balas’, está en indonesio esta plantilla! 😀

          • agosto 27, 2014    

            Si señor, se me había escapado traducir esa parte 😉

            Saludos

    • agosto 8, 2014    

      Amigo ya he publicado varios trucos de emoticones para Blogger, dime cual quieres 😉

      Saludos

  2. JLO JLO
    agosto 4, 2014    

    gracias, quedó espectacular…

  3. agosto 12, 2014    

    Este comentario ha sido eliminado por el autor.

  4. octubre 15, 2014    

    Gracias por el código!
    una consulta, y si quiero eliminar la línea de la fecha y el número de comentarios ?
    cómo lograría eso?
    Excelente blog!
    sl2

  5. diciembre 15, 2014    

    yo estoy buscando este código pero necesito que sean de etiquetas especificas, no al azar… tengo un gadget de feeds pero no me pone miniatura ese…

    • diciembre 17, 2014    

      Amigo este truco ya existe de hecho yo lo uso acá en el sitio, déjame ver que puedo hacer para publicar la entrada.

      Saludos

  6. enero 5, 2015    

    Gracias por la idea.
    Ya la puse en práctica.

  7. marzo 6, 2015    

    por que me dice: NO IMAGE AVAILABLE… [-(

    • marzo 6, 2015    

      Porque seguro la imagen que tienes en el post no la subiste a Blogger sino a otro servidor.

  8. abril 5, 2015    

    ¡Hola! Disculpa, ¿existiría un gadget como este que en vez de dar entradas de solo el blog donde es publicado, pueda mostrar entradas de otros blogs?
    ¡Gracias por el aporte!

    • abril 6, 2015    

      Hola Ilsa, quieres que el gadget muestre los últimos posts de esos blogs?

      • mayo 30, 2015    

        Si. Básicamente que permita ver las últimas entradas de otros sitios web.

        • Juvinao Juvinao
          junio 8, 2015    

          Hola IIsa eso se puede hacer mediante el feed del blog que quieres mostrar los posts, si quieres con gusto puedo hacer un tutorial 😉

          Saludos

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