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.

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.

Bei Drive den Code zum Einbetten einer Datei finden

Nutzt man die neue Drive-Oberfläche, dann kommt man so zum Iframe-Code:

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).

trbidi-Eintrag stoppen

Wem das Programm automatisch in jeden neuen Post (oder Seite) oder jeden Post (oder Seite), den er bearbeitet, das folgende in das Post/Seiten-HTML einträgt:

<div dir="ltr" style="text-align: left;" trbidi="on">
</div>

bei dem ist die Transkriptionsfunktion aktiviert.

Print-Friendly-Button im Blogspot-Blog hinzufügen

Print Friendly bietet Script-Code für einen Button, über den man den Inhalt eines Post oder einer Seite druckerfreundlich ausdrucken oder als PDF speichern kann.

Gadget bei bestimmter Seite oder bestimmtem Post ausblenden

Man kann per CSS dafür sorgen, dass ein Gadget ausgeblendet wird, wenn eine bestimmte Seite oder ein bestimmter Post geöffnet ist.

Dazu muss man im Quelltext nachsehen, welche ID das Gadget hat, das ausgeblendet werden soll und dann in das HTML der entsprechenden Seite bzw. des entsprechenden Post unter den Inhalt ein Kommando nach folgendem Muster eintragen.

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.

Schrift-Gestaltung in Posts und auf Seiten

Grundeinstellung

Die Standardschriftart, Standardschriftgröße und Standardschriftfarbe für Posts und Seiten in seinem Blog regelt man bei Layout-Vorlagen im Vorlagendesigner (Vorlage > Anpassen > Erweitert) über "Seitentext". Bei den Dynamischen Ansichten heißt der Abschnitt "Seite" und das Feld für die Schriftgröße ist zwar auch vorhanden, aber ohne Funktion. Deshalb muss man, wenn man eine der Dynamischen Ansichten als Vorlage nutzt, speziell die Standardschriftgröße mittels CSS-Kommando unter "CSS hinzufügen" angeben, wenn sie anders als die vorgegebene Größe sein soll.

Im Blogger-Editor, in dem man den Post bzw. die Seite schreibt, muss man keine weiteren Einstellungen für die im Post oder auf der Seite zu verwendende Standardschrift machen, sondern kann da einfach drauflos schreiben. Im Editor selbst sieht die Schrift zwar anders aus, aber das ist nicht das, was man im veröffentlchten Post bzw. der veröffentlichten Seite sehen wird. Man kann "Vorschau" anklicken, dann sieht man, wie der Text tatsächlich aussehen wird.

Vorschaubild zum YouTube-Video ermöglichen oder verhindern

In den Startseite-Ansichten Flipcard, Magazine, Mosaic, Sidebar und Snapshot sowie unter Timeslide auch im aktuellsten Post wird in der Regel ein Vorschaubild (Thumbnail) angezeigt, wenn in einem Post ein YouTube-Video eingebettet ist.

Beim Beschaffen des Code zum Einbetten, darf man aber den "Erweiterten Datenschutzmodus" nicht aktivieren (!), wenn man ein Vorschaubild wünscht; denn sonst wird eine src-Adresse in den Code geschrieben, die eine Thumbnail-Anzeige nicht unterstützt, weshalb die Vorschau dann kein Bild, sondern den Post-Titel anzeigt.

Jump Break: Post-Ausschnitt mit Weiterlese-Link

Break = Unterbrechung
Jump = Sprung

Hat man in einem Blogspot-Blog einen Jump-Break in einen Post eingebaut, dann wird der Post auf der Startseite und in Label-Ansichten nur bis dahin angezeigt, wo der Break steht. An der Unterbrechungsstelle steht dabei ein Link zum Weiterlesen. Klickt man auf ihn, wird der Post komplett geöffnet, aber nicht von oben an angezeigt; denn man springt direkt zum Rest-Text, also unter den Text, der schon angezeigt wurde.

Nach-oben-Link ohne Script

Der Nach-oben-Link, den ich hier beschreibe, ist ein Link, der an die aktive Adresse ein Doppelkreuz anhängt und deshalb dafür sorgt, dass an den Anfang der gleichen Seite gesprungen wird. Der Link funktioniert ohne Script und nützt deshalb auch den Lesern, die Scripts in ihrem Browser nicht zulassen.

Blog-Pager bei einzelnem Post ausblenden

