miércoles, 27 de marzo de 2013


Tutorial: Como poner gadget de posts al azar con imagen en miniatura

¡Comparte el tutorial!
¿Buscas un gadget que muestre post aleatorios en tu blog?
¿Y que ademas muestre una imagen en miniatura?


Entonces este tutorial es para ti.

Dificultad:

Fácil

Paso 1:

Vamos a
Escritorio de Blogger > Diseño > Añadir un Gadget > HTML/JavaScript
Y pegamos esto:
<style type="text/css">
 #random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:70px;height:70px;padding:3px}
</style>
<ul id='random-posts'>
    <script type='text/javaScript'>
    var rdp_numposts=5;
    var rdp_snippet_length=150;
    var rdp_info='yes';
    var rdp_comment='Comentarios';
    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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpWmWrWyokDY_T5NAc0q7PtEdeZ1W4dW4rpL4tet6jKx1ZpnYrYXDMmpsKdrHq014fOUHUfnOoPyDQIAYVbTNmPjvSOeHAnl9gIN9FVqmmtvJJBHHbgU8auUW-o1JPEbdXcP1pyMTpJ5M/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<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>
El valor marcado en rojo es la cantidad de post a mostrar, si quieres mostrar menos o mas post entonces cambia ese valor.

Puedes ver el gadget funcionando en este blog de pruebas.


Fin del tutorial
Ayúdanos compartiendo esto
WhatsApp

En este momento hay comentario(s) sobre Tutorial: Como poner gadget de posts al azar con imagen en miniatura.


En este momento hay 7 comentarios sobre Tutorial: Como poner gadget de posts al azar con imagen en miniatura.
  1. Hola
    si quisiera poner una lista pero que no fuera aleatoria, que fuera los post destacados o los más tweeteados por ejemplo ¿cómo lo podría hacer?

    gracias
    Mariona

    ResponderBorrar
  2. era justo lo que buscaba gracias vere que mas tienes para mi XDXD

    ResponderBorrar
  3. El código se vuelve inestable en Blogger. Sobretodo cuando toca hacer ajustes en el HTML.

    ResponderBorrar
  4. Asi pero que sea dinámico?, existe la posibilidad?

    ResponderBorrar
  5. hola amigo tendras como colocar el gadget similar a "Lo mas nuevo en Tu Tutoriales" aca de tu pagina, saludos

    ResponderBorrar
    Respuestas
    1. me llamo luisa no se como ponerlo aca pero me sumo a esta peticion gracias

      Borrar

 
Este sitio utiliza cookies propias y de terceros, éstas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar diversos análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. ACEPTO Más información.