Wer kein Widget von Lovelybooks oder Goodreads nutzen kann oder möchte, der kann sich ein eigenes Widget erstellen, in dem die Fortschrittsanzeige des derzeit gelesenen Buchs angezeigt wird.
Dafür bedarf es lediglich einiger Zeilen als HTML-Code, der in den HTML-Widget des Blogs eingefügt werden kann.
Der fertige Fortschrittskasten sieht dann beispielsweise wie folgt aus:
|
Seite 150 von 300 |
Der HTML-Code dafür sieht wie folgt aus:
<table> <tbody> <tr> <td align="center"> <img src="URL_DES_BILDES" alt="ALTERNATIVTEXT" width="100" height="137" /> <div style="background: none repeat scroll 0% 0% #8F8F8F; border-radius: 5px; border: none; text-align: left; height: 10px; width: 110px;"> <div style="background: #FF9D00 none repeat scroll 0% 0%; border-bottom-left-radius: 5px; border-top-left-radius: 5px; height: 10px; width: 50%; text-align: center;"></div> </div> Seite 150 von 300 Toller Einstieg ins Buch</td> </tr> </tbody> </table>
Erklärungen
Ich nutze für eine solche Anwendung gerne eine Tabelle. Diese kann grundsätzlich auch weggelassen werden. In diesem Fall nutze ich eine Tabelle mit einer Spalte und einer Zeile. Das hat den Vorteil, dass ich die Zentrierung des Textes über den Befehl align=”center” vornehmen kann.
Eine leere Tabelle wird wie folgt aufgebaut:
<table>
<tbody>
<tr>
<td align="center"></td>
</tr>
</tbody>
</table>
Wer den Gutenberg-Editor von WordPress verwendet, kann auf eine solche Tabelle natürlich verzichten. Derzeit ist der Editor für mich allerdings noch zu unkomfortabel und ich kann die Beiträge nicht so strukturieren, wie ich es möchte, aber das ist ein anderes Thema.
Das Buchcover wird über den IMG-Befehl eingefügt. Ich empfehle allerdings die Funktionalität des Blogs zu nutzen, um das Bild aus der Mediathek des Blogs einzufügen. In dem Einfügen-Dialog (“Dateien hinzufügen” im klassischen Editor von WordPress) kann dann der Alternativtext zu dem jeweiligen Buchcover eingefügt werden.
Als Breite habe ich in diesem Fall 100 Pixel verwendet. In WordPress sieht der Code dann wie folgt aus:
<img src="URL_DES_BILDES" alt="ALTERNATIVTEXT" width="100" height="137" />
Der eigentliche Fortschrittsbalken wird dann über die beiden folgenden Zeilen definiert. Die für den eigenen Blog wichtigen Parameter habe ich markiert:
<div style=”background: none repeat scroll 0% 0% #8F8F8F; border-radius: 5px; border: none; text-align: left; height: 10px; width: 110px;“>
<div style=”background: #FF9D00 none repeat scroll 0% 0%; border-bottom-left-radius: 5px; border-top-left-radius: 5px; height: 10px; width: 50%; text-align: center;”>
</div> </div>
Es handelt sich um zwei verschachtelte “Div”-Befehle. Im ersten wird die Gesamtlänge, die Höhe des Balkens und die Hintergrundfarbe definiert. Der zweite definiert den farbigen Balken.
In diesem Beispiel werden die Farben als sog. HEX-Farbcode eingegeben. Diese beginnen immer mit der # und einer sechsstelligen Zahl. Es ist auch möglich Farbnamen zu wählen.
Eine Übersicht über die Möglichkeiten, Farben zu definieren, liefern die Seiten von Selfhtml.
Die Angabe zu der Höhe der Balken ist anpassbar und sollte identisch sein, damit sich beide überlappen.
Die Länge des Balkens wird über den width-Befehl angegeben. In der ersten Zeile in absoluten Pixeln, wobei ich die 100 Pixel des Buchcovers plus zwei mal 5 Pixel für die Ecken gewählt habe. In der zweiten Zeile wird der Wert in Prozent angegeben und entspricht dem eigentlichen Fortschritt im Buch. Wer nicht gern über den Dreisatz den genauen Prozentsatz errechnen möchte, kann auch einfach ungefähre Werte eingeben. Kaum ein Leser wird das nachrechnen.
[the_ad id=”3637″]
Der Büchernarr schreibt hauptsächlich über Bücher aus den Genres Fantasy und Horror. Manchmal schleichen sich Bücher anderer Genres in diesen Buchblog ein, so dass hier auch Biografien, historische Romane oder Kinderbücher zu finden sind.