Comment ajouter un gadget articles au hasard avec image

Quand on a trop d’articles dans votre blog, il est plus sympa de voir des articles anciens et aléatoires pour les visiteurs venus explorer votre blog donc plus de pages vues.


Grâce au code de Duy Pham que je vais vous proposer ci-dessous, vous aurez la possibilité d’afficher sur votre blog une liste d’articles au hasard...

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/AVvXsEgfwmi_4PJwg-AyiA8o62HEgkAqLo3PjrC4KZQBQUA9zDVIAQCATzzQrJTSrAHgDfFGWuf5es8Vyg2yGMTBmYHX306SE3uGwvjWcMruxxbapAE7NFbkGSErBjhC0E7OERhS1uziKXX33X8r/"}}};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-dessus :
- Le 5 fait référence au nombre d’articles à afficher
- Le 150 au nombre 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 maintenant.