martes, 11 de noviembre de 2014

Como Agregar un gadget de posts al azar con imagen en miniatura

¿Buscas un gadget que muestre post aleatorios en tu blog?
¿Y que ademas muestre una imagen en miniatura?

Buscar como poner gadget de post al azar con imagen en miniatura a tu blog blogger bueno este es el tutorial que buscas muy sencillo y facil de instalar



para instalar el gadget vamos a :

Escritorio de Blogger > Diseño > Añadir un Gadget > HTML/JavaScript

Y pegamos el siguiente codigo en un HTML/JavaScript


<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/AVvXsEhaYigkKmFo4EWXlolzibzfAr-Lz5UwVbTzP1urbAADaDzVvGoQr9I7x6UBYhLfY-Pz35XzsZbaU7DRl7d8ncwGKyJVrVe_PPcJR4FAVWjcdWiuKUJrtSDubkIKPoNEreqTzO5oFWDwpfw/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 numero 5 en color rojo es la cantidad que post a mostrar en tu blog si quieres puedes modificarlo espero que les guste 

Blog de prueba : DEMO

Comparte este post con tus amigos!

...o tambien puedes seguir el blog en:

2 comentarios:

ewwew

gracias :D me sirvio y es lo que buscaba

ewwew

gracias :D me sirvio y es lo que buscaba

Comparte tu opinion con los demas, deja un comentario. ↓

Los comentarios no son moderados, sin embargo si contienen insultos o son ofensivos, pueden ser borrados.

 

©2011 Trucos Gadgets Para Blogger | FuuTheme diseñado por Fuutec | Ir arriba ↑