Comment ajouter un gadget articles au hasard avec image



gadget avec des images 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.

15 Commentaires

Laisser un commentaire

  1. 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
  2. @Nevinyrral Disk :

    Bonjour,

    pour remplaçer l'image qui apparait quand dans l'article il n'y a pas d'image ou photo.

    Il faut remplacer dans le code HTML en haut cette URL : http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png

    Par une autre URL (image logo de votre site ou autre image )

    RépondreSupprimer
  3. Je vous remercie pour votre réponse.
    Je pose souvent des questions sur des sites du genre de celui -ci, et l'on ne me réponds JAMAIS (1ère fois ici).
    Voilà pourquoi je fus long à consulter votre réponse.
    Ce que vous proposez est déjà un peu mieux, l'image grise disparait.
    Mais serait il possible qu'apparaisse non pas une image choisie comme le logo de mon site, mais une image, au hasard ou pas, de la vidéo du post ?

    RépondreSupprimer
  4. @Nevinyrral Disk :

    Bonjour,

    Désolé mais le gadget "article au hasard" ne récupéré pas l'image d'une vidéo dans un article.

    Il cherche une image dans l'article pour la faire apparaitre et si dans l'article il n'y a pas d'image alors il fait apparaitre l'image dans le code comme expliquer plus haut.

    Le meilleur moyen pour toi et de mettre une image avec un fond bland et un triangle logo video.

    cdt

    RépondreSupprimer
  5. @Nevinyrral Disk : une autre solution je te conseille de choisir c'est deux template pour ton blog si tu n'a que des video sans image

    http://www.leblogger.fr/2013/10/blogger-template-video-cinema-modele.html

    http://www.leblogger.fr/2013/10/blogger-template-youtube-modele-blogger.html

    RépondreSupprimer
  6. Bonjour, c'est re-moi :)
    Merci pour tes deux réponses, surtout la 2ème.
    Les deux templates que tu m'as proposé me plaise néanmoins je n'arrive pas vraiment à les modifier dans personnaliser modèle ( possible pour quelques modifications mineures).
    Est ce normal ?
    Par ailleurs plus grave, ces deux templates me font bugger l'ordi.
    Le script plante toujours et je suis obliger de couper le navigateur (mozilla).
    Impossible de naviguer dans le blog
    Comment résoudre cela ?
    Ma question principale :
    Est possible de modifier les templates que tu m'as proposer si oui, comment ?
    Sinon puis je éditer moi même le template pour ainsi pouvoir le modifier.
    N'étant pas un grand informaticien je me disais que c'était peut être possible en partant du "code HTML"
    de l'un des deux.

    RépondreSupprimer
  7. @Nevinyrral Disk : Salut biensure que tu peut modifier le template il faut aller sur ton tableau de bord - Modéle - Modifier le code HTML. Je te conseille d'enregistrer ton modéle avant de le modifier.

    Et pour le bug de ton navigateur ca doit étre un de tes gadget en plus qui fais bug .......

    RépondreSupprimer
    Réponses
    1. Salut ,je sais que ce n'est pas la section pour cette question mais j'ai cherché un sujet qui correspond, sans succès.
      Je sais comment faire disparaitre le pied de page (message plus ancien, home, message plus récent).
      Mais j'en ai trouvé un sympa qui me plait avec une numérotation de pages.
      J'ai réussi à l'ajouter.

      Tous mes messages ont un libellé portant leurs propres titres, ils sont ensuite rangés dans un gadget libellé à droite et sont donc tous répertoriés sur la page principale (sur ce gadget un libellé = un seul message).
      J'ai aussi un gadget libellé à gauche avec de vrais libellés (plus qu'un message par libellé).

      Ce que je voudrait c'est que le pied de page n'apparaisse pas sur la page d'accueil.
      Mais qu'il apparaisse quand je clic sur un lien libellé (surtout celui de gauche bien sûr).

      Est ce possible ? Si oui, comment ?
      Merci d'avance.

      Supprimer
  8. @Nevinyrral Disk : Désolé ce n'ai pas possible de le supprimer juste pour la page d'accueil mais si tu le supprime c'est pour toutes les pages.

    RépondreSupprimer
  9. Bonjour, merci pour ce code widget!
    Y a-t-il un moyen pour que je choisisse la taille des vignettes?

    RépondreSupprimer
  10. @Le débarras de Chibi : Il n'ai pas possible de changer la taille des vignettes

    RépondreSupprimer
  11. Bonjour,

    Merci pour cet article. Est-il possible de mettre ce widget dans le corps du message ?

    RépondreSupprimer
  12. Salut l'ami, je reviens vers toi.
    Je n'ai toujours pas vraiment trouvé mon bonheur là dedans mais je te remercie de répondre à chaque fois (en fait je te remercie 4 fois, tu le mérites).
    Ce gadget j'aimerai le mettre sous les articles, du coup il faudrait que les vignettes apparaissent de façon horizontale, est ce possible ?

    Sinon j'ai peut être un moyen détourné pour faire apparaitre une image dans la vignette quand l'article est une vidéo.
    Il faudrait mettre une image de la vidéo dans l'article jusque là, c'est pas trop dur ;) , par contre il faudrait qu'elle n'apparaisse pas dans l'article mais que la vignette l'affiche.
    En traduisant un peu il s'agirait de mettre dans le code HTML du message soit
    un lien de l'image (qui pourrait être dans un autre article du blog avec juste dedans l'image correspondant à la vidéo) et qu'ensuite cela affiche dans la vignette cette image
    ou de façon peut être plus simple mettre une image dans un message mais qu'elle soit invisible pour le visiteur mais qu'elle apparaisse quand même dans la vignette of course :p
    Penses tu cela faisable ?

    Merci encore pour le temps que tu passes à répondre, c'est rare pour ce genre de site.

    RépondreSupprimer
  13. En fait en réfléchissant et d'après mes maigres connaissances, seul la seconde solution me semble plausible, dans la première il s'agirait d'un espèce de 'shadow lien" et bien qu'il n'apparaisse pas dans le message je doute que la vignette affiche l'image.
    Par contre das le second cas il s'agirait d'une "shadow image" non visible pour le visiteur mais dans ce a je ne vois pas pourquoi la vignette ne la retranscrirait pas.

    RépondreSupprimer
  14. Je viens de penser à un autre moyen, il s'agirait de superposer la vidéo sur la photo de sorte que pour le site les 2 existent mais que pour le visiteur il n'en voit qu'une, la vidéo en l'occurence.
    Mais comme dans le message les 2 existent hje pense que la vignette afficherait bien la photo.
    Voili, voilou y a t il une solution à mon pb ?

    RépondreSupprimer

Enregistrer un commentaire

Laisser un commentaire

Plus récente Plus ancienne