Wie erstelle ich ein Lesefortschritt-Gadget? (aktualisiert) [Tutorial]

Heute gibt es die aktualisierte Version eines Tutorials, das ich schon mal gepostet hatte - 2012 nämlich. Diesen Code finde ich mittlerweile so katastrophal und fehleranfällig, dass ich das nicht weiterhin so stehen lassen kann. Folgender Code basiert nun auf einer Version von WONDERFUL {nothing else} BOOKS, die ich für mich persönlich ein klitzekleines bisschen abgewandelt habe. Danke, Mara!
Zum Verständnis: Zwei Balken werden dabei quasi übereinandergelegt, wobei man einen davon (den linken) mit seinem Lesefortschritt wachsen lässt.

Um den Code zu nutzen, geht ihr einfach auf euer Layout, erstellt ein neues HTML/Javascript-Gadget und fügt Untenstehendes ein. Wie wo was verändert wird, steht unten.

Seite 211 // 768
Etwas schleppend

<center>
<img src="Bild-URL des Covers"
     alt="Titel des Buches"
     title="Titel // Autor"
     style="width: 170px;" />
<br />
<br />
<div style="background: none repeat scroll 0% 0% #F2F2F2;
            border-radius: 5px;
            border: none;
            text-align: left;
            height: 15px;
            width: 185px;">

<div style="background: none repeat scroll 0% 0% #FFDEF4;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;
            height: 15px;
            width: 40%;">
</div>
</div>
<p>Seite 210 // 460<br />Platz für Eindrücke</p>
</center>

width: 170px;	Breite des Covers (Höhe passt sich an)
border-...: 5px;	Abrundung der Ecken (je höhere Zahl, desto runder)
height: 15px;	Höhe des Balkens
width: 185px;	Länge des Balkens
width: 40%;	Lesefortschritt (wie viele % hast du schon gelesen?) via Prozentrechner
#FARBE;	Farbe der Balken (2 verschiedene) via Colorpicker
width: 185px;	Länge des Balkens

Wieso ...

---

... "alt"? "alt" steht für Alternativtext und hat den Vorteil, dass dieser Text angezeigt wird, wenn das Bild (aus irgendeinem Grund) nicht funktioniert. So weiß man z.B. trotz fehlendem Cover, um welches Buch es sich handelt.

... "title"? Weil es einfach schick ist. Wenn man mit dem Cursor über das Bild fährt, erscheint dieser Text (sinnvoll sind ganzer Titel & Autor).

... "center"? Ist dazu da, um das ganze in der Sidebar schön zu zentrieren, damit Bild und Schrift nicht links an der Seite kleben.

Ich möchte nochmal betonen, dass der Code von Mara stammt und ich ihn nur nach meinem Geschmack angepasst habe. Wenn ihr Schwierigkeiten oder Fragen habt, schreibt es in die Kommentare!

Nachtrag: Hier eine weitere Methode, eine Progress Bar zu erstellen.