Sonntag, 30. Dezember 2012

[Tutorial] Fortschrittsbalken

Immer wieder fragen sich Blogger, wie man so einen Balken erstellt, der z.B. den Lesefortschritt bei einem Buch anzeigt (so wie ihr es bei mir in der Seitenleiste sehen könnt). Ich selbst habe ich mir letztes Jahr alle Informationen dazu im Internet zusammengesucht und mühsam den Code gebastelt, weil ich überhaupt keine Ahnung von HTML hatte. Die habe ich zwar immer noch nicht, aber den Code habe ich jetzt ja.

Damit sich nicht jeder selbst diese Mühe machen muss, erstelle ich dieses Tutorial.

Als Beispiel nehme ich einfach mal den Code, wie ich ihn gerade bei meinem aktuellen Buch habe. Die Stellen, die für euch wichtig sind, habe ich farbig markiert und unten geschrieben, was sie bewirken. So könnt ihr den Code relativ einfach auf euren Blog anpassen.


<div style="width: 190px; height: 15px;
background: none repeat scroll 0% 0% rgb(254, 243, 210);
 border: 1px solid rgb(0, 0, 0);">
<div style="width: 57%; height: 15px;
background: none repeat scroll 0% 0% rgb(125, 27, 126);
 font-size: 8px; line-height: 8px;">
</div></div> 235 / 412 Seiten <br />
<br />

Der grüne Teil ist die Größe des Balkens. Indem ihr die Zahlen verändert, könnt ihr ganz einfach die Größe so ändern, wie es für euch passend ist.

Der blaue Teil ist für die Hintergrundfarbe des Balkens verantwortlich, also die, die er hat wenn er leer ist. In diesem Fall ist das weiß. Statt dem "rgb(xxx,xxx,xxx)" könnt ihr auch einfach die Hexadezimalzahlen benutzen, wie das eigentlich üblich ist. Also bspw. #FFFFFF für weiß.

Diese Zahlen bestimmen die Farbe der Kanten, also der Linie um den Balken herum.

Der rote Teil des Codes ist der wichtigste. Durch die Prozentzahl wird angegeben, wie weit der Balken gefüllt sein soll.
Das kann man ganz einfach ausrechnen: Gelesene Seiten * 100 / Gesamtzahl = %
In diesem Fall: 235*100/412=57%

Die pinken Zahlen bestimmen die Farbe des gefüllten Anteils des Balkens.

In den lilanen Teil des Codes könnt ihr schreiben, was ihr wollt. Das ist der Text, der unter dem Balken angezeigt wird.

Ich hoffe das hat euch geholfen. Wenn ihr noch Fragen dazu habt, könnt ihr mir gerne eine Mail schreiben:
jacquy.netten@yahoo.de

Kommentare:

  1. Man kann statt der werte "rgb(x,y,z)" normalerweise auch Hex-Werte nehmen.

    Also "#FFFFFF" für weiß, z.b. ^^ Also wenn ich mich jetzt nicht irre :P Mir kommt das mit dem rgb nämlich seltsam vor bzw hab ich das noch nie so gesehen (ich benutze allerdings auch nur Hex-Werte daher)

    Aber nettes Tuto :D

    AntwortenLöschen
    Antworten
    1. Wie gesagt, ich habe keine Ahnung davon. :D

      Löschen
  2. Dankeschön, dass Du Dein Tutorial mit uns teilst :)

    LG
    Monika

    AntwortenLöschen
  3. Und wieso benutze ich so einen scheißkomplizierten Html-code die ganze Zeit? ;______; Deins ist einfacher und ich kann mehr machen! So px-Zahlmäßig :'D Danke ;)

    AntwortenLöschen