{Tutorial} Lesestatus/ Lesestatistik Gadget

Heute zeige ich euch, wie ihr ein Lesestatus Gadget auf eurer Sidebar einfügen könnt.

Also ungefähr so:

Viele Blogs haben auf ihrer Sidebar ein "Das lese ich gerade" Gadget. 

Ich habe aber festgestellt, dass viele einfach nur ein Bild von dem Buch das sie gerade lesen haben. Ich persönlich finde ein Bild mit so einer Leiste darunter doch ein bisschen schöner, also wollte ich euch mal zeigen, wie das funktioniert^^

Als erstes öffnet ihr Blogger dann Layout> Gadget hinzufügen> HTML/ Java Script

Erfindet eine kreative Überschrift und fügt dann diesen Code ein:

<Center><img src="Bild URL deines Buches"

 title="Angezeigter Text" style="width:150px; border-radius:5px" /><br/>
<div style="text-align:left; width: 150px; height: 15px; background: none repeat scroll 0% 0% rgb(255,250,240); border: none; border-radius:5px"><div style="width:50%; height: 15px; background: none repeat scroll 0% 0% rgb(240,128,128); font-size: 8px; line-height: 8px; border-top-left-radius:5px; border-bottom-left-radius:5px;">
 </div></div>100 von 200 Seiten | <b>Ich mag das Buch bis jetzt!</b><br />
 <br />
</Center>

Wie immer, hier die Erleuterung:

(255,250,240)

(240,128,128)

Ich fange mal hiermit an, da das wichtig zur Gestaltung deines Balkens (deiner Leiste) ist. Denn das ist schlicht und ergreifend die Farbe (bzw. die Farben) deines Balkens. Der erste Code ist die Farbe des Hintergrunds des Balkens, der zweite für den sich bewegenden Balken.

Die Farbcodes bekommt ihr hier

<Center> und </Center>

Ist dafür verantwortlich, dass euer Gadget mittig in der Sidebar angebracht ist.

<img src="Bild URL deines Buches"

img ist die Abkürzung für image und src für source. Hier fügt ihr das Bild eures Buches ein, dass ihr gerade lest. Dafür macht ihr einen Rechtsklick auf das Bild und geht auf Bild URL kopieren.

title="Angezeigter Text"

Dies ist der Text der angezeigt wird, wenn ihr mit dem Cursor über das Bild fahrt. Dort könnt ihr zum Beispiel Titel und Autor des Buches angeben.

 style="width:150px; border-radius:5px" />

Dies ist euer Bild. width: sagt euch, wie groß das Bild ist, hier habe ich 150px eingestellt. der "border-radius" sagt an, dass euer Bild abgerundete Ecken mit dem Radius 5px hat. Möchtet ihr keine abgerundeten Ecken, lasst den Teil einfach weg

<div style="text-align:left; width: 150px; height: 15px; background: none repeat scroll 0% 0% rgb(255,250,240); border: none; border-radius:5px"><div style="width:50%; height: 15px; background: none repeat scroll 0% 0% rgb(240,128,128); font-size: 8px; line-height: 8px; border-top-left-radius:5px; border-bottom-left-radius:5px;">

Keine Panik, als ich das alles zum ersten Mal gesehen habe, hab ich mir fast in die Hose gemacht:D Im Prinzip ist das ganz einfach:

width, height und border sind einfach nur Größe, Höhe und Eckenradius eures BALKENS. Das ganze findet ihr in der Form zweimal im Code, für den Balkenhintergrund und für den Balken selbst. Dies muss immer gleich sein, sonst siehts komisch aus.

In die Klammern fügt ihr euren Zahlencode ein, das hatten wir ja schon.

Den Rest übernehmt ihr so, bis auf eine Sache:

width:50%;

Dies zeigt quasi an, zu wie viel Prozent ihr in eurem Buch fortgeschritten seid. Die Prozentzahl könnt ihr mit einer einfachen Formel berechnen: 

Eure bisher gelesenen Seiten x 100 : Die Seitenzahl des Buches

Als Beispiel: Euer Buch hat 123 Seiten und ihr habt bisher 45 Seiten gelesen: Also 45 x 100 : 123 = 36%

Anstatt der 50% gebt ihr also 36% ein. Ganz easy oder?

 </div></div>100 von 200 Seiten | <b>Ich mag das Buch 

bis jetzt!</b>

Ich glaube dieses hier erklärt sich fast von selbst. Ihr gebt einfach ein, auf welcher Seite von wie vielen Seiten ihr gerade seit (wie im obigen Beispiel: 45 von 123 Seiten) und Rechts hinter dem <b> Könnt ihr einen beliebigen Kommentar schreiben. Ich persönlich mag das nicht so und habe es daher weg gelassen^^

Und zum Schluss:

<br/>

Kurz und knapp: das ist ein Absatz also als wenn ihr auf die Enter- Taste drückt

Bei Fragen, ab in die Kommentare damit, ich beiße nicht ;)

Ich hoffe wie immer ich konnte euch weiterhelfen:)

Wenn ihr das Tutorial ausprobiert, lasst mir doch einen Link zu eurem Blog da:)

Bye bye!