Einzelne Seiten-Tabs individuell färben

In einer Layout-Vorlage von Blogger kann man die Farben für Hintergrund und Text eines Seiten-Gadgets in der Webverson des Blogs, das im Bereich "crosscol" bzw. "Cross-Column" des Layout einsortiert ist, bequem im Vorlagendesigner festlegen. Unter Vorlage > Anpassen > Erweitert > Tab-Text bzw. Tab-Hintergrund kann man unterschiedliche Farben für unausgewählte Tabs einerseits und den gerade ausgewählten bzw. gehoverten Tab andererseits angeben. Die Farben gelten für alle Tabs.

Mit welchen CSS-Kommandos man einzelne Tabs individuell färben kann, erfährt man hier.

Unterschiedliche Tabs der Seitenliste in Webversion und Mobilversion anzeigen

Man kann in den Dynamischen Ansichten zwar keine unterschiedlichen Seitenliste-Gadgets anzeigen lassen, aber man kann per CSS in der Webversion und in der Mobilversion des Blogs unterschiedliche Tabs der Seitenliste ausblenden und so jeweils andere Tabs anzeigen lassen, zumindest sofern man die Mobilvorlage auf Benutzerdefiniert eingestellt hat und die Ansicht Classic nur für die Mobilversion nutzt.

Valentinstag-Zwangsdeko abschalten

Auf den Dynamischen Ansichten hat Blogger um Null Uhr des 14.02.2016 ein Script aktiviert, das nach einer Minute geladen ist und verursacht, dass bei jedem Klick Herzchen erscheinen. Es handelt sich um Kalenderdeko zum Valentinstag.

Unterschiedliche Seitenlisten für Webversion und Mobilversion

Außer einem einzelnen Link, der einem ausdrücklich ermöglicht die Blogversion zu wechseln, kann man in der jeweiligen Navigation keine Links gebrauchen, die einen aus der Version rausführen, in der man gerade ist. Die Linkadressen, die zu Seiten führen, die man unter "Seiten" erstellt und im Seitenliste-Gadget zur Anzeige im Gadget freigegeben hat, werden automatisch auf die Version umgestellt, in der man gerade ist. Diejenigen Links zu bloginternen Zielen jedoch, die man im Seitenliste-Gadget mit "Externen Link hinzufügen" erstellt hat, werden nicht an die Version angepasst, in der man sich gerade befindet.

Schon deshalb ist es besser, wenn man in den beiden Blogversionen unterschiedliche Seitenlisten verwendet und so per "Externen Link hinzufügen" jeweils andere Linkadressen eintragen kann. Man kann dann auch unterschiedliche Seiten zur Anzeige freigeben, wenn man dort zum Beispiel Linklisten zu internen Zielen anbietet.

Classic als mobile Klasse nutzen

In den Layout-Vorlagen gibt es die Klasse "mobile", mit Hilfe derer man das Design und Layout der Mobilversion des Blogs unabhängig von dem Design und Layout der Webversion per CSS ansprechen kann. In den Dynamischen Ansichten gibt es keine solche Klasse. Es wird unter der mobilen Adresse aber nur die mobile Version der Ansicht "Classic" angezeigt und zu ihr gibt es die Klasse "classic".

Inhalte in der Mobilversion anders anzeigen lassen

In der Webversion des Blogs ist es schade, wenn man die Breite des Blogs nicht ausnutzt, um Inhalte in Posts oder auf Seiten nebeneinander anzuzeigen, die nebeneinander stehend übersichtlicher sind. Auch Hover-Effekte können hier die Nutzbarkeit verbessern.

Auf Smartphones sind derlei Darstellungsformen jedoch ungeeignet.

Navbar-Platzhalter in mobiler Layout-Vorlage entfernen

In Blogs, die eine Layout-Vorlage nutzen, ist neuerdings in der Mobilversion des Blogs ein Platz für die nicht vorhandene Navbar reserviert. Dadurch wird der Header des Blogs in Smartphones nun mit 30px mehr Abstand nach oben angezeigt.

Farben des Cookie-Hinweises ändern

Seit Ende Juli 2015 weist Google in Europa auf den Einsatz von Cookies in Blogger-Blogs durch eine vorgeschaltete Einblendung hin. Am 05. August morgens (5 Uhr MEZ) hat Blogger das HTML und CSS dieser Einblendung nochmal geändert. Auf großen Screens stehen die Links jetzt rechts neben dem Hinweis-Text, bei schmalen Screens stehen sie unterhalb des Hinweis-Textes. Außerdem haben die Links nun keine separate Hintergrundfarbe und keine Rahmen mehr.

Hier ist das komplette Standard-CSS der zweiten Version der Einblendung notiert und ein Beispiel dazu, wie man zumindest die Farben der Einblendung ändern kann.

Einblendung des Cookie-Hinweises verhindern

Seit Juli 2015 hat Google eine Cookie-Hinweis-Einblendung für Blogger-Blogs installiert. Sie ist nun nicht mehr an die Navbar gebunden und wird daher nun auch dann angezeigt, wenn man keine Navbar aktiviert hat. Außerdem wird der Cookie-Hinweis nun auch in der mobilen Version des Blogs angezeigt und auch in den Dynamischen Ansichten.

