Einzelnen Post-Hintergrund individuell färben

In diesem Post gibt es zwei Hintergründe, die vom normalen Post-Hintergrund abweichen, zum einen den äußeren Post-Hintergrund (post-outer) und zum anderen den inneren Post-Hintergrund (post-body).

---

Während man den Hintergrund des post-body per CSS gestalten kann, benötigt man für den post-outer ein Script. Das liegt daran, dass der post-body eine ID hat, der post-outer jedoch nicht. Und weil der post-outer kein untergeordnetes Element (child) von post-body ist, sondern ein übergeordnetes Element (parent), kann man die ID des post-body nicht per CSS für den post-outer nutzen.

In beiden Fällen benötigt man dennoch die ID des post-body.

Diese findet man beim gespeicherten Post, wenn man in der Postsliste einen Rechtsklick auf den Posttitel macht und die Adresse kopiert. Von dem Post hier sieht diese Adresse beispielsweise so aus:

https://www.blogger.com/blogger.g?blogID=7887222252923781602#editor/target=post;postID=4456245288458637680;onPublishedMenu=posts;onClosedMenu=posts;postNum=9;src=postname

Im veröffentlichten Post sieht man das Folgende im Quelltext:

<div id="post-body-4456245288458637680" class="post-body entry-content" itemprop="description articleBody">
Post-Inhalt dazwischen
</div>

Äußeren Hintergrund eines einzelnen Post individuell färben:

Dafür muss man oberhalb des Postinhalts einen Scriptcode eintragen. Man muss ihn oberhalb des Inhalts eintragen, damit er auch bei Nutzung eines Jumpbreaks auf der Startseite und anderen Übersichtsseiten wirken kann. Damit er überhaupt funktionieren kann, muss man zuvor unter Vorlage > HTML bearbeiten direkt über </head> Code eintragen, der jquery im Blog aktiviert.

Sowohl diesen Code als auch das Script, um die individuelle Hintergrundfarbe des post-outer einzustellen, findet man dort:

http://www.5202.de/2012/04/blogger-hintergrund-fur-einen-einzigen.html

Inneren Hintergrund eines einzelnen Post individuell färben:

Via post-body-id:

Will man nur den Hintergrund des Inhaltsbereichs eines einzelnen Post individuell färben, kann man ein CSS-Kommando nutzen. Das kann man unter Vorlage > Anpassen > Erweitert > CSS hinzufügen eintragen oder aber zwischen Style-Klammern unterhalb des Postinhalts setzen.

<style>

#post-body-4456245288458637680 {
background-color: #ffff99;
padding: 10px;
}

</style>

Via div im Post-HTML:

In manchen Vorlagen, wie in dieser hier, ist es jedoch besser, wenn man statt dessen in das Post-HTML div-Klammern um den Inhalt setzt und dafür Style-Kommandos gibt. Als Ergebnis erhält man das gleiche, als wenn man einen wohlproportionierten post-body hätte.

Hier habe ich eingetragen:

<div style="background-color: #ffff99; padding: 10px;">

Post-Inhalt dazwischen

</div>

Dieses div sollte man aber erst ganz zum Schluss eintragen; denn sonst wird es bei jedem Zeilenumbruch, den man im Verfassen-Modus macht, nochmal um jeden einzelnen Abschnitt gesetzt. Hat man border-radius kommandiert, entsteht so eine Wellenlinie am Rand.

Ute Ziemes, sg.utez.de, 2014-11-13, Änderung: 2016-02-02