Lesestatus {Tutorial}

Mit diesem Tutorial würde ich euch gerne zeigen, wie ihr einen Lesestatus als Gadget bei Blogger hinzufügen könnt. Der HTML-Code kann aber auch direkt in einem Post eingebunden werden, muss also nicht in einem eigenem Gadget verwendet werden.

Und so sieht es aus:

Seite 350/576

Wenn man mit der Maus über das Cover fährt, erscheint bei mir eine Quellenangabe, von welchem Verlag ich das Bild anzeige. Durch das Cover erkennt man, um welches Buch es sich handelt, trotzdem könntet ihr es noch unter die Seitenangabe schreiben. Wie genau, erkläre ich gleich, aber kommen wir zuerst einmal zum HTML-Code.

How to

Um den Code als Gadget verwendet zu können, geht ihr unter Blogger zu Layout, erstellt ein neues HTML/JavaSkript-Gadget und kopiert diesen Code dorthin.

<div align="center">
<img src="Bild-URL"
     title="Quellenangabe oder Titel"
     style="width: 200px;" />
<br />
<br />
<div style="background: none repeat scroll 0% 0% #F2F2F2;
            border-radius: 4px;
            border: none;
            text-align: left;
            height: 15px;
            width: 200px;">

<div style="background: none repeat scroll 0% 0% #aaaaaa;
            border-radius: 4px;
            height: 15px;
            width: 60%;">
</div>
</div>
<p>Seitenangabe<br />weitere Angaben</p>
</div>

Durch "center" zentriert man den gesamten Inhalt. Wenn ihr den Lesestatus links- oder rechtsbündig haben wollt, müsst ihr "center" durch "left" oder "right" ersetzen.

Mit diesen Befehlen könnt ihr euren Lesstatus noch weiter personalisieren:

width: 200px;             Breite des eingefügten Bildes, die Höhe passt sich an
border-radius: 4px;     Abrundung der Balken, große Zahl = große Abrundung
height: 15px;              Höhe der Balken
width: 200px;             Breite des Balken
width: 60%;                Lesefortschritt in %

#F2F2F2 und #aaaaaa sind Farbcodes und stehen für die Farben der beiden Balken.

Die fettgedruckten Code-Teile müsst ihr durch eure gewünschte Informationen ersetzen. Also die Bildadresse (Bild-URL), Quellenangabe oder Titel (erscheint, wenn die Maus darauf ist), die Seitenangabe und wenn ihr wollt noch weitere Angaben oder einen kurzen Kommentar.

Ich hoffe, das Tutorial hilft einigen und ist verständlich erklärt.