Will man nur unter einem einzelnen bestimmten Post den Blog-Pager, also die Linkzeile "Neuerer Post - Startseite - Älterer Post", ausblenden, nicht aber eine ebensolche Zeile ganz unten auf der Startseite und auf Labelseiten, dann geht das durch eine Kombination von einem unten im Post eingetragenen CSS-Kommando zwischen Style-Tags und einem Jump-Break im oberen Bereich des Posts.

Einzelne Post-Titel individuell gestalten

Will man in einem Blog mit Layout-Vorlage den Titel eines einzelnen Posts anders als die anderen Titel gestalten, z.B. rot färben, während die anderen blau sind, kann man nicht einfach per CSS oder Style kommandieren, dass .post-title rot sein soll; denn dann wären in Übersichten (Startseite, Label, Posts eines Monats) alle Posts rot.

Man braucht also einen individuellen Selektor, der nur bei diesem Post zu finden ist und für den Titel genutzt werden kann. Rund um den Titel findet man auch tatsächlich individuelle ID-Zahlen, die nur für diesen Post gelten. Sie sind aber so eingetragen, dass man sie nicht unmittelbar für den Post-Titel nutzen kann. Man kann die üblichsten CSS-Codes deshalb nicht nutzen.

Zum Glück gibt es jedoch auch CSS-Codes, die komplexer sind.

Einzelne Post-Titel in Übersichten von Classic, Magazine, Timeslide individuell färben

Unter den Ansichten Classic, Magazine, Timeslide stehen die Posts oder Postausschnitte mit ihren Titeln auf der Startseite und anderen Übersichtsseiten (Label, Posts eines Monats/Jahres) innerhalb von Listenpunkten, die eine ID haben. Die ID steht nicht an einer Stelle, die man üblicherweise als Selektor nutzen kann, aber mit Hilfe einer eckigen Klammer kann man aus dem entsprechenden HTML-Schnipsel einen Selektor machen. So kann man die einzelnen Post-Titel per CSS ansprechen.

Weiterleitung gelöschter Adressen auf neue

Löscht man einen Post, eine Seite oder ein Label oder benennt ihre Adressen um, dann sind bestehende Links, mit den nun nicht mehr existierenden Adressen, tot und ihre Aufrufe führen zu einer Fehlerseite, die sagt, dass sich unter der jeweiligen Adresse nichts befindet.

Bietet man zu dem jeweiligen Thema jedoch nach wie vor Inhalt an, nur halt unter neuer Adresse, ist es sinnvoll, den Aufruf der alten Adresse gleich auf die neue Adresse weiterzuleiten. So stellt man sicher, dass der Inhalt gelesen wird und die Besucher keinen getrübten Eindruck vom Blog bekommen.

Jump-Break-Sprungziel ändern

Die hiesige Anleitung berücksichtigt die Überarbeitungen Bloggers, die 04/2013 online gestellt wurden und bezieht sich somit auf das neue Layout des "HTML bearbeiten" sowie auf die neuen Codes der Standard-Vorlagen.

Will man, dass der Jump-Break-Link nicht zum Resttext des Postinhalts springt, wenn er den Post öffnet, sondern der Post von oben an angezeigt wird, dann muss man unter "HTML bearbeiten" den Code-Schnipsel löschen, der dafür verantwortlich ist, dass zum Anfang des Resttextes gesprungen wird.

Dynamische Ansichten: Bildschatten und Bildschrumpfung deaktivieren

Standardmäßig sind die Bilder in Posts und auf Seiten der Dynamischen Ansichten schattenartig umrahmt und geschrumpft. Dabei meine ich nicht die Verkleinerung, die man ggf. in der Auswahl-Zeile selbst angegeben hat. Es handelt sich vielmehr um eine automatische zusätzliche Schrumpfung, die standardmäßig von der Vorlage vorgenommen wird. Die Schatten wiederum sind ein Rahmen-Hintergrundbild.

Schatten und Verkleinerung kann man auf zwei verschiedene Arten deaktivieren:

1. Indem man das Rahmen-Hintergrundbild deaktiviert und die Rahmenbreite um das Bild sowie die Innabstände des Containers, in dem es steht, entfernt.
2. Indem man das Rahmen-Hintergrundbild und das Verkleinerungskommando deaktiviert, das nur dann nötig ist und wirkt, wenn die Bildrahmenbreite und Containerinnenabstände aktiv sind.

Dynamische-Ansichten: Hintergrundfarben für Posts und Kommentierbereich ändern

Die Hintergrundfarben der Posts und des eingebetteten Kommentierbereichs kann man für die Ansichten Flipcard, Magazine, Mosaic, Snapshot und Timeslide gemeinsam ändern. Das geht per Kommandos, die man unter "CSS hinzufügen" einträgt.