5202

ein Blog über technische Fragen zu Blogger

Blogger: Mobile Layouts anpassen

von

Vor einigen Tagen hat Blogger die Anpassung für mobile Vorlagen freigegeben. Mobile Vorlagen werden bei Blogger über eine eigene Subdomain mit dem Buchstaben 'm' ausgeliefert. Zum auszuprobieren könnt ihr eure mobile Vorlage in jedem normalen Desktop-Browser anschauen - dazu müsst ihr euren Blog oder Post-Link nur ?m=1 anhängen.

In der Basisversion sind die mobilen Vorlagen von Blogger einspaltige Layouts mit grafischen Anklängen an die jeweilige Blogger-Vorlage. Diese Basisversion lässt sich nun vollständig personalisieren. Wie das geht, zeige ich an einem kleinen Beispiel.

In den Posts benütze ich zur Gliederung die Überschrift h4. Die habe ich für die Desktop-Version gestaltet und als Arbeitsaufgabe möchte ich nun das gleiche für die Mobile-Version erreichen.

Grundlage

Als erstes müsst ihr im Dashboard unter Vorlage > Mobil die mobile Ansicht aktivieren und als Vorlage 'Benutzerdefiniert' auswählen. Falls ihr ein Blogger-Layout benützt, war's das schon.

Wenn ihr mit einem Layout von einem Drittanbieter bloggt, müsst ihr noch den <body> Tag anpassen. Dazu _ersetzt_ ihr den <body> Tag hierdurch:
<body expr:class='&quot;loading&quot; data:blog.mobileClass'>
Das war alles. Jetzt habt ihr im Blog eine neue Klasse class="mobile", mit der ihr das Layout der mobilen Ansicht anpassen könnt.

Mobiler CSS Selektor

Der Selektor für die mobile Klasse ist .mobile. Wenn ihr eine unterschiedliche CSS für Mobile und Desktop-Ansicht definieren wollt, schreibt ihr das so:
/* Für Desktop Ansicht */
h4 {
...
}

/* Für Mobile Ansicht */
.mobile h4 {
...
}
Ziemlich simpel, oder?

So wird's angewendet

Falls ihr die dynamische Ansicht benützt, müsst ihr zunächst in das normale Layout zurück.

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

Der Code

.mobile h4 {
    background: none repeat scroll 0 0 #e8e8e8;
    border-radius: 4px 4px 4px 4px;
    color: rgba(0, 0, 0, 0.6) !important;
    font-size: 16px;
    font-weight: normal;
    line-height: 150%;
    margin: 25px 0 10px;
    padding: 7px 12px 5px 9px;
    text-decoration: none;
 }

Und weiter?

Das mobile Layout funktioniert in allen Browser. Wie weit es sinnhaltig ist, eine eigene mobile Vorlage zu gestalten, muss jeder für sich selber entscheiden. Bei mir liegen etwa die Zugriffszahlen über Mobile Geräte [außer iPad] bei 0. Groß Gedanken werde ich mich folglich nicht darum machen.

Fehler? Anregungen? Offene Fragen?

Nichts klappt? Im Post sind Fehler? Ich freue mich über eure Anregungen, Kommentare und Fragen!