5202

ein Blog über technische Fragen zu Blogger

Blogger: Spezielle CSS-Formatierungen für einzelne Posts

von

Update

Peter Burkes hat als Kommentar ein sehr viel sinnvolleren Post-Titel als meinen ursprünglicheren vorgeschlagen - ich habe das gerne aufgenommen und umgesetzt. So wird klarer, um was es geht.

Normalerweise passt ihr mit CSS das Aussehen eures Blogs 'global' an - ihr gestaltet also nicht nur einen einzigen Post-Hintergrund, sondern alle Post-Hintergründe, nicht nur die Textfarbe für einen einzigen Post, sondern für alle Posts usw... Manchmal möchte man aber wirklich nur in einem einzigen Post den Hintergrund, Textfarbe oder whatever ändern und zwar sowohl auf der Startseite als auch auf der Postseite. Das ist relativ tricky und meines Wissens noch nie beschrieben worden, heute also mal wieder eine absolute Premiere :)!

Die Post-ID

Um die CSS für einen einzigen Post zu ändern, braucht ihr die eindeutig Identifikationsnummer (id) von diesem Post. Die bekommt ihr ganz einfach, indem ihr euren Post noch mal im Blogger-Editor aufruft und euch im Browser die URL anschaut. Dieser Post hier hat etwa diese URL:
http://www.blogger.com/post-edit.g?blogID=2562526601421291313&postID=6287639846205350621&from=pencil
Demnach ist die Post-Id 6287639846205350621 und die dazugehörige CSS-Id #post-body-6287639846205350621. Okay, verstanden?

Anwendung

Mit dieser eindeutige CSS-ID könnt ihr nun euren Post spezifisch anpassen. Dazu schreibt ihr im HTML-Modus von euren Editor am Anfang der Seite normale Style Anweisungen, die nun _nur_ für diesen Post und sonst nirgends gültig sind. Diese CSS setzt etwa für den Post die Schriftfarbe auf 'Grün':
<style>
#post-body-6287639846205350621{
color:green
}
</style>
Mit dieser Methode könnt ihr das Aussehen eures 'Schriftteils' von eurem Post praktisch beliebig anpassen und die CSS gilt dann wirklich nur für diesen Post. Ich verwende diese Methode, um nur für einen Post gültige Modelle zu beschreiben und ich war der Meinung, dass das so ein Spezialfall ist, dass außer mir das eh niemand braucht. Dieser Post ist eigentlich älter, aber nie veröffentlich worden ... wenn das jemand mal ausprobieren will und er CSS für die Anpassung braucht, einfach nachfragen. Ich denke, damit kann man ganz witzige Effekte erziehlen, aber wie immer, weniger ist mehr, also übetreibt's nicht :=).

Post-Hintergrund anpassen

Kommen wir jetzt zum eigentlich Grund für diesen Post, nämlich die Frage, wie man den Post-Hintergrund nur für einen einzigen Post anpassen kann. Vorneweg, obige Methode funktioniert nur für Dom-Elemente, die _hinter_ dem Div Container mit der eindeutigen CSS-ID liegen. Mit CSS könnt ihr nur nach so genannten 'Kindelemente' sortieren, nicht nach 'Elternlemente' - unglücklicherweise wird der Hintergrund für euren Post aber von einem 'Elternelement' bestimmt. Um das Problem trotzdem zu lösen, braucht ihr zwei Zeilen jQuery, anders geht es leider nicht.

jQuery

Falls ihr jQuery noch nicht habt, müsst ihr das Framework in euren Blog einbinden. Falls ihr jQuery bereits benützt, könnt ihr diesen Punkt überspringen.
jQuery-Framework
Zum einbinden sucht ihr in eurem HTML-Code den </head> Tag. Beachtet bitte die _genaue_ Schreibweise.

Der </head> Tag
Direkt _vor_ dem Tag setzt ihr das Script für das Framework ein:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" 
type="text/javascript">
</script>

jQuery Framework vor </head> Tag

Das Script

Mit diesem Script könnt ihr nun den Hintergrund von eurem spezifischen Post verändern - ihr setzt eure eigene CSS-ID ein und das ganze kommt dann im HTML-Modus vom Editor oben in den Post.
<script type='text/javascript'>
$(document).ready(function() {
$('#post-body-6287639846205350621').parents('.post-outer').css({'background':'red'})
});
</script>
Erklärung
Was macht dieses Script? Es sortiert das Elternelement .post-outer vor eurer eindeutigen Post-Id und schreibt dort einen neuen 'Hintergrund' in die CSS, nämlich die Farbe 'red' (rot). So simple, so far. Ihr könnt natürlich auch andere Farbwerte als Hintergrund nehmen, oder auch eine Bild-URL - das wird genauso formuliert, wie in 'normaler' CSS. Das ist auch der Grund, warum jQuery so erfolgreich ist - wer sich mit CSS auskennt, hat normalerweise keine Probleme mit jQuery. Nochmals: Falls ihr irgendetwas in einem bestimmten Post ändern wollt und euch die CSS dafür fehlt, fragt einfach nach.

Kommentare

Nichts klappt, ihr versteht nur Bahnhof? Fragt nach! Alles klappt, ihr seid begeistert? Ebenfalls ein guter Grund für ein Kommentar, ich freue mich immer ...