Générer des articles au hasard avec Blogger

trouver-images-articles-blog

Générer des articles au hasard avec Blogger

Vous aimez le hasard? aujourd’hui nous allons voir comment générer des articles au hasard sur votre blog blogger. Vous vous rappelez, sur MadmoiZelle, il y avait une petite roulette pour lire des articles au hasard, et bien moi j’adorai m’en servir! Et je trouve que sur un blog, ça peut être vraiment sympa pour vos lecteurs, non?

Le tutoriel est très simple, il suffit d’insérer un script dans le code HTML de votre blog, et d’insérer votre image qui permettra de générer les articles au hasard dans un gadget HTML/JAVASCRIPT.

Commencez par vous rendre sur votre administration BLOGGER, puis rendez vous dans modèle > modifier le code HTML

Recherchez la balise </head> à l’aide d’un ctrl+F ou cmd+F sur mac

Copiez et collez le code ci dessous, juste AVANT la balise de fermeture </head>

 

</span></p>
<pre><span style="color: #000000;"><code><script type='text/javascript'>

//<![CDATA[

function showLucky(root){

var feed = root.feed;

var entries = feed.entry || [];

var entry = feed.entry[0];

for (var j = 0; j < entry.link.length; ++j) {

if (entry.link[j].rel == "alternate") {

window.location = entry.link[j].href;

}

}

}



function fetchLuck(luck){

script = document.createElement('script');

script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';

script.type = 'text/javascript';

document.getElementsByTagName('head')[0].appendChild(script);

}

function readLucky(root){

var feed = root.feed;

var total = parseInt(feed.openSearch$totalResults.$t,10);

var luckyNumber = Math.floor(Math.random()*total);

luckyNumber++;

fetchLuck(luckyNumber);

}

function feelingLucky(){

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';

document.getElementsByTagName('head')[0].appendChild(script);

}

//]]>

</script></code></span></pre>
<p><span style="color: #000000;">

 

Ensuite rendez vous dans votre mise en page puis ajoutez un gadget HTML/JAVASCIPT à l’endroit où vous souhaitez insérer votre générateur  d’articles au hasard.

Copiez le code suivant à l’intérieur du gadget :

</span></p>
<pre><span style="color: #000000;"><code><a href="#ArticleAuHasard" onclick="feelingLucky()" title="Générateur d'articles au hasard"><img src="http://i1262.photobucket.com/albums/ii617/cdlgraphicart/a1_zpsb337cf0f.png" alt="Image générateur hasard" /></a></code></span></pre>
<p><span style="color: #000000;">

 

Et comme d’habitude, je vous ai préparé quelques images pour votre générateur d’articles (par contre elles sont toutes sur fond blanc, et non fond transparent)

Pour utiliser ces images, j’explique comment les récupérer facilement dans mon article « installer un bouton de retour vers le haut de la page » dans la partie installation.

Après, pour remplacer l’image déjà incluse dans le code que vous avez collé dans votre gadget HTML, il suffira de modifier la partie entre guillemets (en bleu ci dessous) à la suite de src=

src= »http://i1262.photobucket.com/albums/ii617/cdlgraphicart/a1_zpsb337cf0f.png »

◊ Pour voir le gadget en live, si vous désirez un aperçu, je vous invite à aller l’essayer par ici ◊.

[nggallery id=7]

 

 

Que pensez vous de cet article? L’avez vous installé sur votre blog ? j’espère que l’astuce vous aura plu 😉


Les astuces Blogger :

 
 

