HTML #29: Anzahl der Kommentare (mobil)

Vor einiger Zeit hatte ich schon einmal erklärt wie man es schafft, dass die Anzahl der Kommentare wieder unter dem Post angezeigt wird. Nun habe ich eine Weile getüftelt, wie ich es schaffe, dass es auch mit der mobilen Ansicht klappt ohne, dass es komisch aussieht. Endlich gibt es nun hier eine Lösung. Eine Gelinggarantie kann ich nicht geben, aber bei mir hat es geklappt, hoffentlich auch bei euch. Bei Frage dürft ihr euch gerne melden.



Wie immer, wenn wir direkt am HTML vom Blog arbeiten müssen wir vorher alles sicher. Wie das geht habe ich im ersten Teil zu den Kommentaren bereits erklärt. Wenn die Sicherung gespeichert ist, dann kann es losgehen.


Im Vorlagenmenü klicken wir auf das kleine Zahnrad unter der mobilen Ansicht.


Hier wählen wir dann "Benutzerdefiniert" aus. Eigentlich klar, aber mich hat bei dieser Einstellung immer etwas gestört, darum kam sie für mich nicht in Frage...


So sieht die mobile Ansicht dann nämlich aus. Ganz einfach testen könnt ihr das, indem ihr hinter der normalen URL eures Blogs noch ?m=1 eingibt. Probiert es doch einfach mal aus. Ich denke es ist klar, was ich nicht mag. Während der Blog in der Desktopversion genau auf den Hintergrund abgestimmt ist passt es in der mobilen Ansicht einfach nicht. Dafür wird nun aber die Anzahl der Kommentare angezeigt, wenn es denn welche gibt. Das Problem können wir aber lösen.


Spätestens jetzt müssen wir alles sichern und können dann auf "HTML bearbeiten" klicken.


Hier suchen wir nach "<body". Dazu in das Feld mit dem Code klicken und dann Str+F. So ploppt oben dieses kleine Suchfeld auf, mit dem wir den Code durchsuchen können.


Idealer weise sollte die Zeile nun so aussehen:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Wenn nicht, dann ändern wir sie entsprechend, denn hiermit können wir die klassische und die mobile Ansicht getrennt voneinander bearbeiten. Wenn ihr mit einer Vorlage von Blogger arbeitet sollte diese Zeile bereits so aussehen.


Recht weit oben sollten wir diese Zeile finden (ggf. mit der Suchfunktion suchen).

/* Mobile
Gleich die erste Zeile sollte so aussehen:

html body.mobile {
height: auto;
}
Hinter der zweiten Zeile klicken wir , drücken die Entertaste und fügen diese Zeile ein:

background: none repeat scroll 0 0 #ffffff;

Insgesamt sollte dieser Teil nun so aussehen:

html body.mobile {
height: auto;
background: none repeat scroll 0 0 #ffffff;
}
Mein Hintergrund sollte weiß werden, dafür steht der Farbcode #ffffff. Natürlich ist jede Farbe möglich, die euch gefällt. Eine Übersicht über die Farbcodes gibt es z.B. hier bei Farb-Tabelle. Nun noch speichern und nachschauen ob alles geklappt hat.

Nun hatte ich noch das Problem, dass die Button unten auf der Seite einfach nur blau waren. Ich weiß, dass der große mich zur Hauptseite bringt und der kleine rechts mich weiter zurück bringt. Aber weiß das jeder? Da muss es doch eine Lösung geben. Die gibt es auch und auch hier müssen wir den Farbcode ändern.


Wir suchen den ".mobile-link-button". Entweder ändert ihr wie ich dir Farbe. Dazu das Zeichen samt der Klammer entfernen und durch den Farbcode ersetzen oder aber direkt über dem markierten Bereich im Bild die Farbe des Buttons selbst auf die selbe Weise ändern. Auch hier speichern, gucken und ausprobieren bis es passt...

Keine liebe & nette Meinung

Kommentar veröffentlichen

Vielen lieben Dank, dass du dir die Zeit genommen hast mir einen Kommentar zu schreiben. Ich freue mich sehr.Solltest du eine Frage haben, so lass mir doch bitte eine Mailadresse da, damit ich dir auch antworten kann.

Related Posts Plugin for WordPress, Blogger...