Wenn man einen eigenen Cookie-Hinweis realisiert hat, stört die Cookie-Hinweis-Einblendung von Google jedoch.

Kommentare: Anzeige von Profilbild-Platzhaltern unterdrücken

Ist ein Blogger-Profil nicht öffentlich oder beinhaltet es kein Profilbild, dann wird ein Platzhalter als Profilbild neben dem Kommentar angezeigt, wenn mit diesem Profil kommentiert wird.

Lightbox umgestalten

Die Lightbox ist das Anzeigefenster, das sich über das Blog legt, wenn man in einer nicht-dynamischen Vorlage ein Bild angeklickt hat, das man in das Blog hochgeladen hatte. Normalerweise hat die Lightbox einen teiltransparenten dunklen Hintergrund. Unten, in der Bildauswahlleiste ist der Hintergrund schwarz ohne Transparenz.

Einzelnen Post-Abschnitt per Klick einblenden und wieder ausblenden

Will man, einen bestimmten Post-Abschnitt erst angezeigen lassen, wenn darauf geklickt wird, kann man das mit jQuery, JavaScript, CSS und Div-Containern realisieren. Mit dieser Methode kann man z.B. eigene Übersetzungen oder zusätzliche Details für besonders Interessierte anhängen, ohne, dass die Übersichtlichkeit des Posts leidet. Man kann das selbstverständlich auch auf Seiten und in HTML-Gadgets nutzen, innerhalb von Posts kommt der Bedarf aber wohl häufiger vor.

Hintergrundbild an Displaygröße anpassen

Wenn man ein zu kleines Bild als Hintergrundbild hochgeladen hat, das Bild aber über den ganzen Bildschirm angezeigt werden soll, kann man eine der folgenden beiden Lösungsmöglichkeiten anwenden:

1. Das Bild gegen eine größere Version tauschen, die man im Bildbearbeitungsprogramm erstellt.
2. Ein CSS-Kommando eingeben, welches das zu kleine Bild proportional stimmig an die Display-Größe anpasst.

Hier im Post wird Möglichkeit 2 beschrieben.

Vorlage Awesome - Variante Groovy: Ändern der Hintergrundfarbe des Date-Header

Die Farbe hinter dem Tagesdatum über den Posts kann man per CSS nicht ansehnlich ändern, wenn man nicht auch das Hintergrundbild austauscht, das dort wirksam ist.

Einzelnen Post-Hintergrund individuell färben

In diesem Post gibt es zwei Hintergründe, die vom normalen Post-Hintergrund abweichen, zum einen den äußeren Post-Hintergrund (post-outer) und zum anderen den inneren Post-Hintergrund (post-body).

Seiten-Tabs zentrieren

Je nach Blog-Design und Anzahl der Seiten-Tabs kann es besser aussehen, wenn man die Seiten-Tabs zentriert. Das kann man per CSS realisieren.

Gadget nur zusammen mit bestimmter Seite oder bestimmtem Post anzeigen

Will man ein Gadget nur dann anzeigen lassen, wenn eine bestimmte Seite oder ein bestimmter Post geöffnet ist, kann man das per CSS realisieren.

Dazu muss man das Gadget unter Layout hinzufügen, die ID des Gadget im Quelltext ausfindig machen und das Gadget im Vorlagendesigner mit einem Kommando unter CSS hinzufügen allgemein ausblenden, aber mit einem Kommando im HTML der gewünschten Seite bzw. des gewünschten Post verfügen, dass es angezeigt werden soll.

Dadurch, dass das Kommando auf der Seite bzw. in dem Post Vorrang hat, aber nur geladen wird, wenn die Seite bzw. der Post geöffnet ist, wird das Gadget nur dann angezeigt, wenn diese spezielle Seite bzw. dieser spezielle Post geöffnet ist.

Bilder ohne Bildunterschrift automatisch auf Postbreite skalieren

Mit Hilfe eines CSS-Kommandos kann man dafür sorgen, dass alle Bilder, die man in einem Post oder einer Seite hochlädt, auf Post-Breite skaliert angezeigt werden.

Ich nenne hier Kommandos für Layout-Vorlagen und für Dynamische Ansichten, die bei Bildern ohne Bildunterschrift erfolgreich sind und auch in der Mobilversion des Blogs passend angezeigt werden.

Image-Gadget: Titel ausblenden

Seit dem 17.09.2013 muss man im Image-Gadget einen Titel eintragen, sonst kann man das Gadget nicht speichern. Für das freie Gestalten der Sidebar ist das sehr störend. Da die Änderung offenbar nicht zurück genommen wird, notiere ich hier, was man tun kann, damit über einem bestimmten Image-Gadget oder sämtlichen Image-Gadgets kein Titel erscheint.

Vorlage Fantastisch: Linien umfärben oder entfernen

Alle Varianten der Vorlage Fantastisch haben Linien vertikal am inneren Bereich, horizontal im Tabbereich, im Postbereich und im Sidebarbereich:

• Seitlich am inneren Bereich
• Grundlinie für die Tabs
• Unter dem Datum des Tages
• Zwischen Posts eines Tages
• Unter Gadget-Titeln
• Unter Gadgets