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

Hinweis: Dieser Beitrag ist schon etwas älter und so zumin­dest für die­sen Blog nicht mehr gül­tig. Ich bin mitt­ler­wei­le auf den WordPress-Editor “Elementor” umge­stie­gen, der ein ähn­li­ches aber bes­ser durch­dach­tes Baukastensystem ver­wen­det wie der neue WordPress-Block-Editor.

html code

In die­sem Beitrag zei­ge ich, wie ein Infokasten zur Rezension als HTML-Code aus­sieht. Einen sol­chen Infokasten stel­le ich seit gerau­mer Zeit mei­nen hier auf dem Blog vor­ge­stell­ten Rezensionen vor­an. Darin sam­mel ich die wich­tigs­ten Infos rund um das Buch, das ich vor­zu­stel­len geden­ke.

Ein sol­cher Kasten sieht dann bei­spiels­wei­se für ein Hörbuch so aus (die Inhalte vari­ie­ren je nach vor­ge­stell­tem Medium):

love

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 kau­fen

Der HTML-Code für den Infokasten sieht in mei­nem 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 nut­ze ger­ne Tabellen, auch wenn dies nicht mehr so ganz zeit­ge­mäß ist. Funktional ist es aber den­noch alle­mal. Ich zei­ge hier wie­so.

Die lee­re Tabelle ist wie folgt auf­ge­baut:

<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 gewech­selt wird, bei dem sich die Breite der Beiträge ändert (was gar nicht mal so sel­ten ist), die Tabelle ent­spre­chend auto­ma­tisch ange­passt wird.

Es han­delt sich um eine Tabelle mit einer Zeile (defi­niert über den tr-Befehl) und zwei Spalten (defi­niert über den td-Befehl). Ich gebe in der ers­ten Spalte eine rela­ti­ve Breite von 35% vor. Die zwei­te Spalte passt sich dann auto­ma­tisch an die rest­li­che Breite der Tabelle an.
Mit die­ser Vorgabe von 35% wird dann auch das Cover, das ich hier ein­fü­ge, auto­ma­tisch auf die Breite ange­passt, auch wenn das ein­ge­füg­te Bild grö­ßer ist.

Mit den bei­den pro­zen­tua­len Angaben wird die Tabellenbreite an die Breite des Blogbeitrags ange­passt. Die Breite wird von dem jewei­li­gen Blog-Design vor­ge­ge­ben.

Der graue Kasten wird über den DIV-Befehl defi­niert:

<div style=“border: 1px dot­ted grey; back­ground-color: light­grey; back­ground-posi­ti­on: initi­al initi­al; back­ground-repeat: initi­al initial;”></div>

bor­der: 1px dot­ted grey defi­niert die Linie um den Kasten. In die­sem Fall mit der Dicke von 1 Pixel, punk­tiert und grau.

back­ground-color: light­grey defi­niert den eigent­li­chen Kasten in hell­grau.

Innerhalb des DIV-Befehls kom­men anschlie­ßend die wei­te­ren Angaben zu dem Titel, wobei ein­fach die Formatierungsoptionen des Blogs genutzt wer­den kön­nen.

2 Kommentare

  1. Huhu Frank,

    vie­len Dank, das Gerüst hilft mir sehr – krieg das mit HTML ein­fach nicht auf die Kappe – ein Buch mit 7 Siegeln für mich 🙁 Aber das funk­tio­niert super!

    Liebe Grüße Tanja

    nun “nur” noch die gut 350 Rezis auf dem Blog edi­tie­ren und mit dem Neuen Konstrukt upda­ten .… ohau­aha 🙁

    1. Hi Tanja,
      och, das sieht nur schwer aus. Das Grundgerüst bekommst Du ja gestellt. Wenn Du mit html auf Kriegsfuß stehst, dann funk­tio­niert der Blog auch ohne sol­che Kenntnisse 🙂
      Aber schön, dass ich hel­fen konn­te. Wenn Du was ande­res umset­zen magst, kannst Du natür­lich fra­gen 🙂
      Viele Grüße
      Frank

Kommentar hinterlassen

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