[Tipp] HTML Codes für Buchblogger – der Infokasten zur Rezension

Hinweis: Dieser Beitrag ist schon etwas älter und so zumindest für diesen Blog nicht mehr gültig. Ich bin mittlerweile auf den WordPress-Editor “Elementor” umgestiegen, der ein ähnliches aber besser durchdachtes Baukastensystem verwendet wie der neue WordPress-Block-Editor.

In diesem Beitrag zeige ich, wie ein Infokasten zur Rezension als HTML-Code aussieht. Einen solchen Infokasten stelle ich seit geraumer Zeit meinen hier auf dem Blog vorgestellten Rezensionen voran. Darin sammel ich die wichtigsten Infos rund um das Buch, das ich vorzustellen gedenke.

Ein solcher Kasten sieht dann beispielsweise für ein Hörbuch so aus (die Inhalte variieren je nach vorgestelltem Medium):

Titel: Love Autor: King, Stephen / Sprecher: Lemnitz, Regina Genre: Thriller Verlag: Random House Audio / Print: Heyne Hörzeit: 22 Stunden und 14 Minuten Wertung: ★★★★☆ Bei Amazon kaufen

Der HTML-Code für den Infokasten sieht in meinem Fall wie folgt aus:

<table width="100%">
<tbody>
<tr>
<td align="center" valign="center" width="35%"><img class="alignleft size-full wp-image-5698" src="https://buechernarr.org/wp-content/uploads/2018/11/love.jpg" alt="" width="500" height="500" data-wp-pid="5698" /></td>
<td align="center" valign="center">
<div style="border: 1px dotted grey; background-color: lightgrey; background-position: initial initial; background-repeat: initial initial;">
<p style="text-align: left;"><b>Titel:</b> <em>Love</em>
<b>Autor:</b> King, Stephen / <strong>Sprecher:</strong> Lemnitz, Regina
<strong> Genre:</strong> Thriller
<b>Verlag:</b> Random House Audio / <strong>Print:</strong> Heyne
<strong> Hörzeit:</strong> 22 Stunden und 14 Minuten
<b>Wertung:</b> ★★★★☆
<a href="https://amzn.to/2xkX87q" target="_blank" rel="noopener">Bei Amazon kaufen</a></p>

</div></td>
</tr>
</tbody>
</table>

Erklärung

Ich nutze gerne Tabellen, auch wenn dies nicht mehr so ganz zeitgemäß ist. Funktional ist es aber dennoch allemal. Ich zeige hier wieso.

Die leere Tabelle ist wie folgt aufgebaut:

<table width="100%"> 
  <tbody> 
    <tr>
      <td align="center" valign="center" width="35%"></td>
      <td align="center" valign="center"></td>
    </tr> 
  </tbody> 
</table>

Über den Code table width=”100%” gebe ich vor, dass die Gesamttabelle immer über die 100%-ige Breite des Beitrags geht. Das hat den Vorteil, dass wenn das Theme des Blogs gewechselt wird, bei dem sich die Breite der Beiträge ändert (was gar nicht mal so selten ist), die Tabelle entsprechend automatisch angepasst wird.

Es handelt sich um eine Tabelle mit einer Zeile (definiert über den tr-Befehl) und zwei Spalten (definiert über den td-Befehl). Ich gebe in der ersten Spalte eine relative Breite von 35% vor. Die zweite Spalte passt sich dann automatisch an die restliche Breite der Tabelle an.
Mit dieser Vorgabe von 35% wird dann auch das Cover, das ich hier einfüge, automatisch auf die Breite angepasst, auch wenn das eingefügte Bild größer ist.

Mit den beiden prozentualen Angaben wird die Tabellenbreite an die Breite des Blogbeitrags angepasst. Die Breite wird von dem jeweiligen Blog-Design vorgegeben.

Der graue Kasten wird über den DIV-Befehl definiert:

<div style=”border: 1px dotted grey; background-color: lightgrey; background-position: initial initial; background-repeat: initial initial;”></div>

border: 1px dotted grey definiert die Linie um den Kasten. In diesem Fall mit der Dicke von 1 Pixel, punktiert und grau.

background-color: lightgrey definiert den eigentlichen Kasten in hellgrau.

Innerhalb des DIV-Befehls kommen anschließend die weiteren Angaben zu dem Titel, wobei einfach die Formatierungsoptionen des Blogs genutzt werden können.

Der Büchernarr

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.