5202

ein Blog über technische Fragen zu Blogger

Dynamische Ansichten: Eigenen Header einbauen

von
Der Header ist das Gesicht und Aushängeschild eines Blogs und spielt bei der Personalisierung eine wichtige Rolle. Blogger bietet in den dynamischen Ansichten bisher noch keine Möglichkeit für einen eigenen, personalisierten Header, hat das aber für die Zukunft angekündigt. Ich wollte eigentlich abwarten, was von Blogger kommt, aber jetzt hat mich hat ein Leser gefragt, wie das geht, e voilà, schreibe ich etwas dazu.

Vorüberlegung: Header-Größe

Zuerst eine Vorüberlegung. Im Header gibt's nur 65px Höhe für ein eigenes Header-Bild. Wer mehr will, muss dazu den gesamten Header per CSS umbauen. Das ist möglich, aber ein großes ABER: Der Header ist fixiert und ein Headerbild von sage ich mal 250px Höhe, erzeugt auf einem 'normal' großen Bildschirm eine Schnittkante von vielleicht 2/3 der Bildschirmhöhe. Außer Header gibt's dann nicht mehr viel zu sehen. Das nervt eure Leser und das ist das letzte was ihr wollt. Also lasst es bleiben. Fangt erst mal mit einem Header von maximal 65px Höhe an.

Der einfache Weg

Wie oft im Leben gibt es einen ein einfachen und einen richtigen Weg :=).

Ich zeig euch erst mal den einfachen Weg, vielleicht reicht er für einige aus. Ihr könnt euren Header ganz normal als 'Hintergrund' über Vorlagen Designer > Hintergrund hochladen. Nach dem Hochladen wählt ihr Ausrichtung das Symbol für 'Mitte' und 'nicht kacheln' und ihr habt den Header im Blog.

Als Ergebnis ist der Header nun Hintergrund der dynamischen Ansicht, d.h. ihr seht Blogtitel und Blogbeschreibung. Wenn ihr das nicht wollt, müsst ihr beide noch ausblenden und zwar so:
Altes Dashboard-Layout
Dashboard > Design > Vorlagendesigner > Erweitert > CSS hinzufügen > Code einsetzen > drückt die Eingabe-Taste hinter dem letzten Zeichen } der letzten Zeile > Auf Blog anwenden
Neues Dashboard-Layout
Dashboard > Vorlage > 'Live im Blog' anpassen > Erweitert > CSS hinzufügen > Code einsetzen > drückt die Eingabe-Taste hinter dem letzten Zeichen } der letzten Zeile > Auf Blog anwenden
.title h1, .title h3 {
display: none !important;
}

Header-Bild mit Hintergrund einbauen

Der 'einfache' Weg funktioniert spätestens dann nicht, wenn ihr bereits einen Hintergrund im Blog habt. Hintergrund auf Hintergrund geht nicht. Außerdem erstreckt sich in den dynamsichen Ansichten der Hintergrund über den gesamten Blog, also auch im Header.
Bevor ihr euer eigenes Header-Bild einbaut, müsst ihr zuerst 'Platz' dafür schaffen, also den Hintergrund entfernen. Das geht damit:
#header .header-bar {
  background-image: none !important;
}
Ohne Hintergrund schaut der Header nun so aus:
Der Einbau des Header-Bildes geschieht auch wieder über CSS. Dafür einen Selektor zu finden, war ... schwierig. Der Header-Hintergrund ist ja ausgeblendet. Ich habe lange darüber nachgedacht, bis mir eingefallen ist, dass <span> Elemente ja auch einen Hintergrund haben können. Es gibt im Header ein einziges <span> Element, nämlich den Titel. Also habe ich das Header-Bild als Hintergrund-Bild vom Blog-Titel eingebaut.
#header-container #header.header .header-bar span.title{
  background: url(http://goo.gl/y4cMJ) no-repeat center;
}
Als URL nehmt ihr natürlich die von eurem eigenen Header-Bild. Das Header-Bild wird mit center zentriert. Wollt ihr euren Header linksbündig, lasst das Atrribut center weg. Soll das Header-Bild rechtsbündig stehen, nehmt statt dessen right

Zusammenfassung

Noch mal die gesamte CSS im Block:
Altes Dashboard-Layout
Dashboard > Design > Vorlagendesigner > Erweitert > CSS hinzufügen > Code einsetzen > drückt die Eingabe-Taste hinter dem letzten Zeichen } der letzten Zeile > Auf Blog anwenden
Neues Dashboard-Layout
Dashboard > Vorlage > 'Live im Blog' anpassen > Erweitert > CSS hinzufügen > Code einsetzen > drückt die Eingabe-Taste hinter dem letzten Zeichen } der letzten Zeile > Auf Blog anwenden
/* Blogtitel, Untertitel ausblenden */
.title h1, .title h3 {
display: none !important;
}
/* Header-Hintergrund entfernen */
#header .header-bar {
  background-image: none !important;
}
/* Eigenes Header-Bild einbauen*/
#header-container #header.header .header-bar span.title{
  background: url(http://goo.gl/y4cMJ) no-repeat center;
}
Das funktioniert mit allen dynamischen Ansichten und in allen Browsern. Aber wie gesagt, das Header-Bild darf nicht größer als 65px sein

Och schade - geht ein größeres Header-Bild gar nicht?

Doch, ein größeres Header-Bild als 65px geht auch. Ich rate zwar davon ab, wenn es jemand mal braucht, hinterlasst einen Kommentar, dann beschreibe ich's euch.