jeudi 21 février 2013

Astuce #2 - Insérer une barre de progression sur votre blog

Beaucoup d'entre vous m'ont demandé comment j'ai pu mettre des barres de progression sur mon blog, donc j'ai décidé de vous faire ce petit article pour vous aider ^^

  • Tout d’abords il vous faut créer un "gadget" ou "widget" (tout dépend comment vous l'appelez ^^)
  • Rendez-vous dans le tableau de bord de votre blog, 
  • Cliquez sur mise en page et ajoutez un gadget,
  • Dans la longue liste de divers gadget proposés par Blogspot, choisissez le gadget "Texte",
  • Une fois le gadget mis en place, il ne vous reste qu'a coller ce code

<img src="ADRESSE URL DE L'IMAGE"/>
<progress id="progressBar" value="38" max="100"></progress>

<script>
        eltBar = document.getElementById("progressBar");
   eltPct = document.getElementById("percent");
   eltPct.innerHTML = eltBar.position * 100 + "%";
</script><br />38%


Pour mettre à jour votre progression il vous suffira par la suite de modifier le pourcentage (en gras) manuellement.
Je me fie à celui de bétasérie pour ma part ^^


Et voila le résultat



 
38%
 
Je remercie Benjamin car c'est lui qui m'a fait découvrir ce code ^^
J'espère que ce petit tutoriel vous plaira et vous servira ^^

10 commentaires:

  1. Merci pour cet article même si grâce à toi et Benjamin j'ai réussi à faire ceci pour mon blog. Je suis devenue accro. J'adore.

    RépondreSupprimer
  2. Hihi, j'allais justement te demander comment tu avais fait :) Merci pour cet article !!

    RépondreSupprimer
  3. De rien ^^ Contente que cet article vous serve :D

    RépondreSupprimer
  4. Merci pour cette astuce ! Très pratique !

    RépondreSupprimer
  5. Hello,
    Dite comment choisissez vous la taille de la barre?

    RépondreSupprimer
    Réponses
    1. En fait je pense que c'est lié à la taille de la photo que tu choisis ^^

      Supprimer
  6. Malgré de nombreux essaies, je n'y arrive pas je ne dois pas être faite pour ça.

    RépondreSupprimer
  7. La progression de la barre ne s'affiche pas : elle reste vide ! Pourquoi ?

    RépondreSupprimer
    Réponses
    1. Il faut que tu inscrive manuellement ton pourcentage pour voir avancer la barre de progression ^^

      Supprimer
  8. Comment changer la couleur ainsi que la taille de la barre ?
    Merci !

    RépondreSupprimer