Widget Blogger Barre de Progression Couture Tricot

J‘avais remarqué sur de nombreux blogs couture/tricot un petit gadget (widget) « Barre de progression » permettant d’annoncer l’état d’avancement des travaux…
J‘ai donc fouillé le net sans succès, avant de tomber (enfin) sur le forum de Knitter’s Review qui m’a mené au site d’un programmeur Matt Harvey ayant fait le code de ce widget pour le blog de sa femme tricoteuse (merci Monsieur !).

Pour les non-anglophones, voici donc la marche à suivre.

* Installation *

1- Sur blogger, allez dans mise en page, ajoutez un gadget, sélectionner l’éditeur HTML/JavaScript. Donnez un titre (ici j’ai choisi en fabrication)
2- Sur le site du gentil monsieur, copiez dans la partie « Contenu » le code écrit dans la première grande partie grise.
3- Copiez juste en dessous le code de la partie grise suivante :
* j’ai été obligé de mettre cette ligne en image et non en texte sinon Blogger l’interprète comme du code et elle disparait
Répétez la copie de cette ligne autant de fois qu’il vous faut de barres.
4. Enregistrez, placez votre gadget où vous souhaitez qu’il apparaisse (par exemple, après votre gadget profil).
5. Enregistrez votre mise en page (en haut à droite).
Voilà l’installation est faite 🙂 Vous pouvez vérifier en affichant votre blog que cela fonctionne bien (vous devriez voir des rectangles rouges à 50%).

* Configuration *

Maintenant on peut passer aux réglages personnels en cliquant sur le gadget pour le modifier.
On peut ajouter du texte entre les barres, augmenter ou diminuer la longueur de la barre, changer le pourcentage et changer la couleur de la barre.
drawProgressBar(‘#ff0000’, 200, 50);Les modifications se font uniquement dans la ligne de script PAS dans le grand bloc collé au-dessus. Il y a en fait trois paramètres dans cette ligne : la couleur ‘#ff0000’, la longueur de la barre 200, et le pourcentage 50.

1. Mettre du texte entre les barres
drawProgressBar(‘#ff0000’, 200, 50);Il suffit simplement d’écrire dans le widget le texte que vous voulez AVANT chaque ligne Vous devez donc voir par exemple :
Sac à main Réveillon
drawProgressBar(‘#ff0000’, 200, 50);

Echarpe laine poilue

drawProgressBar(‘#ff0000’, 200, ProgressBar(‘#ff0000’, 200, 50);
Pyjama Bébé

Ainsi sur votre blog, il apparaitra Sac à Main Réveillon suivi d’une barre de progression, puis Echarpe laine poilue suivi d’une barre de progression, etc.

2. Augmenter ou réduire la longueur de la barre.
Pour ce faire dans chaque ligne de script, on change la valeur au milieu de la parenthèse, soit dans ce cas le 200.
La longueur est exprimée en pixel. Vous pouvez donc l’agrandir ou la diminuer, en remplaçant le 200 par 250 ou 150. A vous de voir la longueur qui vous plait.

3. Changer le pourcentage
Pour ce faire dans chaque ligne de script, on change la valeur à la fin de la parenthèse, soit dans ce cas le 50.
Vous pouvez remplacer cette valeur par le chiffre qui illustre l’état de vos travaux, de 0% à 100%.

4. Changer la couleur de la barre.
Pour ce faire dans chaque ligne de script, on change la valeur au début de la parenthèse, soit dans ce cas le ‘#ff0000’.
Cette valeur est le code hexadécimal de la couleur. A moins d’être infographiste/concepteur de sites internet et de connaitre ces codes par cœur, voici une page wikipedia regroupant la liste des couleurs et leur code hexadécimal. Vous pouvez donc changer la couleur en la remplaçant par celle qui vous avez choisi, par exemple en remplaçant ‘#ff0000’ par ‘#e67e30’ si vous avez choisi la couleur abricot.

ATTENTION quand vous modifiez le code à ne pas supprimer une parenthèse, une virgule, un espace, un symbole ‘ ou #.
Si votre widget ne fonctionne plus, vérifiez si vous n’avez pas fait une suppression maladroite 🙂

Voilà, c’est fini.
Bonnes bidouilles informatiques 🙂

PS : si cette page vous a aidé, vous pouvez mettre un lien vers cet article sur votre blog afin que + de tricoteuses/couturières bloggueuses puissent elles-aussi ajouter ce widget sur leur blog.

Voir aussi

Google Analytics sur Blogger pour les modèles non basiques

Petite astuce en coup de vent.Si vous avez changé de modèle (template) Blogger et donc …

Laissez un commentaire

  1. Bonjour,
    Pareil que Stéphanie, il m'est impossible d'ouvrir le lien du gentil monsieur.
    Du coup serait-il possible de nous le montrer en capture d'écran ?
    Merci d'avance 🙂

  2. je ne peut pas ouvrir le site du gentil monsieur à cause de Avast et du coup je n'ai pas le code et ca marche pas
    🙁
    Mais merci quand meme

  3. @Estelaziza : je vous ai répondu par mail, je l'ai utilisé pour mon Pinwheel mouton, désolée et bonne recherche !

    @Yukarie : Si vous voulez, envoyez moi un mail, je le copie colle et vous le renvoie.
    (PS : mon adresse email est en image au début de ce post :
    http://bobinesetpelotes.blogspot.com/search/label/A%20VENDRE )

    Bonne journée !

  4. bonsoir! je suis nouvelle et vient de découvrir ce blog. j'ai pu voir lors de cette découverte un modèle de laine également déniché au emaüs Bourrask ; Couleur-Bain : 99.077 – OV94 593CA00 8530 (chiné beige-écru-chocolat clair?) mon soucis et qu'il m'en manque une seul(bobine) pour pouvoir finit mon modèle et je n'arrive pas a mettrfe la main dessus, vendriez vous une bobine a une demoiselle désespéré de ne jamais voir terminer son travail. merci d'avance pour votre réponse quelle quel soit! mon email « estelaziza@yahoo.fr

  5. Le site du gentil Monsieur est bloqué par Avast comme menace de mon coté.. du coup je peux pas avoir le code.. 🙁

  6. Merci, je suis carrément ravie ^^

  7. Ça fait long temps que cherche cette information, merci beaucoup!
    à très bientôt,
    Vanessa

  8. Bonjour,
    Si votre question est pour écrire le code dans le widget, il faut l'écrire en texte (donc pas d'image).

    Si vous voulez mettre du code dans un article, pour créer une image vous pouvez le faire sous paint ou sous Gimp (équivalent de photoshop mais gratuit), et d'écrire votre texte sur un fond blanc, on enregistre et hop ça fait l'image.

    Bon weekend et bon tricot

  9. Vous dites que pour mettre la ligne en image et non en texte pour que ça fonctionne, je voudrais savoir comment vous avez fait pour la mettre en image.

Répondre à Sook' Book Annuler la réponse.