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ß.
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.
Die pinken Zahlen bestimmen die Farbe des gefüllten Anteils des Balkens. In diesem Fall sind also 57% des Balkens lila gefärbt.
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:
[email protected]
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ß.
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.
Die pinken Zahlen bestimmen die Farbe des gefüllten Anteils des Balkens. In diesem Fall sind also 57% des Balkens lila gefärbt.
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:
[email protected]
