[TUTO] Barre de progression pour vos blogs

 

  • BountyFrei

    Livraddict Team

    Hors ligne

    #101 30 Mars 2016 04:42:54

    Coeur Cannelle a écrit

    En fait je ne comprend pas pourquoi livraddict ne crée pas ces propres widgets pour les blogueurs?


    Parce que Livraddict n'est pas une plateforme de blog, par exemple. Pour la gestion de Livraddict, Baba fait ça sur son temps libre, étant donné que nous sommes tous bénévoles ;)

  • LCB

    Amant des romans

    Hors ligne

    #102 02 Mai 2017 20:22:25

    J'avais la flemme de lire l'article sur la couture, donc j'ai trouvé un code plus simple :


    Code:

    <br /><img src="URL DE L IMAGE" / /><br /><progress id="progressBar" max="100" 
style="font-weight: normal;" value="68"></progress><br /><b>68% </b><br />

    Vous changez juste manuellement:

    value ="68"


    (le pourcentage) et ça se met tout seul. ATTENTION ! A ne pas confondre avec :

    <b>68% </b>


    car ce 68-là, c'est le chiffre qui est affiché sur le blog.
    Pour changer l'image, vous devez changer ce qui est en gras :

    img src="URL DE L IMAGE"


    par l'url de votre image.
    Pour blogger, on le met sur un gadget html/javascript , et puis c'est tout !

    J'espère que ça vous aura aidé !

    Dernière modification par LCB (21 Mai 2017 09:27:21)

  • Invité

    Invité

    #103 05 Octobre 2018 18:32:40

    LCB a écrit

    J'avais la flemme de lire l'article sur la couture, donc j'ai trouvé un code plus simple :


    Code:

    <br /><img src="URL DE L IMAGE" / /><br /><progress id="progressBar" max="100" 
style="font-weight: normal;" value="68"></progress><br /><b>68% </b><br />

    Vous changez juste manuellement:

    value ="68"


    (le pourcentage) et ça se met tout seul. ATTENTION ! A ne pas confondre avec :

    <b>68% </b>


    car ce 68-là, c'est le chiffre qui est affiché sur le blog.
    Pour changer l'image, vous devez changer ce qui est en gras :

    img src="URL DE L IMAGE"


    par l'url de votre image.
    Pour blogger, on le met sur un gadget html/javascript , et puis c'est tout !

    J'espère que ça vous aura aidé !


    merci beaucoup  j'ai réussi ENFIN à le faire avec votre code

  • LCB

    Amant des romans

    Hors ligne

    #104 12 Octobre 2018 19:59:18

    MonBoudoirLivresque a écrit

    LCB a écrit

    J'avais la flemme de lire l'article sur la couture, donc j'ai trouvé un code plus simple :


    Code:

    <br /><img src="URL DE L IMAGE" / /><br /><progress id="progressBar" max="100" 
style="font-weight: normal;" value="68"></progress><br /><b>68% </b><br />

    Vous changez juste manuellement:

    value ="68"


    (le pourcentage) et ça se met tout seul. ATTENTION ! A ne pas confondre avec :

    <b>68% </b>


    car ce 68-là, c'est le chiffre qui est affiché sur le blog.
    Pour changer l'image, vous devez changer ce qui est en gras :

    img src="URL DE L IMAGE"


    par l'url de votre image.
    Pour blogger, on le met sur un gadget html/javascript , et puis c'est tout !

    J'espère que ça vous aura aidé !


    merci beaucoup  j'ai réussi ENFIN à le faire avec votre code


    De rien beaucoup ! :P

  • Lady K

    VIP des bibliothèques

    Hors ligne

    #105 21 Octobre 2018 21:38:08

    Merci ! :D
    Pile ce qu'il me fallait...

    LCB a écrit

    J'avais la flemme de lire l'article sur la couture, donc j'ai trouvé un code plus simple :


    Code:

    <br /><img src="URL DE L IMAGE" / /><br /><progress id="progressBar" max="100" 
