Blogger-Vorlagendesigner

Den Blogger-Vorlagendesigner erreicht man über

• vom Blog aus:
  Design > Vorlage > Anpassen
• vom Dashboard aus:
  Blog-Menü (Pfeil) > Vorlage > Anpassen

Mit seiner Hilfe kann man die Vorlage wechseln oder risikolos Styles für verschiedene Elemente der verwendeten Vorlage ändern, einige per Klick, andere per Eingabe von CSS-Kommandos.

Das Anzeigefenster ist aufgeteilt in einen Auswahlbereich, einen Bearbeitungsbereich und einen Vorschaubereich. Im Vorschaubereich kann man die Wirkung der Änderungen sofort sehen, ohne sie bereits gespeichert zu haben. Per Klick oben rechts auf "Auf Blog anwenden" werden die Änderungen gespeichert und damit erst auf das Blog angewendet.

---

Änderungsmöglichkeiten per Klick (ohne Code-Kenntnisse):

Die folgenden Möglichkeiten bestehen bei den nichtdynamischen Blogger-Vorlagen. Die Möglichkeiten für die Dynamischen Ansichten sind beschränkter.

• Vorlagen: Wahl der Vorlage
  Für das Wechseln der Vorlage empfehle ich jedoch den Weg direkt über "Vorlage"; denn da kann man erstmal gucken, wogegen im Vorlagendesigner die bisherige Vorlage und die dazu gemachten Einstellungen gleich verworfen sind, wenn man eine andere Vorlage anklickt, obwohl man noch nicht gespeichert hat. Vermutlich ist das ein Programmfehler.
• Hintergrund: Haupthintergrund mittels Farbe oder einem Bild festlegen
• Breite anpassen: Breite des Blogs und der Sidebars
  Man kann die Standardbreite jederzeit per Klick wieder herstellen.
• Layout: Entscheidung über Einsatz, Anzahl und Aufteilung der Sidebars und Einsatz sowie Aufteilung der Fußzeile
• Erweitert: Änderung von Hintergrundfarbe, Textfarbe, Linkfarbe, Schriftart, Schriftgröße, Schriftgewicht, Schriftstellung bestimmter Blog-Elemente
  Man kann die einzelnen Werte jederzeit per Klick auf die ursprünglichen Standardwerte zurücksetzen.

Änderungsmöglichkeiten per CSS (mit Code-Kenntnissen):

Die folgenden Möglichkeiten bestehen sowohl bei den nichtdynamischen Blogger-Vorlagen als auch bei den Dynamischen Ansichten. Bei den Dynamischen Ansichten zeigt das Vorschaufenster jedoch nur eine Nachschau, keine Vorschau.

• Erweitert > CSS hinzufügen: Hierüber kann man fast alle (sonstigen) Blog-Elemente ändern, indem man entsprechende CSS-Codes für sie einträgt.

Allgemeines zu Einträgen unter "CSS hinzufügen":

• Es dürfen nur CSS-Kommandos eingetragen werden.
• Jedes Zeichen ist wichtig, keines darf fehlen und keines darf zuviel sein.
• Erinnerungshinweise für einen selbst kann man zwischen /* und */ schreiben. Browser wissen, dass das, was zwischen diesen Zeichen steht, kein Code sein soll.
• Was man unter "CSS hinzufügen" einträgt, wird automatisch vom Programm in's HTML geschrieben und hat Vorrang gegenüber den Standard-Kommandos. Das eigene CSS bleibt aber auch unter "CSS hinzufügen" stehen. Ändert oder löscht man es unter "CSS hinzufügen", dann wird es auch im HTML automatisch geändert bzw. gelöscht. Löscht man das eigene CSS, dann werden automatisch die Standard-Kommandos der Vorlage zu dem Thema wieder wirksam.
• Automatisch eingeordnet wird es im HTML bei den Layout-Vorlagen unterhalb der Mobile-Styles und vor dem folgenden  ]]></b:skin> und bei den Dynamischen Ansichten wird es unter /* END CUT */ einsortiert. - Speichert man mal was unter "HTML bearbeiten", dann kann es passieren, dass dabei die Einträge unter "CSS hinzufügen" gelöscht werden, sie aber im HTML stehen bleiben. Dann muss man sie im HTML ausschneiden und das HTML ohne sie speichern und die Einträge erneut unter "CSS hinzufügen" eintragen. Man muss sie deshalb vorher im HTML ausschneiden, weil sie da sonst zweimal stehen, wenn man sie erneut unter "CSS hinzufügen" einträgt. Würde man sie später im CSS löschen, hätte man sonst nämlich das Problem, dass die zweite Version im HTML weiterhin aktiv ist und man vergessen hat, dass sie da überhaupt steht.
• Schreibt man in sein "CSS hinzufügen"-Fenster ganz oben /* Eigenes CSS Anfang */ und ganz unten /* Eigenes CSS Ende */ und die eigenen Kommandos dazwischen, dann sieht man im HTML ganz deutlich, wo die eigenen Styles anfangen und wo sie aufhören und kann sie auch mittels Suchbegriff "Eigenes CSS" blitzschnell finden.

Weiterführende Links:

• Dynamische Ansichten: Vorlagendesigner schwerfälliger Web | Mobil
• Unter "CSS hinzufügen" den Überblick bewahren Web | Mobil

Ute Ziemes, sg.utez.de, 12.01.2013, Änderungen 03.02.2013, 03.03.2013, 13.06.2014, 04.07.2014