5202

ein Blog über technische Fragen zu Blogger

Blogger: Posts für einzelne Labels personalisieren

von
Okay, ich habe die letzten Tage nicht viel geschrieben - ich geb's zu, die ersten schönen Sommertage wollte ich nicht vorm Rechner verbringen :=). Als Ausgleich werde ich heute über etwas spannendes schreiben - was die letzten Wochen per Mail/Kommentare hier öfters angefragt worden ist - ob man nämlich einen Post mit einem bestimmten Label individuell gestalten, d.h. 'personalisieren' kann.


Gestern in den Kommentaren zu diesem Post habe ich für spezielle Aufgabenstellungen eine jQuery-Lösunge beschrieben und die funktionieren auch, nur find ich's unbefriedigend, weil's für jedes spezielle Problem ein eigenes Script erfordert. Ich habe was 'einfacheres' gesucht, also womit sich ein Post mit CSS direkt nach dem Label sortieren lässt und ich denke ich habe so eine 'einfache' Lösung gefunden, yeah! Stay tuned ...

Testblog

Vorneweg: Probiert das bitte zuerst in einem Test-Blog aus! Sichert die Vorlage eures Haupt-Blogs, bevor ihr irgendwelche Änderungen durchführt. Nehmt das ernst, ein Layout ist schnell zerschossen.

Die Idee dahinter ...

... ist eigentlich sehr simpel und zwar benutze ich eine Zeile jQuery, um Posts mit einem spezifischen Label eine neue Klasse zu geben. Alles andere wird dann 'klassisch' mit CSS gemacht. Damit lies sich zum Beispiel der Hintergrund eines Posts (mit einem bestimmten Label) individuell gestalten, eine kleine Grafik vor jedem Post setzen (einem Post mit dem Label 'Foto' eine kleine Kamera zuordnen und so weiter ...) oder ihr könntet auch bestimmte Posts _nicht_ auf der Startseite anzeigen lassen - was öfters mal gefragt wird. Deren Möglichkeiten sind also viele, seit kreativ!

Vorbereitung

Im folgenden braucht ihr jQuery. Falls ihr das 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
Attributions-Erweiterung des Body Tags
Für das 'Ausblenden' von Posts mit einem spezifischen Label auf der Startseite müsstet ihr außerdem die Attribution in eurem Body-Tag umschreiben - falls euch das nicht interessiert, könnt ihr diesen Punkt überspringen

Das ist euer Body Tag:
<body expr:class='&quot;loading&quot;  + data:blog.mobileClass'>
schreibt den so um:
<body expr:class='&quot;loading&quot;  + data:blog.mobileClass +  &quot; &quot;  + data:blog.pageType'>

... die Vorbereitung ist nun fertig

Okay, das war's an Vorbereitung, kommen wir zur eigentlichen Arbeit - als erstes schreibt ihr mit jQuery für ein spezifisches Label eine neue Klasse.
Das Script
Das jQuery-Script kommt in ein HTML/Java Gadget und kann im Grunde beliebig platziert werden (möglichst tief, etwa im Footer, ist es aber besser).
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(".post-labels a").filter(":contains('euerLabel1')").parents('.date-outer').addClass('label1');
$(".post-labels a").filter(":contains('euerLabel2')").parents('.date-outer').addClass('label2');
$(".post-labels a").filter(":contains('euerLabel3')").parents('.date-outer').addClass('label3');
//...
});
//]]>
</script>
Anpassung
Statt 'eurerLabel1' setzt ihr den Namen eures Labels ein - beachtet aber, das Labels case-sensitiv sind, d.h. ein Label 'Foto' ist etwas anderes als ein Label 'foto'. Ihr müsst also genau den Label-Namen einsetzen, den ihr auch im Blog verwendet. Die neue Klasse für einen Post mit dem Label 'euerLabel1' lautet .label1. Falls euch das zu unübersichtlich wird, könnt ihr natürlich hier auch eure eigenen Klassen-Namen einsetzen (etwa 'foto' statt 'label1'). Dementsprechend ändert sich dann später die CSS, ich denke mal die Transferleistung kriegt ihr hin, oder?
Was macht das Script?
Das Script ist 'unaufdringliches' Javascript, d.h. es setzt lediglich neben dem Selector .post-outer eine neue Klasse, falls in dem HTML-'Knoten' ein spezifisches Label gefunden wird. Es werden auch zwei, drei oder mehr Klassen geschrieben, je nachdem wie viele Labels gefunden werden und wie viele Labels ihr in dem Script angebt. Falls ihr mehr Labels/Klassen braucht als die drei die ich vorgegeben habe, nehmt eine neue Zeile und zählt bei den Klassen um '1' weiter. Die vierte Zeile würde lauten:
//...
$(".post-labels a").filter(":contains('euerLabel4')").parents('.date-outer').addClass('label4');
Ist nicht schwierig, wenn Fragen dazu sind, könnt ihr euch in den Kommentaren melden.
CSS
Okay, was könnt ihr nun mit dieser neuen Klasse anfangen? Ich gebe euch ein paar Spielereien als Beispiele, um eure Fantasie anzuregen - es ist natürlich noch viel mehr möglich.
Hintergrund für spezifisches Label
Ihr möchtet für das Label 'euerLabel1' den Posthintergrund auf 'red'(=rot) setzen? Mit CSS geht das nun und zwar so:

Vorlagen Designer > eigene CSS einsetzen
.post-outer.label1 {
background-color: red;
}
Angewendet wird die jeweilige CSS, indem ihr hinter der letzten geschweiften Klammer } der letzten Zeile die Taste 'Eingabe' drückt. Wenn es passt, könnt ihr die Änderung mit 'auf Blog anwenden' sichern.
Grafik vor Post-Titel für spezifisches Label
Ihr wollt vor jedem Post-Titel mit dem Label 'foto' ein kleine Kamera anzeigen lassen? Ihr könnt euch diesen Post mal zur Gemüte führen, da habe ich das für 'allgemeine' Post-Titel schon mal beschrieben. Für spezifische Labels passt ihr die CSS so an:
.post-outer.label1 h3.post-title::before {
  content: url(http://eureGrafik.png);
  display: inline-block;
  position: relative;
  top: 0px;
  left: 0px;
  margin: 0 5px 0 0;
}
Post von spezifisches Label auf der Indexseite ausblenden
Ihr schreibt einen Blog über's Backen und ihr habt einen Post, der partout nicht dazu passt und den ihr auf der 'Homepage/Startseite' eigentlich _nicht_ anzeigen_ wollt? Hier ist die Lösung - damit das funktioniert, müsst ihr zunächst die Atributionserweiterung von oben durchführen.

.index .post-outer.label1 {
  display: none
}
Alle Posts mit dem Label 'label1' werden damit auf der Startseite ausgeblendet und nur auf der Postseite angezeigt. Das ist sicherlich nur für sehr spezielle Probleme nützlich, aber vielleicht hilft es ja dem ein oder anderen weiter. Ihr müsst natürlich irgendein Link auf eurer Startseite zu diesem Post/Label setzen, sonst finden eure Leser nix ...

Kommentare

Irgendwelche super-tollen Layout Ideen, die ihr damit umgesetzt habt? Lasst die anderen daran teilhaben, schreibt einen Kommentar :=)!