style="font-weight: normal;" value="68"></progress><br /><b>68% </b><br />

    Vous changez juste manuellement:

    value ="68"


    (le pourcentage) et ça se met tout seul. ATTENTION ! A ne pas confondre avec :

    <b>68% </b>


    car ce 68-là, c'est le chiffre qui est affiché sur le blog.
    Pour changer l'image, vous devez changer ce qui est en gras :

    img src="URL DE L IMAGE"


    par l'url de votre image.
    Pour blogger, on le met sur un gadget html/javascript , et puis c'est tout !

    J'espère que ça vous aura aidé !

  • BountyFrei

    Livraddict Team

    Hors ligne

    #106 28 Octobre 2018 14:09:51

    Pour ceux qui sont sur WordPress et on la possibilité d'installer des plugins(/extension), vous pouvez utiliser le plugin Responsive Progress Bar ;)

  • Wonderbooks_

    Bookworm

    Hors ligne

    #107 21 Mai 2020 20:33:36

    Oula je viens de déterrer un vieux sujet là !!! :lol:

    Je me permet de venir par ici pour demander de l'aide. En effet, j'essaie d'obtenir la barre mais cela ne fonctionne pas sur mon blog (je suis sur blogger, je précise).

    Voici comment j'ai mis mon gadget :

    <img src="Ici vous mettez le lien" />

    <!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) --> <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5 License (http://creativecommons.org/licenses/by-sa/2.5/) --> <style type="text/css"> div.smallish-progress-wrapper { /* Don't change the following lines. */ position: relative; border: 1px solid black; } div.smallish-progress-bar { /* Don't change the following lines. */ position: absolute; top: 0; left: 0; height: 100%; } div.smallish-progress-text { /* Don't change the following lines. */ text-align: center; position: relative; /* Add your customizations after this line. */ } </style> <!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) --> <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5 License (http://creativecommons.org/licenses/by-sa/2.5/) --> <script type="text/javascript"> function drawProgressBar(color, width, percent) { var pixels = width * (percent / 100); document.write('<div class="smallish-progress-wrapper" style="width: ' + width + 'px">'); document.write('<div class="smallish-progress-bar" style="width: ' + pixels + 'px; background-color: ' + color + ';"></div>'); document.write('<div class="smallish-progress-text" style="width: ' + width + 'px">' + percent + '%</div>'); document.write('</
    div>'); } </script>

    <script type="text/javascript">drawProgressBar('#ff0000', 200, 50);</script>


    Voilà, j'ai l'impression d'avoir bien tout suivi pourtant mais ça ne marche pas. :'S Pouvez-vous m'aider ?

    Merci d'avance !

  • Sapotille

    Petit rat de bibliothèque

    Hors ligne

    #108 21 Mai 2020 22:12:33

    Wonderbooks_Wonderland a écrit

    Oula je viens de déterrer un vieux sujet là !!! :lol:

    Je me permet de venir par ici pour demander de l'aide. En effet, j'essaie d'obtenir la barre mais cela ne fonctionne pas sur mon blog (je suis sur blogger, je précise).

    Voici comment j'ai mis mon gadget :

    <img src="Ici vous mettez le lien" />

    <!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) --> <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5 License (http://creativecommons.org/licenses/by-sa/2.5/) --> <style type="text/css"> div.smallish-progress-wrapper { /* Don't change the following lines. */ position: relative; border: 1px solid black; } div.smallish-progress-bar { /* Don't change the following lines. */ position: absolute; top: 0; left: 0; height: 100%; } div.smallish-progress-text { /* Don't change the following lines. */ text-align: center; position: relative; /* Add your customizations after this line. */ } </style> <!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) --> <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5 License (http://creativecommons.org/licenses/by-sa/2.5/) --> <script type="text/javascript"> function drawProgressBar(color, width, percent) { var pixels = width * (percent / 100); document.write('<div class="smallish-progress-wrapper" style="width: ' + width + 'px">'); document.write('<div class="smallish-progress-bar" style="width: ' + pixels + 'px; background-color: ' + color + ';"></div>'); document.write('<div class="smallish-progress-text" style="width: ' + width + 'px">' + percent + '%</div>'); document.write('</
    div>'); } </script>

    <script type="text/javascript">drawProgressBar('#ff0000', 200, 50);</script>


    Voilà, j'ai l'impression d'avoir bien tout suivi pourtant mais ça ne marche pas. :'S Pouvez-vous m'aider ?

    Merci d'avance !


    Mon code est bcp plus simple. Je te le poste des que j'ai mon pc

  • Wonderbooks_

    Bookworm

    Hors ligne

    #109 22 Mai 2020 15:42:05

    Sapotille : Oh chouette, merci d'avance ! =D

  • Sapotille

    Petit rat de bibliothèque

    Hors ligne

    #110 24 Mai 2020 10:08:50

    Voilà mon code

    <img src="https://img.livraddict.com/covers/313/313728//couv51316114.jpg" height="250"  /><br /><progress id="progressBar" max="100"
    style="font-weight: normal;" value="8"></progress><br /><b>8% </b>