Tutorial | Lesestatus-Anzeige für den Blog

Huhu ihr Lieben,

heute bin ich dran und darf euch in unserem Adventskalender den Tag versüßen. Eigentlich hatte ich ein paar süße Ideen zum Verschönern von euren Weihnachtsgeschenken geplant aber das Wetter spielt leider nicht mit bezüglich ein paar schönen Fotos und die Uni hat mir auch keine Zeit dafür gelassen.

Da ich aber so oft nach meiner Lesestatus-Anzeige gefragt werde, dachte ich mir, dass ich euch erkläre, wie ihr die für euch persönlich anpassen könnt.

<center>

<img src=“Bild URL“ title=“Buchtitel“   style=“width:200px; border-radius:5px;“ /><br/>

<div style=“text-align:left; width: 200px; height: 20px; background: none repeat scroll 0% 0% rgb(135,206,255); border: none; border-radius:5px;“>

<div style=“width:33.0%; height: 20px; background: none repeat scroll 0% 0% rgb(74,112,139); font-size: 8px; line-height: 8px; border-top-left-radius:5px; border-bottom-left-radius:5px;“>

</div>
</div> 120 / 384 Seiten<br />
<br />

</center>

Ich werde euch nun einige Ausdrücke erklären. Die, die mit rot geschrieben sind, müsst ihr anpassen, wenn ihr das Gadget zum ersten Mal installieren wollt bzw. etwas am Design ändern wollt. Die farbig markierten Teile sind die, die ihr dann später pro Buch bzw. pro Lesestatus-Update immer aktualisieren müsst.

<center> und </center>: Alles, was zwischen den beiden Ausdrücken ist, wird zentriert dargestellt. Möchtet ihr euren Lesestatus lieber linksbündig haben, löscht ihr diese beiden Ausdrücke einfach.

width: 200px;: Diesen Ausdruck findet ihr im gesamten Text genau zwei mal. Width beschreibt die Breite des abgebildeten Dings (also einmal oben das Bild und dann unten die Leiste). Hier solltet ihr die Breite eurer Siedebar in Pixeln(px) angeben. oder ihr macht ca. 5-10px weniger, je nachdem, was ihr schöner findet.

borderradius: 5px;: Diesen Ausdruck findet ihr auch wieder beim Bild und in der ersten Klammer sowie unten noch mal leicht abgeändert bei border-top-left-radius und border-top-right-radius. Dieser ausdruck rundet die Ecken eures Bildes ab. Möchtet ihr das nicht, gebt ihr 0px ein. Möchtet ihr ein wenig gerundetere Ecken, gebt einfach eine höhere Zahl ein (Tipp: bei 100px wäre das Bild ein kreis. Also probiert einfach ein bisschen aus.)

height: 20px;: Height beschreibt die Höhe des Balkens unten. Ich habe für meinen Balken 20px gewählt. Auch hier könnt ihr ausprobieren, wie breit ihr euren Balken haben wollt. Ihr findet im Text zwei mal diesen Ausdruck. Hier muss immer die selbe Höhe stehen.

rgb(xxx, yyy, zzz): Den RGB-Ausdruck findet ihr auch zwei mal. Einmal pro Klammer. Der RGB-Ausdruck in der ersten Klammer beschreibt die Hintergrundfarbe des Balkens, die zweite Klammer die Farbe der Fortschrittsanzeige. Eine tolle Übersicht mit vielen Farben und passenden RGB-Codes findet ihr hier.

Damit habt ihr ein tolles Grundgerüst für euren Lesestatus. Kommen wir nun zu den Dingen, die farbig markiert sind und häufiger aktualisiert werden müssen. Ich mache das, sofern es geht, immer, wenn ich auf Blogger bin.

Bild URL: Hier fügt ihr einen gültigen URL-Pfad zu einem Bild ein. Ich benutze am liebsten die Bilder vom Verlag oder von Lovelybooks, da sie eine gute Auflösung haben.

Buchtitel: Hier gebt ihr den Buchtitel ein. Wenn eure Leser nun mit der Maus über das Bild fahren erscheint er.

33.0%: Hier wird es ein bisschen kompliziert, Aber nur ein bisschen. Die Prozentzahl beschreibt, wie weit ihr mit dem Buch seid und passt so eure Leiste an. Die Prozentzahl könnt ihr ganz genau mit Dreisatz ermitteln oder ihr macht es wie ich im Beispiel und gebt den Wert ungefähr an.

120 / 384 Seiten: Das hier ist eine reine Textzeile. Hier könnt ihr was auch immer eingeben. Ich habe mich dazu entschieden x / y Seiten zu nehmen. Bei Hörbüchern ändere ich das ganz einfach in x / y Minuten ab. Hier könnt ihr aber auch eure Prozentzahl hinschreiben oder beides kombinieren. Wenn ihr dort überhaupt nichts stehen haben wollt, dann löscht ihr den Text einfach.

Et voila! Fertig ist euer Lesestatus. Ich hoffe, euch hat das Tutorial gefallen und zugesagt. Falls ihr noch Fragen habt, kontaktiert mich gerne per Kommentar oder Mail. ♥