Wie erstelle ich einen Fortschrittsbalken? [Tutorial] MIT EDIT

Aktualisiertes Tutorial (bessere Version) 

Hallo ihr Lieben!

Da es ja doch mehrere Interessenten bezüglich des "Fortschrittsbalken" (bzw. Progressbar) gab, gibt es heute ein kleines Tutorial ;) Es ist echt total einfach, und ich finde, selbst wenn es nur eine Kleinigkeit ist, verschönert es jeden Blog.

EDIT: Mara von Wonderful {nothing else} Books hat eine bessere Lösung gefunden, die ich auch selbst nutze! Vom Aufwand ist der Code etwa gleich, aber deutlich leichter strukturiert, formbarer und weniger anfällig für Fehler. Bitte verwendet ihren Code!!

Ihr geht auf euer Blogger-Dashboard, dann auf das Layout. Fügt in der Sidebar ein HTML/Javascript-Gadget hinzu. Hier kopiert ihr diesen Code rein:

<div class="art-block widget widget_progressbar" id="progressbar-6"><div class="art-block-body"><div class="art-blockcontent"><div class="art-blockcontent-body"><style type="text/css">

#progressbar {   width: 60%;   height: 10px;   background-color: #F5F5F5;   border: 2px solid none;   margin: 0;   padding: 0;}

#progressbar div {   height: 100%;   background-color: #FFBDFD;    border-right: 2px solid none;    margin: 0;   padding: 0;}</style> 

<div id="progressbar" style="margin: 0 style="><div style="width:40%"></div></div> <p style="text-align: left;">BUCHTITEL Seite 0 von 500</p></div></div> </div></div>

Ich weiß es sieht für HTML-Anfänger sicher etwas beängstigend aus, aber es ist wirklich nicht schwer.

Dieser Teil bestimmt, wie breit der Balken sein soll. Die 60% könnt ihr ruhig so stehenlassen.

Dieser Teil bestimmt, wie hoch der Balken sein soll. Auch diese Zahl müsst ihr nicht ändern.

Diese Teile zeigen, welche Farben der Balken haben soll. Eine Farbauswahl findet ihr hier oder hier. 

Hier ist der klitzekleine Haken: Der Code kann die Prozentzahl nicht allein berechnen. Diese Zahl muss man 

bei jedem Fortschritt manuell eingeben. Das sollte aber kein allzu großes Problem sein, mithilfe dieser Website. (Bsp.: 111 ist wie viel Prozent von 330?)

Auch diesen Teil muss man verständlicherweise selbst anpassen. 

Jetzt auf speichern - das war's! Nun könnt ihr euren Blog ansehen und bei Bedarf den Balken nochmal anpassen. Leichter als gedacht, oder? ;)