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.
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
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


Echarpe laine poilue


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.