Gadget articles au hasard avec vignettes

Quand on a un blog avec une centaine d’articles ou plus, il est clair que nombreux sont ceux qui ont tendance à passer sous les radars des visiteurs venus explorer votre blog. Grâce au code de Duy Phamque je vais vous proposer ici, vous aurez la possibilité d’afficher sur votre blog une liste d’articles au hasard, histoire de faire remonter à la surface la partie cachée de l’iceberg.

Voici ce qu’il faut faire pour avoir sur votre blog le gadget qui affiche des articles de façon aléatoire :

1. Se connecter à Blogger. Aller sur “Modèle”, puis sur “Modifier le code HTML”

2. Trouver la balise ]]></b:skin> et ajouter la ligne suivante juste avant :

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

Enregistrer le modèle.

3. Aller sur “Mise en page” et ajouter un gadget HTML/Javascript et y insérer ce code

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Commentaires';
var rdp_disable='Commentaires fermés';
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)+"&#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;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/AVvXsEi_uTNHXosT3VhUCAWiIfG1B-PQQgX8oUsVXQ8mwEdxSfTIUJ8f-7c2eF0Bb48v2UrY1uEuUR5M5Hmw2TtYzWqvQtVVRZqaw1_H9gU231LbxrAnFfqwCAQ-Kx65qPvBumaAxCN14XGbb9xC/"}}};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>

Dans le code ci-haut, le 5 fait référence au nombre d’articles à afficher et le 150 au nomnbre des caractères du résumé. Vous pouvez changer ces valeurs. Laisser le "yes" si vous voulez afficher la date de publication de l'article et le nombre des commentaires. Au cas contraire, mettez "no" à la place du "yes".

Bon, maintenant vous savez quoi faire si vous voulez afficher de façon aléatoire une liste d'articles sur votre blog hébergé par Blogger.