Update: Ich habe ein weiteres mal den Header-Bereich umgebaut. Mir war es wichtig, mehr Übersicht über die Posts zu haben - die ursprüngliche Idee hinter diesem Post funktioniert deshalb nicht mehr. Sobald Gadgets möglich sind, werde ich das ganze noch einmal aufgreifen.
Bisher war es so, dass in den Dynamischen Vorlagen eine Änderung durch CSS immer globale Auswirkungen hatte, d.h. es war nicht möglich, etwa nur die Ansicht 'Flipcard' zu ändern und die anderen Ansichten so zu lassen, wie sie sind.
Das hat sich nun geändert. Blogger hat seit einigen Tagen jeder Ansicht eine eigene, spezifische
class spendiert. In dem Post werde ich ein Beispiel geben, was ihr damit anstellen könnt.
Blogger hat vor Monaten versprochen, für die dynamischen Vorlagen bald Gadgets auszuliefern. Passiert ist bisher nichts. Ich muss zugeben, a bisserl ärgert mich das. Die dynamischen Ansichten sind technisch 'schön', aber sehr unpersönlich.
Heads up! Dieser Text ist seit dem 23.9. 2012 nicht mehr aktuell. Ich schreibe an einer neuen Serie, die dieses Thema wieder aufnimmt.
Ich finde, für manche Anwendungen sind Wordpress oder Joomla als CMS überdimensioniert und zu komplex - wer Beispielsweise eine kostengünstige Webseite mit ein paar Unterseiten will und keine Lust hat, einen eigenen Host aufzusetzen und sich groß um die Verwaltung seiner Seite zu kümmern, kann so ein Projekt mit Blogger sehr simpel umsetzen.
Wie so was geht werde ich hier beschreiben - ich möchte mit meinem Beispiel keinen Webdesign-Preis gewinnen, sondern nur die grundlegenden Schritte zu einem funktionierenden, eigenen Layout innerhalb von blogspot.com zeigen.
Heute ein nostalgisches CSS Problem, was vor fünf, sechs Jahren sehr intensiv diskutiert wurde und heute fast nicht mehr interessiert, nämlich 'drei Kolumnen sollen gleich hoch werden' und zwar in Abhängigkeit von der jeweils längsten Kolumne. Zum visualisieren habe ich schematisch einen Blog mit Header, linker und rechter Sidebar, Post-Teil und Footer gebaut. Zum selber ausprobieren gibt's auch einen Fiddler.
Der Header ist das Gesicht und Aushängeschild eines Blogs und spielt bei der Personalisierung eine wichtige Rolle. Blogger bietet in den dynamischen Ansichten bisher noch keine Möglichkeit für einen eigenen, personalisierten Header, hat das aber für die Zukunft angekündigt. Ich wollte eigentlich abwarten, was von Blogger kommt, aber jetzt hat mich hat ein Leser gefragt, wie das geht, e voilà, schreibe ich etwas dazu.
Als Nachtrag zum Post von gestern noch der versprochene Entwurf zum halbtransparenten Hintergrund für die Kacheln in der dynamische Ansicht 'Flipcard'. Das ist nur eine Skizze und gedacht für Leute, die Lust haben, mit den Kachenln rumzuexperimentieren. Bitte erst in einem Testblog ausprobieren!
Heute noch mal eine Idee im Zusammenhang mit der dynamische Ansicht 'Flipcard'. In dieser Ansicht lassen sich die Posts ja unter anderem nach Labels sortieren und ich fände es interessant, allen Posts eines Label die gleiche Farbe zu geben. Durch das 'Highlighting' kann damit ein Label auf der Startseite optisch besonders hervorgehoben, oder alle Labels farblich sortiert werden oder was-auch-immer-ihr-sonst damit anfangen wollt.
Eigentlich wollte ich diesen Post im besten Denglish "Responsive Webdesign von Blogger-Layouts mithilfe von CSS3 Media Queries" nennen - alle Webdesign-Buzzwords auf einem Schlag! Der Post wäre der Hit geworden. Das ist ein sehr spannendes Thema und wer etwas über den komplexen Hintergrund von CSS3 Media Queries wissen will, kann sich auf den tollen Blog von Ellen Bauer umschauen.
Nach harter Arbeit ist es mir endlich gelungen, einen Weg zu finden, die Menüleiste in den den neuen dynamischen 'Views' zu zentrieren - Danke für die Inspiration an Altmeister Stu Nicholls. Hier meine
Einige Layout-Entscheidungen sind in den neuen dynamischen Views weniger geglückt - dazu gehören etwa die prominent platzierten Google, Twitter & Facebook 'Share'-Knöpfe unter den Posts. Das erste, was ich abgeschafft habe waren folglich diese Schalter und zwar damit:
.share-facebook,.share-plusone,.share-twitter{
display: none !important;
}
Die CSS kommt im Vorlagen Designer in die Box 'Benutzerspezifische CSS' hinzufügen und wird mit der Taste 'Eingabe' angewendet - wenn es Okay ist, wird die CSS mit dem Schalter 'Auf Blog anwenden' gesichert.
Alle Inhalte dieses Blogs stehen unter der DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE, d.h. alles was ihr hier findet könnt ihr nach eurem eigenen belieben verwenden, kopieren und verändern - setzt einen Link oder lasst es bleiben, gebt es für eure eigene Arbeit aus, macht damit was ihr wollt.
Seit heute Nacht gibt es bei Blogger die Möglichkeit, sein Layout in so genannten Views darzustellen. Als altes Spielkind habe ich's natürlich sofort ausprobiert und mein Blog auf 'Classic' umgestellt. Wichtigste Neuerung vorneweg, es gibt keinen Zugriff mehr auf den HTML-Text und alle Änderungen am Layout müssen in CSS gemacht werden. Ich halte das für eine sinnvolle Neuerung, Zugriff auf den HTML-Text braucht man eigentlich nur äußerst selten und viele Leute zerschießen sich dabei eher ihren Code, als das da was wirklich konstruktives bei rum kommt.
Update: Ich habe inzwischen eine neue, verbesserte Version geschrieben - vielleicht ist es interessant für euch!
Mein Ziel war ein funktionierendes Dropdown Menü für Blogger mit reiner CSS und ohne Javascript zu erzeugen und heute gibt's die erste stabile Version davon. Ich bin kein professioneller Entwickler und das hier ist nur eine CSS Spielerei von mir, die _nicht_ in Steinzeit-Browsern wie IE6 funktionieren wird. Ich habe das Menü in allen moderne Browsern wie Opera, Safari, Chrome, FF & IE9 getestet und dort funktioniert es einwandfrei. Für den ganzen Rest - vor allem dem Schrott aus dem Hause Microsoft - übernehme ich keine Verantwortung; ich hab's dort nicht getestet und habe ehrlich gesagt auch keine Lust dazu - jeder kann heutzutage einen einigermassen modernen Browser benutzen und wer es nicht tut, sorry ....
Update
Bitte beachten: Ich habe in der Zwischenzeit eine Lösung gefunden, die das Problem mehrere-Bilder-in-einer-Reihe nur mit dem Blogger-Editor hinbekommt.
Achtung: Überarbeitetes Tutorial!
Mit dem Posteditor in einem Blogger-Post drei Bilder nebeneinander zu platzieren, kann schnell zu einer frustrierenden Angelegenheit werden. Einfacher ist es, die Bilder in einer HTML-Tabelle einzubinden.
Mit dem Posteditor in einem Blogger-Post drei Bilder nebeneinander zu platzieren, kann schnell zu einer frustrierenden Angelegenheit werden. Einfacher ist es, die Bilder in einer HTML-Tabelle einzubinden.
Update
Bitte beachten: Ich habe in der Zwischenzeit eine Lösung gefunden, die das Problem mehrere-Bilder-in-einer-Reihe nur mit dem Blogger-Editor hinbekommt.
Vor einiger Zeit habe ich darüber geschrieben, wie sich das klassische Blogger Problem "drei-Bilder-nebeneinander" mithilfe einer Tabelle lösen läst. Das funktioniert schnell und gut. Okay, Tabellen klingen irgendwie nach letztem Jahrhundert und sind aus der Mode gekommen und man sollte sie nicht verwenden - aber es löst das Problem, oder?
Update
Seit ich diesen Post geschrieben habe, gab es eine wichtige [und nervige] Neuerung von Blogger - die Alias URL's. Das bedeutet, dass euer Blog mit .de, co.at, .ch oder sonstigen Endungen angezeigt wird, immer abhängig davon, in welchem Land ihr seit. Diese Alias URL's ist aber nicht die echte Blogadresse. Falls ihr die Seiten-URL von eurer Archivseite eintragt, müsst ihr also immer die Seiten-URL mit .com schreiben ...
Ein Favicon ist ein kleines, 16×16 Pixel großes Symbol, das oben in der Tableiste links vom Seiten-Namen angezeigt wird. Wer mal auf die Tableiste schaut, sieht dort ein kleines gelb-weißes Symbol - mein hauseigenes Favicon. Bisher war es etwas mühselig, ein eigenes Favicon in blogspot.com Blogs einzubauen. Seit ein paar Tagen kann man auf Blogger ein Favicon direkt hochladen. Wie geht das?