5202

ein Blog über technische Fragen zu Blogger

Dynamische Ansichten: [Pseudo] Gadget einbauen

von
Blogger hat vor Monaten versprochen, für die dynamischen Vorlagen bald Gadgets auszuliefern. Passiert ist bisher nichts. Ich muss zugeben, a bisserl ärgert mich das. Die dynamischen Ansichten sind technisch 'schön', aber sehr unpersönlich.


Ich finde, ein Blog ist immer auch Ausdruck von etwas eigenem und das funktioniert ohne Gadgets nicht besonders gut. Ich habe mich deshalb an die Arbeit gemacht und mir ein [Pseudo] Gadget selbst gebaut :=). Das Ergebnis seht ihr oben als meine neue Begrüßung.

Wie funktioniert's?

Ein Gadget ist nichts anderes als ein Träger für Inhalte. In den dynamischen Ansichten gibt es keinen Zugriff auf's HTML, also bleiben nur die Posts dafür übrig - folglich habe ich einen Post zum Gadget umfunktioniert. Das funktioniert innerhalb von gewissen Grenzen gut.

Ich habe zuerst eine Sidebar gebaut, aber das hat mich optisch nicht überzeugt. Technisch funktioniert es aber.

Letztlich habe ich den gesamten Header auseinandergenommen und neu zusammengebaut und darunter das [Pseudo] Gadget als Begrüßung gesetzt. In dem Gadget liegt zum testen ein Javscript für das Google+ Badge; Friend-Connect wäre natürlich auch möglich [wenn es mal wieder läuft]. Der Post habe ich auf das Jahr 2025 datiert, d.h. bis dann bleibt er immer der oberste Post.
Achtung:
Die folgende Anleitung funktioniert nur für die dynamischen Ansicht 'Classic'. Für die anderen Ansichten schreibe ich [vielleicht irgendwann mal] etwas ähnliches.

Bauanleitung

Falls ihr eigene CSS für die dynamischen Vorlagen im Vorlagen Designer stehen habt, sichert diese zuerst, ansonsten ist sie nämlich weg.

Dann geht im Vorlagen Designer mit Vorherige Vorlage wiederherstellen zunächst zu eurer ursprünglich Vorlage zurück und setzt dort dieses Snippet ein:
.date-outer:first-child {
 display: none;
}
Die dynamischen Vorlagen sind kein eigenes Layout, sondern lesen nur euren Blog-Feed aus. Mit ?v=0 hinter der URL wird der Blog 'normal', d.h. undynamisch ausgeliefert. Bei mir schauen sich etwa 20% aller Besucher den Blog in der ursprünglichen Form an, d.h. ihr müsst die Auswirkung von so 'nem Umbau auch im 'normalen' Layout nachvollziehen. Das [Pseudo] Gadget würde im normalen Blog nur stören - blendet es besser mit dem Snippet aus.
Anfang
Ihr seid nun wieder in den dynamischen Ansichten - dort schreibt ihr ein Post, lasst die Überschrift frei und als Inhalt könnt ihr erst mal 'blabla' reinschreiben, das nachbearbeiten kommt später. Bei Post-Optionen wählt ihr Leserkommentare nicht zulassen. Diesen Post veröffentlicht ihr.

Danach öffnet ihr den Post noch mal im Editor und unter Post-Optionen wählt ihr ein Datum weit in der Zukunft, 2025 oder so - bis dahin gibt's vielleicht 'echte' Gadgets bei Google.  Ihr habt nun einen Post ohne Kommentarmöglichkeit, der ganz oben im Blog steht und da auch immer stehen bleiben wird.
CSS
Damit blendet ihr alle Post'typischen' Elemente im Post aus:
#main ol li:nth-of-type(1) .article .article-footer .publish-info, 
#main ol li:nth-of-type(1) .article .article-footer .share-controls, 
#main ol li:nth-of-type(1) .article .article-header .title, 
#main ol li:nth-of-type(1) .article-header .date.ribbon, .feedback {
display: none;
}
Eine weitere Anpassungen könnte etwa so ausschauen:
#main ol li:nth-of-type(1).item {
  background: transparent;
  max-width: 890px;
  margin: 0 auto;
  border: none;
 }
#main ol li:nth-of-type(1).item .article  {
 max-width: 890px !important;
}
Diese CSS setzt den Hintergrund des neuen Gadgets auf transparent und bringt das Gadget plus Artikel auf die gesamte Blogbreite von 890px. Mit margin könnt ihr den Abstand des neuen Gadgets nach oben und unten kontrollieren. Der erste Wert gibt den Abstand nach oben, der letzte Wert den Abstand nach unten an. Und so weiter ... seid kreativ!

Was kann ich damit anfangen?

Das neue Gadget ist für jede Art von Inhalt geeignet - HTML, CSS, Javascript, jQuery. Alles was in Blogger läuft, könnt ihr dort reinpacken. Falls ihr das Gadget nur als Container für Javascript/jQuery braucht, könntet ihr es auch ausblenden:
#main ol li:nth-of-type(1).item {
  visibility:hidden;
  height: 0;
}
In dem Fall ist display: none; falsch, weil damit das Gadget erst gar nicht geladen wird. Mit visibility: hidden; wird's geladen, aber nicht angezeigt. Falls das Gadget irgendwelche Schwierigkeiten im Layout mach, könnt ihr es auch mit position: absolut; absolut positionieren und dann mit left: 20000px; nach links verschieben. Dort stört's nicht.

Falls ihr einen zweiten oder dritten Container braucht, könnt ihr noch einen neuen Post erstellen und die selbe CSS benützen, nur mit nth-of-type(2) als Selektor.

Fragen, Kommentare, Anregungen?

Sind Fehler im Post? Offene Fragen? Nix funktioniert, wie ihr es euch vorstellt? Ich freue mich über eure Fragen und Kommentare!