5202

ein Blog über technische Fragen zu Blogger

Gadgets nur auf bestimmten Seiten anzeigen

von

In Blogger könnt ihr jedes Gadget entweder auf allen Seiten, oder nur auf einer bestimmten Seiten, wie etwa einer spezifischen statischen Seite, anzeigen lassen. Das geht einfach mit CSS, oder etwas komplexer dafür besser mit Blogger Layout Daten-Tags.

Die Version mit Daten-Layout-Tags ist deswegen besser, weil das Gadget damit wirklich nur auf der spezifischen Seite und nicht global auf jeder Seite geladen wird. Das verringert den Overhead und kommt der Ladezeit zu gute.

Ich beschreibe beide Techniken am Beispiels des Kontaktformular-Widgets. Manchmal möchten Blogbetreiber ja eine Kontaktseite mit eigenem Kontaktformular haben und nehmen dazu eine externe Lösung, weil sie nicht wissen, dass bei Blogger das Kontaktformular auch auf einer statischen Seite funktioniert.

Lösung mit CSS

Vorbereitung

Um ein Widget auf einer bestimmten Seite anzuzeigen bzw. auszublenden braucht ihr als erstes die id dieses Gadgets.

Dazu ruft ihr im Blogger Dashboard unter Layout > Gadget hinzufügen das Gadget auf - das schaut so oder so ähnlich:

In der Adresszeile des Browsers findet ihr nun unter widgetType die id des Widgets:

https://www.blogger.com/rearrange?blogID=3764219991817081177§ionId=crosscol&action=editWidget&widgetType=ContactForm&referrer=directory

In diesem Fall ist die id also ContactForm

Gadget ausblenden

Starten wir damit, dass wir das Kontaktformular-Widget zunächst global ausblenden. Ihr schreibt dazu im Blogger Dashboard unter Vorlage > anpassen > erweitert > CSS hinzufügen eine CSS Anweisung:

#ContactForm {
  display: none
}

Fertig! Damit wird das Kontaktformular-Widget zwar geladen, aber nicht angezeigt.

Gadget anzeigen

Wir wollen das Gadget jetzt auf einer bestimmten Seite anzeigen. Stell dazu diese Seite in den Blogger Editor und wechselt auf HTML-Ansicht.

Schreibt nun ganz oben auf die Seite diesen Ausdruck:

<style>
#ContactForm {
  display: block
}
</style>

Speichern - Fertig! Das Kontaktformular-Widget wird nun exklusiv auf dieser einen Seite angezeigt ... wollt ihr es auf weiteren Seiten haben, schreibt ihr den gleichen Ausdruck auch auf diesen Seiten. Wollt ihr andere Gadgets anzeigen, besorgt euch die id und formuliert analog dazu den Code.

Lösung mit Layout-Daten-Tags

Die Lösung mit CSS ist einfach, hat aber den Nachteil, dass das Gadget zwar nicht angezeigt, aber dennoch geladen wird. Das erzeugt unnötige Ladezeit.

Wir schauen uns deswegen eine Lösung mit den Blogger Layout-Daten-Tags an. Ich würde das immer bevorzugen.

xml

Bei Blogger liegen Widgets in so genannten sections. Definieren wir zunächst eine section

<b:section class='aside' id='aside' name='aside' showaddelement='no'>
</b:section>

Kapseln wir diese sections nun mit einem konditionalem Layout-Daten-Tag, der diesen Bereich nur auf der Seite 'kontakt' anzeigt:

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + &quot;p/kontakt.html&quot;'> 
    <b:section class='aside' id='aside' name='aside' showaddelement='no'>
     </b:section>
</b:if>

Wollt ihr das Gadget auf einer anderen Seite als 'kontakt' anzeigen, müsst ihr den Begriff entsprechend austauschen. Achtet darauf, dass Seitenname case sensitiv sind, d.h. kontakt != Kontakt.

Letzter Schritt: Wir setzen das Kontaktformular-Widget als xml Code ein:

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + &quot;p/kontakt.html&quot;'> 
    <b:section class='aside' id='aside' name='aside' showaddelement='no'>
        <b:widget id='ContactForm1' locked='false' title='Kontaktformular' type='ContactForm'>
        </b:widget>
     </b:section>
</b:if>

Fertig! Wir haben nun einen fertigen xml Ausdruck, den wir beliebig innerhalb des Blogger-Layouts platzieren können. Ein guter Platz dafür ist etwa direkt _oberhalb_ diesen Ausdrucks:

 <b:section class='main' id='main' name='Main' showaddelement='no'>

Ihr könnt das Snippet einsetzen wo immer ihr wollt, nur nicht innerhalb einer weiteren section. Probiert einfach in eurem Layout a bisserl rum und ihr werdet schnell ein Gefühl dafür bekommen, was funktioniert und was nicht.

Fragen, Probleme?

Ihr habt Fragen, Anmerkungen oder weitere Probleme zu den Blogger Layout-Daten-Tags? Dafür gibt es die Kommentare :)