Standards
- Es wird die ursprüngliche Startseite mit den letzten Posts als Startseite angezeigt (Eine eventuelle Weiterleitung der Blogadresse auf eine alternative Startansicht, ist im mobilen Modus unwirksam.)
- Als einziges Gadget wird das Seiten-Gadget angezeigt.
- Als Navigation stehen zusätzlich zum Seiten-Gadget Pfeile zur Verfügung, mit denen man sich vor und zurück durch die Posts klicken kann.
- Es werden nur solche Seiten automatisch in Mobiladressen umgewandelt, die aus "Leeren Seiten" erstellt wurden.
- Bloginterne Links innerhalb von Seiten und Posts werden nicht automatisch in Mobiladressen umgewandelt.
- Links, um innerhalb eines Posts zu navigieren, werden nicht automatisch in Mobiladressen umgewandelt.
- Labels werden unter Posts nicht angezeigt.
- Um mobile Labels-Adressen aufrufen zu können, muss man sie händisch verlinkt haben.
- Der Link in der Überschrift von Labels-Ansichten führt auf die Web-Version der Startseite, also aus der mobilen Version heraus.
- h4-Überschriften innerhalb von Posts und Seiten haben keinen automatischen Abstand nach oben.
- Als mobile Vorlage kann man unter Vorlage > Mobil > Zahnradsymbol eine der vorgefertigten Vorlagen oder aber "Benutzerdefiniert" wählen. Benutzerdefiniert übernimmt Designangaben, die man für die Web-Version des Blogs eingestellt hat.
Änderungsmöglichkeiten vorbereiten
Damit Änderungen am Layout und Design wirksam werden können, muss man unter Vorlage > Mobil > Zahnradsymbol "Benutzerdefiniert" als Vorlage für die Mobil-Version wählen. Dadurch wird der Code im HTML so geändert, dass man die Möglichkeit hat, das Layout und Design zu beeinflussen. Ohne die Einstellung auf "Benutzerdefiniert" ist ein Einfluss auf Layout und Design nicht möglich. Ob die Einstellung geklappt hat, kann man in der Vorschau für die mobile Vorlage kontrollieren.
Layout ändern
Hat man die mobile Vorlage erfolgreich auf "Benutzerdefiniert" eingestellt, kann man unter Vorlage > HTML bearbeiten festlegen, welche Gadgets in der Mobil-Version des Blogs angezeigt werden und welche nicht. Dazu muss man in der Zeile
<b:widget id='WIDGETNAME' locked='false' title='WIDGETTITEL' type='WIDGETTYP'>
des entsprechenden Widgets eins der folgenden Kommandos ergänzen:
mobile='yes'mobile='no'mobile='only'
Ergbebnisbeispiel:
<b:widget id='HTML2' locked='false' mobile='only' title='Navi' type='HTML'>
Infoquelle: code.blogger.com
Bug 1
Bug: Die Gadgets, die man auf
mobile='only' gestellt hat, erscheinen nicht mehr unter Layout.Notlösung: Man kann sie aber noch über den Werkzeuglink innerhalb der Mobil-Version bearbeiten. Da man die Mobil-Version auch auf dem Desktop anzeigen kann, kann man diese Gadgets trotzdem weiterhin auch am Desktop bearbeiten.
Bug 2
Bug: Unter Layout kann man Gadgets dann auch nicht mehr erfolgreich verschieben.
Notlösung: Man muss alle Gadgets also erst einrichten und dann die
mobile='only'-Regel eintragen und diese auch immer dann erst vorübergehend wieder austragen, wenn man unbedingt ein Gadget verschieben muss, z.B. ein neu hinzugefügtes, das an eine bestimmte Stelle soll.Design ändern
Hat man die mobile Vorlage erfolgreich auf "Benutzerdefiniert" eingestellt, kann man unter Vorlage > Anpassen > Erweitert > CSS hinzufügen Design-Kommandos speziell für Elemente innerhalb der Mobil-Version des Blogs geben. Dazu muss man die Elemente unterhalb der Klasse .mobile ansprechen.
Infoquelle: code.blogger.com
Mobile Adressen
Die mobilen Versionen der Adressen, haben den normalen Adressen ?m=1 angehängt. Man kann interne Linkziele also auch mit ihrer Mobil-Version verlinken.
Beispiele:
- http://BLOGADRESSE/?m=1 (Startseite)
- http://BLOGADRESSE/search/label/Labelname?m=1 (Label)
- http://BLOGADRESSE/p/seitentitel.html?m=1 (Seite aus "Leere Seite")
- http://BLOGADRESSE/p/seitentitel.html#ankername?m=1 (Anker auf Seite aus "Leere Seite")
- http://BLOGADRESSE/2013/10/posttitel.html?m=1 (Post)
- http://BLOGADRESSE/2013/10/posttitel.html#ankername?m=1 (Anker in Post)
Lösungsbeispiel
Ich habe das Blog Wasserzeichen Navigator Bspl Web | Mobil so eingerichtet, dass man zwischen der Web-Version und der Mobil-Version wechseln kann und es jeweils unterschiedliche Navigationen gibt. Die Navigation in der Web-Version ist mit normalen Links ausgestattet, die Navigation in der Mobil-Version ist mit Mobillinks ausgestattet.
Interne Links in Posts und auf Seiten habe ich doppelt angegeben, sowohl für die Web-Version als auch für die Mobil-Version.
Den Link in der Label-Überschrift habe ich für die Mobil-Version ausgeblendet.
Wie ich das jeweils realisiert habe, habe ich dort im Blog beschrieben: Wasserzeichen Navigator Bspl: Einrichtung der Mobil-Version Web | Mobil .
Problembeispiel
Das hiesige Blog konnte ich lange nicht erfolgreich auf "Benutzerdefiniert" umstellen und deshalb auch Layout und Design der mobilen Vorlage nicht beeinflussen. Ich konnte zwar "Benutzerdefiniert" speichern, aber der Erfolg blieb aus. Es wurde dann statt der Mobil-Version des Blogs eine "Hoppla es ist ein Fehler aufgetreten"-Seite angezeigt. Wieso das so war, habe ich lange nicht rausfinden können. Mein fast identisches Testblog hatte die Macke nicht. Alles, was da vorkam und was ich da getestet hatte, konnte ich als Ursache ausschließen.
Dennoch konnte das hiesige Blog als Beispiel dafür dienen, dass man eine Mobil-Version des Blogs nutzbar machen kann, auch wenn man nicht alle benutzerdefinierten Möglichkeiten einsetzen kann.
Ich hatte hier damals alternativ eine der mobilen Standardvorlagen gewählt.
Die Grenzen, die mir damals hier im Blog gesetzt waren, um das Blog auch mobil komfortabel durchforstbar zu machen, waren die, die oben unter "Standards" beschrieben sind. Ich musste deshalb das Seiten-Gadget nutzen und darin die Navigation für beide Versionen unterbringen. Die Systematik der Navigation war daher nicht intuitiv erfassbar, sondern bedurfte der Erfahrung mit den Links.
Letztlich konnte ich das Gadget "Wochenschau" als Ursache für die Blockierung der benutzerdefinierten Mobilvorlage des hiesigen Blogs ausmachen. Ich habe das Gadget gelöscht und konnte dann die Mobilvorlage erfolgreich auf "Benutzerdefiniert" umstellen.
Ich habe dann einiges angepasst, die Navigation aber so belassen, wie sie war.
Weiterführende Links
Ute Ziemes, sg.utez.de,
Danke, das ist hilfeich. Muss ich mir merken.
AntwortenLöschenIch habe jetzt ein bisschen rumexperimentiert und festgestellt, dass man den Bug vermeiden kann, in dem man jeweils nur mobile='yes' einträgt und dafür ein Gadget einsetzt, (das ja nur in der Webversion wirksam ist) mithilfe dessen man dann die betroffenen Gadgets in den Webversion dann ausblendet.
LöschenDas problematische mobile='only' durch diese pflegeleichte Konstruktion zu ersetzen, ist wirklich die bessere Lösung. Gute Idee. Danke, dass du sie hier teilst.
LöschenDanke für die tolle Anleitung. Eigentlich ganz simpel, soll man meinen. :-) Aber irgendwie werden die Widgets bei mir trotzdem nicht auf dem Handy angezeigt. Die Formateinstellung "Benutzerdefiniert" habe ich eingestellt und den Farbtest gemacht. Hast du eine Idee, woran es sonst noch liegen könnte?
AntwortenLöschenDieser Post bezieht sich nur auf Layout-Vorlagen von Blogger, nicht auf die Dynamischen Ansichten. In den Dynamischen Ansichten kann man die Widgets mobil leider nicht anzeigen.
LöschenBislang ist es hier im Blog so geregelt, dass ich dazu schreibe, wenn der Inhalt eines Posts (auch) für die Dynamischen Ansichten gilt. Das sollte ich vermutlich mal dahingehend ändern, dass ich dazu schreibe, wenn er nicht für sie gilt.
Hallo Ute,
AntwortenLöschenich habe ein Template gekauft und bin etwas ratlos. Ich möchte gerne die Linkfarbe in der Mobilversion (Layout: Standard) ändern und habe nicht die geringste Idee, wie das gehen soll. Hast Du eine?
Viele Grüße
Danielle
Die Frage nach der Linkfarbe wäre vermutlich hinfällig, wenn du die Mobilversion deiner eigenen Vorlage nutzen würdest.
LöschenIch gehe davon aus, dass erst, wenn du unter Vorlage - Mobilvorlage auf "Nein, auf Mobilgeräten die Desktop-Version meiner Vorlage anzeigen" umgeschaltet und das so gespeichert hast, sich das responsive Design deiner Vorlage entfalten kann. Die Besonderheit deiner Vorlage ist ja, dass sie erkennt, auf welchem Gerät sie angezeigt wird und automatisch die passende Version deiner Vorlage anzeigt, ohne dass man zu einer speziellen Adresse wechseln müsste, wie das bei Vorlagen, die Blogger zur Verfügung stellt, notwendig ist.
Liebe Ute,
Löschenwenn ich das so anklicke, wird leider mobil bei mir eine Desktopversion der Seite angezeigt. Das war ganz am Anfang anders - mir ist nicht ganz klar, wodurch ich das "verstellt" habe. Liegt das jetzt am Handy oder an der Vorlage?
Vielen Dank für Deine Antwort in jedem Fall!
Viele Grüße
Danielle
Tja, das wird wohl nur die Urheberin der Vorlage beantworten können. Offenbar nicht nur auf Spanisch, sondern auch auf Englisch: Support zur Vorlage "Radish".
LöschenFalls du letztendlich doch die Mobillösung von Blogger nutzen musst: Hast du schon getestet, was angezeigt wird, wenn du "Benutzerdefiniert" statt "Standard" einstellst und speicherst?
Mit den anderen Mobilvorlagen, einschließlich "Standard" kann man mobil jedenfalls keinesfalls etwas beeinflussen. Auch zusammen mit Vorlagen, die Blogger zur Verfügung stellt, geht das nur mit der Einstellung "Benutzerdefiniert". Darunter wird bei den Vorlagen von Blogger dann das meiste von dem übernommen, was man auch für die Webversion eingestellt hat und man kann darüber hinaus die Mobilversion per CSS speziell ansprechen.
Falls die Einstellung bei dir also eine mobile Variante deines Blogs anzeigt, könnte ich dir auch bei dem einen oder anderen helfen, wenn was in der Mobilversion geändert werden soll.
Ein großes Dankeschön dafür. Hatte mein Blog auf Blogger gestartet, weil ich nicht zu viel Spielereien wollte, hab mich aber fast geärgert, dass die mobile Version nicht einfach im Dashboard zu bearbeiten ist, seit ich eigene Banner einsetzen wollte. Aber es ist echt simple, wenn man weiss wie :) Sehr gut erklärt. Direkt Mal in meinen Lesezeichen gespeichert :)
AntwortenLöschenHerzlichen Dank für die super Hilfe! Ich fragte mich noch, wie man Labels auch mobil anzeigen lassen kann? Hier fand ich eine Anleitung:
AntwortenLöschenquartzfeather.blogspot.de/2016/02/how-to-add-labels-to-blogger-mobile.html
Der Trenner (Komma) kann beliebig durch andere Zeichen ersetzt werden.
Danke für den Tipp. Klappt prima.
LöschenIn der benutzerdefinierten Version (Mobile) scrollt das Handy immer automatisch zurück nach oben. Git es da ne Lösung?
AntwortenLöschenIch vermute, Sie meinen Ihr Blog mit dem responsiven Design von einem externen Anbieter.
LöschenSie könnten versuchen, dort Unterstützung zu bekommen, wo sie die Vorlage her haben, also bei newbloggerthemes.com/fictive-blogger-template. Ich bin aber skeptisch, dass man da tatsächlich kostenose Hilfe bekommt. Zwar war auf einer der Seiten (newbloggerthemes.com/?s=Fictive) zu lesen, dass man ihnen melden solle, falls es Probleme mit der Vorlage geben sollte und sie dann versuchen würden, das Problem zu beheben und auf deren Kontaktseite (newbloggerthemes.com/contact) kann man auch ankreuzen, dass man dafür nichts zahlen "kann", aber ob das dann tatsächlich bearbeitet wird, ist fraglich; denn im Kern geht es auf der Präsenz darum, Vorlagen und Unterstützung zu verkaufen. Die kostenlosen Angebote sind nur Probierhäppchen.
Ich kenne mich mit der Vorlage nicht aus. Irgendwas wird wohl im Quelltext stehen, was zu dem Fehler führt. Ob das etwas ist, was schon immer drin stand, aber mittlerweile von Mobilbrowsern missenterpretiert wird oder etwas, was Blogger mittlerweile reinschreibt oder etwas, das Sie selbst reingeschrieben haben, weiß ich nicht. Ich weiß nach Recherchen nur, dass die Vorlage zumindest bei Wordpress, wo sie zuvor ebenfalls angeboten wurde, seit 2 Jahren nicht mehr unterstützt wird. Warum, weiß ich aber nicht. Auf den alten Supportseiten war nichts zu ihrem Problem erwähnt.
Daher empfehle ich Ihnen, eine Testblog-Adresse einzurichten und dort mal die Blogger-eigenen responsiven Vorlagen auszuprobieren, die es seit 2017 gibt. Dort können Sie sie beschrieben und per Links auch im Einsatz sehen: responsive Vorlagen von Blogger selbstVielleicht wollen Sie ja auf eine davon umsteigen. Deren Vorteil ist, dass sie noch lange von Blogger kompatibel gehalten werden und, dass zu ihnen im englischsprachigen Bogger-Hilfeforum auch Unterstützung zu bekommen ist. Bei denen erkennt das Programm von Blogger auch gleich, dass sie responsiv sind und zeigt daher unter Design die Einstellungsmöglichkeiten für Mobil gar nicht erst an, weil klar ist, dass die Vorlage das allein managed und auch keine Mobiladresse benötigt. Die Vorlagen stehen unter "Design" zur Verfügung.