Gadget de posts aleatorios (al azar) con imagen en miniatura

Bueno, hoy les enseñaré a colocar un sencillo gadget en nuestra sidebar que nos permitirá mostrar una lista de post al azar, pero con imágenes en miniatura, tal como pueden ver en la imagen.


1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Con ayuda de Ctrl+F buscamos ]]></b:skin>

3.§ Encima de ]]></b:skin> pegaremos:

#random-posts img{
float:left;
margin-right:10px;
border:1px solid #999;
background:#FFF;
width:36px;
height:36px;
padding:3px}

Las líneas que agregamos, son los estilos de la imagen en miniatura. Podemos modificar la ubicación, el color y grosor del borde, el ancho y alto de la imagen, etc.

4.§ Damos click a Guardar.

5.§ Ahora, vamos a Diseño - Añadir un gadget - HTML/Javascript.

6.§ Dentro del gadget pegaremos el siguiente script:

✵ Ver SCRIPT [+/-]

<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='Deshabilitados';
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){a=location.href;y=a.indexOf('?m=0');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)+"…";};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;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}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/AVvXsEgHdvkdVvpiedrKO5RgWZ1DiIj8bTFhmX9RuQI2E36GeF6ci2omvmaC3et-H_dta6TIssbLASGVlDiY0567l7OY5Ewwhqfhtq6TQoOg_x4g0H2MTVYH_zG40mRsPO0AOPpJFqFcp4uaUC4/s72/no-image%255B1%255D.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>

Como pueden ver, en el script hay tres valores resaltados en negrita que podemos modificar:

» var rdp_numposts=5; es el número de post a mostrar.
» var rdp_snippet_length=150; es el número de caracteres a mostrar.
» var rdp_info='yes'; son los datos que aparecen debajo del nombre del post (la fecha de publicación y el número de comentarios.

7.§ Damos click a Guardar y listo.

Visto en : E-seopro.com