{Tutorial} Lesestatus/ Lesestatistik Gadget

» 03.10.2015  14 Federgrüße «

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!

Kommentare:

  1. Huhu Jojo :)

    Na das ist ja praktisch! Ich wollte schon länger einen Lesestatus auf meinem Blog einfügen :)
    Ich glaube das probiere ich gleich heute / morgen aus ♥
    Vielen Dank für die tolle Erklärung :)

    Liebe Grüße,
    Corina

    AntwortenLöschen
    Antworten
    1. Freut mich, dass ich dir helfen konnte^^ ich schaus mir dann auf ieden Fall mal auf deinem Blog an❤️

      Löschen
    2. Guten Morgen :)

      Schau mal was ich habe ♥ http://kopfkino-blog.blogspot.de/
      Vielen Dank nochmal für das Tutorial! So war das ganz einfach :)

      Liebe Grüße,
      Corina

      Löschen
    3. Juhu, es hat funktioniert!^^ Hihi, sieht toll aus:)

      Löschen
  2. Hi Jojo,

    ein schönes Tutorial :D

    Lg
    Micha

    AntwortenLöschen
  3. Du machst Witze! Wie lange wollte ich schon so etwas haben <3 Ich hab gar nicht gewusst, dass das ein HTML Code ist (peinlich). Mir gefallen die Tutorials von dir, das ist echt eine schöne Idee besonders für viele die ganz am Anfang stehen ist das beim Blog Design usw. ja fast ein Buch mit sieben Siegeln ;)
    Das du hier auch alles auseinander friemelst und erklärst ist Klasse, kann man viel von lernen.

    Liebe Grüße und einen schönen zweiten Advent wünsche ich dir,

    Jenni´s Buchgefühl


    AntwortenLöschen
    Antworten
    1. Huhu:)
      Solche Kommentare freuen mich immer riesig, danke dafür :)
      Ich freue mich natürlich auch, dass ich dir weiterhelfen konnte^^

      Liebe Grüße und eine schöne Woche!

      Jojo <3

      Löschen
  4. Endlich habe ich etwas gefunden, was funktioniert *-* Ich bin dir so dankbar
    lifeofaboredgirl.wordpress.com
    Lg

    AntwortenLöschen
  5. Vielen Dank für diesen grandiosen Tipp :)
    Ich war schon lange auf der Suche nach so einem Gadget :D
    Es hat super funktioniert!

    AntwortenLöschen
    Antworten
    1. Freut mich, dass ich dir helfen konnte! :)

      Löschen
  6. Vielen Dank! Dieser Tipp war sehr hilfreich für mich :D
    Und dein Blog ist wirklich super!

    AntwortenLöschen

Ich freue mich über jeden Kommentar und versuche jedem eine Antwort zu geben:)