5202

ein Blog über technische Fragen zu Blogger

Blogger Layout: Seiten-Typen

von
Ich habe gestern über eine kleine Spielerei mit den Seitentypen in Blogger geschrieben. Ich weiß das es viele Blogger interessiert, die verschiedenen Seiten-Typen unterschiedlich zu gestalten. Ich möchte die dafür notwendige HTML/CSS mal in einem Post kompakt zusammenfassen.

Seiten-Typen
Insgesamt gibt es acht verschieden Seiten bei Blogger: Index-Seite, Post-Seite, statische Seite, Archiv-Seite, Such-Seite, Label-Seite, Homepage und mobile Seite. Jeder dieser Seite besitzt einen eigenen Layout Data-Tag und als 'verborgene', undokumentierte Funktion eine eigene CSS-Klasse. Ihr könnt also euren Blog auf jeder dieser Seiten-Typen ein anderes Aussehen geben. Ein Post kann auf der Startseite anders aussehen als auf der Postseite, die statischen Seiten können anders gestaltet werden als der Rest vom Blog und so weiter. In diesem Layout benütze ich viel von dieser Technik.
Konditionelle Tags - CSS Erweiterung
Grundsätzlich gibt es zwei verschiedene Methoden, mit dem ihr euer Seiten-Typen unterschiedlich gestalten könnt - konditionelle Tags oder eine CSS Erweiterung des Body-Tags. Beides ist smart, hat aber unterschiedliche Einsatzbereiche. Ihr könnt mit konditionelle Tags vor allem euer Markup manipulieren, während CSS ... na, ja wenn ihr nur euer Style verändern wollt, ist CSS die bessere Methode. Eigentlich logisch?

Test-Blog

Da bei so etwas viel schief gehen kann, probiert das bitte zuerst in einem Test-Blog aus!

Konditionelle Tags

Weil's immer lustiger ist so etwas an einem konkreten Beispiel durchzuspielen, möchte ich als Arbeitsaufgabe mit konditionelle Tags über den jeweiligen Seiten-Typ eine kleine Überschrift einblenden: "Ich bin eine statische Seite/Post-Seite usw."

Bevor ihr dafür die richtige Stelle in eurem HTML sucht, müsst ihr zuerst ein Häckchen beim Schalter "Widget-Vorlage komplett anzeigen" setzen.

Vorlage > HTML bearbeiten > Widget-Vorlage komplett anzeigen
Wenn ihr das habt, sucht ihr in eurem HTML diesen Tag:
<data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
_Oberhalb_ von <data:post.body/> setzt ihr nun die jeweiligen konditionellen Tags ein.
Index-Seite
<b:if cond='data:blog.pageType == "index"'>
<h4>Ich bin eine Index-Seite!</h4>
</b:if>
Post-Seite
<b:if cond='data:blog.pageType == "item"'>
<h4>Ich bin eine Post-Seite!</h4>
</b:if>
statische Seite
<b:if cond='data:blog.pageType == "static_page"'>
<h4>Ich bin eine statische Seite!</h4>
</b:if>
Archiv-Seite
<b:if cond='data:blog.pageType == "archive"'>
<h4>Ich bin eine Archiv-Seite!</h4>
</b:if>
Such-Seite
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchQuery'>
<h4>Ich bin eine Such-Seite!</h4>
</b:if>
</b:if>
Label-Seite
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchLabel'>
<h4>Ich bin eine Label-Seite!</h4>
</b:if>
</b:if>
mobile Seite
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.isMobile'>
<h4>Ich bin eine mobile Seite!</h4>
</b:if>
</b:if>
Ihr könnt das ausprobieren, die Überschrift (Ich bin ...) wird nur auf dem jeweiligen Seitentyp angezeigt. Ihr könnt die Tags auch beliebig mit anderen globen Layout-Tags kombinieren. Wenn ihr zb. soziale Buttons wie 'Facebook', 'Twitter' und 'Google+' nur auf der Postseite und statische Seite und nicht auf der Indexseite haben wollt, dann sind diese Tags das Mittel der Wahl. Ihr findet bestimmt irgendwelche nützlichen Dinge, die ihr damit machen könnt, ihr dürft gerne über eure Pläne in den Kommentaren reden ... :=)

CSS-Erweiterung

Während die konditionellen Tags in Blogger gut dokumentiert und allgemein bekannt sind, ist die CSS-Erweiterung undokumentiert. Ich bin da nur durch eine Bemerkung vom Blogger-Entwickler Brett Morgan drauf gestoßen.
Erweiterung
Damit das funktioniert, müsst ihr zunächst eine neue Attribution in euren Body-Tag schreiben - 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'>
Neue CSS Klassen
Wenn ihr das gemacht habt, stehen euch nun die neuen CSS-Klassen .index [=Start-Seite], .item [=Post-Seite], .archive [=Archiv-Seite], .static_page [=statische Seite] und .mobile [=mobile Seite] zur Verfügung.
Beispiele
Damit könnt ihr allerlei lustige Sachen machen, ich gebe euch Beispiele:

Statischen Seite: Überschriften auf die Farbe 'blau' setzen:
.static_page h3 {color: blue}
Post Seiten: Schriftgröße auf 120% setzen:
.item {font-size: 120%}
Startseite: Blog ausblenden
.index #Blog1{display: none}
Für die letzte CSS bin ich übrigens aus dem Blogger-Hilfe-Forum geflogen - es wurde behauptet, man kann einen Blog nicht auf der Startseite ausblenden, ich hab's mit einer Zeile CSS hinbekommen. Yeah ... und dann wurd's a bisserl irrational ... Schwamm drüber.
Wie ihr sicherlich an diesen wenigen Zeilen CSS gemerkt habt, ist das eine sehr mächtige Funktion. Ihr könnt damit das Aussehen eures Blogs sehr fein kontrollieren, ihr könnt aber auch euren Blog sehr schnell zerschießen. Probiert das deswegen zuerst in einer Test Umgebung aus.

Anmerkungen?

Irgendwelche Pläne, einzelne Seitentypen unterschiedlich zu gestalten?