16 mars 2012

Widget Articles Alétoires Avec Images Pour Blogger

Blogger Widget Random Posts
Ce Widget vous permet d'afficher une sélection de messages de votre blog d'une manière aléatoire et automatique.
Lorsque la page est actualisée ou que vous naviguez sur le blog, de nouveaux messages s'affichent aléatoirement dans le widget.









Comment Ajouter Le Widget Articles Aléatoires/Messages Au Hasard à Blogger


Rendez vous sur "Modèle" >> "Modifier le code HTML" >> "Traiter"
Recherchez (avec CTRL+F) la ligne suivante :
]]></b:skin>
et insérer ce code juste avant:
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px;}
#random-posts li{list-style-type:none;}
Allez maintenant à "Mise En Page" > "Ajouter un Gadget" > choisissez "HTML/JavaScript" et copier/coller le code suivant :
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comments';
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="http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/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>
var rdp_numposts=5 >> C'est le nombre d'articles à afficher;
Vous pouvez le modifier avec la valeur de votre choix.

14 commentaires:

  1. Bonjour
    Merci pour l'article !
    Est-il possible de faire apparaître également la 1ère image de l'article ?
    Merci :)

    RépondreSupprimer
  2. Bonjour ,
    Malheureusement l'ancien code ne fonctionne plus.
    J'ai fait les mises à jour nécessaires et vous trouverez ci-dessus comment ajouter le widget des articles aléatoires avec images.

    RépondreSupprimer
  3. C'est parfait, merci beaucoup :) J'ai repris le code et ai supprimé le petit "point" qui était sur la photo en enlevant les "< / li >"

    RépondreSupprimer
  4. Exactement ce que je cherchais : merci !

    RépondreSupprimer
  5. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  6. Bonjour

    Je viens d'installer ce widget mais il me bloque le blog

    Comment dois-je faire pour résoudre ce probleme ?

    merci d'avance

    RépondreSupprimer
  7. Bonjour ,
    Est-ce qu'il donne un message d'erreur ?
    Si oui, quel est le code de cet erreur ?
    à noter que j'ai testé ce widget sur plusieurs blogs et marche nickel.

    RépondreSupprimer
  8. Bonjour,

    Deja bravo pour le widget, mais je voudrais savoir si il était possible de changer la police des infos? et pouvoir affiché les articles par ordre de publication?

    Merci!

    RépondreSupprimer
  9. non je n ai aucun messages d'erreur mais seulement que ma page de blog bloque en gros l'onglet continue à chercher sans afficher mon blog en entier j ai un rond qui tourne sur l'onglet et c est tout
    au pire je peux vous autoriser à entre sur mon blog même s il n est qu en cours de fabrication pour que vous puissiez voir ce probleme vous même si vous le voulez merci de me confirmer pour vous y inviter en me donnant votre mail

    cordialement

    RépondreSupprimer
  10. Commencez par vider le cache et les cookies de votre navigateur et assurez-vous que votre accès soit bien http://www.blogger.com
    ou http://www.blogger.com/start?hl=fr
    et non pas http://draft.blogger.com
    cela résout le problème pour certain.

    RépondreSupprimer
  11. @Huynh Tri

    Bonjour,
    pour changer la police ajoutez le code suivant juste avant la ligne #random-posts img

    #random-posts{font-family:NOM(s)_DE_POLICE; font-size:TAILLE-DE-POLICE-EN-PX;}

    vous pouvez ajouter un ou plusieurs noms de police séparés par une ",".

    concernant l'ordre de l'affichage, essayez d'ajouter &orderby=published juste après alt=json-in-script
    je pense que ca va marché mais j'en suis pas sûr.

    RépondreSupprimer
  12. Mes articles sont soit des images, soit des vidéos.
    Pour les images c'est nickel : titre avec l'image en miniature.
    Par contre pour les vidéos il n'y a rien même pas la 1ère image de la vidéo ou une image au hasard de la vidéo.
    Je ne désire pas choisir une image, n'importe laquelle dans la vidéo fera l'affaire.
    Je veux juste éviter l'image grise et toute moche marquer "no image yet"
    Comment cela serait il possible ?

    RépondreSupprimer
  13. Merci beaucoup il fonctionne super bien
    bonne soiree

    RépondreSupprimer