[Tipp] HTML Codes für Buchblogger – die Fortschrittsanzeige

html code

Wer kein Widget von Lovelybooks oder Goodreads nut­zen kann oder möch­te, der kann sich ein eige­nes Widget erstel­len, in dem die Fortschrittsanzeige des der­zeit gele­se­nen Buchs ange­zeigt wird.

Dafür bedarf es ledig­lich eini­ger Zeilen als HTML-Code, der in den HTML-Widget des Blogs ein­ge­fügt wer­den kann.

Der fer­ti­ge Fortschrittskasten sieht dann bei­spiels­wei­se wie folgt aus:

Das Mädchen

Seite 150 von 300
Hier kann ein Kommentar ste­hen.

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 nut­ze für eine sol­che Anwendung ger­ne eine Tabelle. Diese kann grund­sätz­lich auch weg­ge­las­sen wer­den. In die­sem Fall nut­ze ich eine Tabelle mit einer Spalte und einer Zeile. Das hat den Vorteil, dass ich die Zentrierung des Textes über den Befehl align=“center” vor­neh­men kann.

Eine lee­re Tabelle wird wie folgt auf­ge­baut:

<table> 
  <tbody> 
    <tr>
      <td align="center"></td>
    </tr> 
  </tbody> 
</table>

Wer den Gutenberg-Editor von WordPress ver­wen­det, kann auf eine sol­che Tabelle natür­lich ver­zich­ten. Derzeit ist der Editor für mich aller­dings noch zu unkom­for­ta­bel und ich kann die Beiträge nicht so struk­tu­rie­ren, wie ich es möch­te, aber das ist ein ande­res Thema.

Das Buchcover wird über den IMG-Befehl ein­ge­fügt. Ich emp­feh­le aller­dings die Funktionalität des Blogs zu nut­zen, um das Bild aus der Mediathek des Blogs ein­zu­fü­gen. In dem Einfügen-Dialog (“Dateien hin­zu­fü­gen” im klas­si­schen Editor von WordPress) kann dann der Alternativtext zu dem jewei­li­gen Buchcover ein­ge­fügt wer­den.

Als Breite habe ich in die­sem Fall 100 Pixel ver­wen­det. In WordPress sieht der Code dann wie folgt aus:

<img src="URL_DES_BILDES" alt="ALTERNATIVTEXT" width="100" height="137" />

Der eigent­li­che Fortschrittsbalken wird dann über die bei­den fol­gen­den Zeilen defi­niert. Die für den eige­nen Blog wich­ti­gen Parameter habe ich mar­kiert:

<div style=“background: none repeat scroll 0% 0% #8F8F8F; bor­der-radi­us: 5px; bor­der: none; text-ali­gn: left; height: 10px; width: 110px;”>

<div style=“background: #FF9D00 none repeat scroll 0% 0%; bor­der-bot­tom-left-radi­us: 5px; bor­der-top-left-radi­us: 5px; height: 10px; width: 50%; text-ali­gn: cen­ter;”>
</div> </div>

Es han­delt sich um zwei ver­schach­tel­te “Div”-Befehle. Im ers­ten wird die Gesamtlänge, die Höhe des Balkens und die Hintergrundfarbe defi­niert. Der zwei­te defi­niert den far­bi­gen Balken.

In die­sem Beispiel wer­den die Farben als sog. HEX-Farbcode ein­ge­ge­ben. Diese begin­nen immer mit der # und einer sechs­stel­li­gen Zahl. Es ist auch mög­lich Farbnamen zu wäh­len.

Eine Übersicht über die Möglichkeiten, Farben zu defi­nie­ren, lie­fern die Seiten von Selfhtml.

Die Angabe zu der Höhe der Balken ist anpass­bar und soll­te iden­tisch sein, damit sich bei­de über­lap­pen.

Die Länge des Balkens wird über den width-Befehl ange­ge­ben. In der ers­ten Zeile in abso­lu­ten Pixeln, wobei ich die 100 Pixel des Buchcovers plus zwei mal 5 Pixel für die Ecken gewählt habe. In der zwei­ten Zeile wird der Wert in Prozent ange­ge­ben und ent­spricht dem eigent­li­chen Fortschritt im Buch. Wer nicht gern über den Dreisatz den genau­en Prozentsatz errech­nen möch­te, kann auch ein­fach unge­fäh­re Werte ein­ge­ben. Kaum ein Leser wird das nach­rech­nen.


[the_ad id=“3637”]

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert