5202

ein Blog über technische Fragen zu Blogger

Blogger: Header fixieren

von
Es wurde ein Tutorial darüber gewünscht, wie sich der Header fixieren lässt. Ich hab's kurz recherchiert und das Thema wurde tatsächlich noch nie [sic!] für die neuen Blogger Layouts beantwortet - noch nicht mal in der englischsprachigen Bloggospähre. Das hier ist also eine Premiere :=) - die komplette Lösung für alle modernen Browser inklusive IE9 und mobile Browser. Gerade letzteres ist stark, bis vor kurzem konnten mobile Browser nämlich überhaupt keine fixierten Elemente darstellen!

Demo
Ich habe eine Demo gebaut, damit ihr vorab das Ergebnis der Arbeit sehen könnt. Ich möchte damit kein Webdesign-Preis gewinnen, sondern nur das Prinzip dahinter demonstrieren.
Achtung
Wie ihr an dem Beispiel sehen könnt, eignen sich für so etwas eher lange schmale als kurze hohe Bilder und zwar einfach aus dem Grund, weil die Schnittkante vom Blog sonst zu hoch wird. Wenn eure Leser auf 2/3 des sichtbaren Bereiches nichts von eurem Blog mitbekommen, weil alles mit einem fixierten Bild blockiert ist, werden sie nicht glücklich sein. Also setzt dieses Gestaltungsmittel vorsichtig ein!

Headerbild

Ihr fangt damit an, dass ihr das Header-Bild genauso hochladet, wie ihr das immer machen würdet. Wählt bei 'Platzierung' die Option "Anstelle von Titel und Beschreibung".
Speichert das ganze ab. Alles ganz normal bis jetzt.

Ihr geht nun zum Vorlagen Designer und sucht 'Benutzerspezifische CSS hinzufügen"

CSS
Darein packt ihr nun diese CSS.
.header-outer {
  position: fixed;
  width: 100%;
  top:0;
  background: $(body.background.color);
  z-index: 9;
}
.tabs-outer {
  margin-top: 230px;
}
Überprüfen
Der margin-top Wert von 230px entspricht genau der Höhe meines Beispiel-Bilds - ihr müsst also den Wert an die Höhe eures eigenen Header-Bildes anpassen. Drückt dann nach der letzten geschweiften Klammer } der letzten Zeile die Taste 'Eingabe' [Enter] - in der Vorschau solltet ihr jetzt erkennen, dass das Header-Bild fixiert ist. Falls ihr nichts seht, habt ihr irgendeinen Fehler gemacht oder ihr benützt kein neues Blogger-Layout. In dem Fall hinterlasst eine kurze Nachricht in den Kommentaren. Ansonsten sichert ihr die Änderung mit 'Auf Blog anwenden'.

Das war alles, fertig!
Navbar
Ich finde bei dieser Lösung stört die Navbar sehr, also blendet sich am besten auch noch aus.
body .navbar  {
  height: 0px !important;
  visibility: hidden;
  display: none;
}
Angewendet wird das genauso wie die CSS für das Header-Bild.

Anmerkung

Das funktioniert für alle Layouts in allen Browsern, einschließlich dem IE9 und mobile Browser. Falls es irgendwelche Darstellungsfehler bemerkt, hinterlasst bitte eine kurze Nachricht in den Kommentaren. Aufgrund der Struktur von den Layouts eignen sich wohl nur 'Simple' und 'Awesome' wirklich für einen fixierten Header. Aber probiert's selber aus, das ist nur mein Eindruck. Wenn ihr so etwas gemacht habt, überprüft das auch selber kurz in den verschiedenen Browser - sicher ist sicher.