18 Commentaires
  • La Beauté en Blog

    19 octobre 2014 at 17 h 43 min Répondre

    Je viens d’installer le gadget. Cependant je trouve l’image légèrement trop grande … Merci encore une fois pour cette petite astuce très bien expliquée !! =)
    Grâce à toi j’arrive à personnaliser mon blog avec une certaine facilité !

  • GG

    6 novembre 2014 at 21 h 40 min Répondre

    Reviens !!!!

    • graphicart

      9 décembre 2014 at 23 h 22 min Répondre

      Pour bientôt peut être… le temps manque en ce moment ^^

  • Angie La débrouillarde

    14 novembre 2014 at 13 h 02 min Répondre

    Merci Merci merci merci merci =)

    Je suis tombée par hasard sur ton blog hier et …. Pfiou, grâce à toi mon blog se peaufine peu à peu.

    Merci pour tes super articles, bien expliquée, pratique. Tu vas faire partie de mes références en matière de blogging.

    Des Bisous

  • MarleyBeauty

    17 novembre 2014 at 23 h 20 min Répondre

    Bonsoir :) Tout d’abord milles merci pour tes tutos qui m’ont bien servis & me serviront encore ! 😉 J’aimerai savoir si il est possible d’avoir un format « grille » pour les articles de la page d’accueil sur Blogger ? Bisous !

  • Chloé

    9 décembre 2014 at 23 h 17 min Répondre

    Salut merci beaucoup pour tous tes conseils !

    J’aimerais savoir comment tu as fait pour que tes articles apparaissent à la suite des autres avec seulement une miniature et le titre et qu’il faille cliquer dessus pour voir apparaître l’article en entier ?

    merci pour ton aide !

    A bientôt,

    Chloé

  • Hillo

    24 février 2015 at 17 h 07 min Répondre

    Et de deux ! Bon la je vais m’abonner histoire de ne rien louper !

  • Karamelita

    27 mars 2015 at 20 h 56 min Répondre

    Je viens de découvrir ton site aujourd’hui via Google , et franchement J’ADORE .. J’ai pu réaliser plusieurs modifications sur mon blog … Grand mercii :)

  • Ninou

    30 juillet 2015 at 20 h 05 min Répondre

    Merci beaucoup pour ce super script !! Je viens de le mettre en place sur mon blog et j’avoue : Je suis trop trop fan !!
    Belle soirée

  • La Pipelette aux Baskets

    8 août 2015 at 19 h 24 min Répondre

    hop c’est ajouté au blog, drôle comme ça fait ressortir les vieux dossiers :) merci

  • Victoria Ruthven

    3 octobre 2015 at 21 h 19 min Répondre

    Merci pour ce tuto très simple! D’habitude, j’ai toujours des petits soucis quand il s’agit de rentrer dans le code html, mais là tout s’est bien passé : ) j’ai éventuellement une petite demande… est-ce qu’il serait possible d’avoir la toute dernière flèche (la noire sans texte) en doré? (oui mon modèle est très kitsch)

  • Laura

    31 octobre 2015 at 14 h 05 min Répondre

    Bonjour, va-tu faire bientôt de nouveaux tutos blogs ? Ça serait top ! :)
    Bisous

  • Ju ☮

    15 novembre 2015 at 16 h 28 min Répondre

    Ca a fonctionné du premier coup, c’est fantastique! Merci beaucoup, en plus c’est sympa d’offrir les images qui sont trop mignonnes; je tenais à le dire.
    Bisous et Coup de Ju

  • Alex

    20 janvier 2016 at 12 h 47 min Répondre

    Un grand merci pour ce tuto trés clair !! Merci beaucoup, j’ai même réussi à le faire ! a très vite !

  • Maryssa

    13 février 2016 at 20 h 14 min Répondre

    J’adore ton blog! Je suis en pleine construction du mien et tu m’aide énormément!
    Je n’ai pas réussi à faire ce auto, mais je vais y arriver à un moment lol.
    Merci Milles fois pour tout

  • Arlénone

    30 août 2016 at 17 h 37 min Répondre

    Salut! :)
    Je découvre ton blog mais je n’arrive pas à trouver le générateur d’articles au hasard en suivant le lien de ton tuto… :/

  • ByTiphaine

    5 septembre 2016 at 22 h 55 min Répondre

    MERCI ! 😀

Poster un commentaire