Ich bin momentan am Designen einer Website, bei der wir einen spannenden Post-Header machen wollen. Herausgekommen ist beim Spielen folgendes und ich finde es ziemlich cool, weswegen ich dacht, dass ich gleich mal drüber schreiben könnte.

See the Pen Shrinking Sticky Header by Myri (@mynimi) on CodePen.

Wie man ein Blogger Template schreibt, habe ich schon ein paar Mal erklärt. Doch vor einiger Zeit habe ich SASS in mein Leben gelassen und seit dem ist es auf meinen CSS Wegen zu meinem ständigen Begleiter geworden, so auch als ich ein bisschen am aktuellen KreaTief Design gearbeitet habe. Dabei habe ich für mich einen Workflow entwickelt, der die Arbeit am Template enorm vereinfacht und bei der Personalisierung von Templates viel mehr Möglichkeiten bietet als der Blogger Vorlagen Designer. Diesen Workflow möchte ich euch heute zeigen.

How a responsive blogger template is written is nothing I haven't talked about before. But a while ago I let SASS into my life and since then it has not left my side on my css adventures. It did not even leave, when I was working on the current bekreatief template. While I was working on that one, I created this workflow for myself, which I found to be so much easier and faster than how I did it before. Also it is so much easier to personalize my templates now, than using the template designer. How to write a responsive blogger template really fast, that's what this tutorial is about.

Hallo zusammen.
Die Frage tauchte schon sehr oft auf: "Wenn ich mehr als einen Post pro Tag veröffentliche, dann wird das Datum nur beim letzten Post angezeigt." Das ist kein Problem des Tutorials, sondern ein Blogger-Problem. Dieses Phänomen lässt sich in jeder Vorlage beobachten, meist ist es einfach nicht so auffällig, wie wenn man das Datum gestaltet hat.

Um das Problem zu beheben, habe ich jetzt eine Alternative Version meines CPL-Gastposts geschrieben. Wenn ihr nicht zu den Leuten gehört, die mehr als einen Post pro Tag veröffentlichen, dann würde ich euch das "Original" empfehlen.
Alle anderen sind jetzt herzlich eingeladen, diese Alternative Version in ihren Blog einzubauen. Eigentlich verändert sich nur der Anfang, der ganze CSS-Teil bleibt sich gleich.

CPL Post

Nach einer gefühlten Ewigkeit mal wieder ein neuer Style für die Startseite. Diesmal sind es Bild-Thumbnails, die beim hovern Titel und Snippet anzeigen.
Die Bilder haben ein fixiertes Seitenverhältnis von 1:1 und sind in Spalten angeordnet. Wenn man auf das Bild klickt, öffnet sich der Post wie gewohnt.
Ich mag diesen Style total, allerdings erfordert er, dass in jedem Post ein Bild vorkommt, ansonsten funktioniert das nicht wirklich. Es ist etwas anspruchsvoller als die letzten Styles, aber optisch der harmonischste, wenn ihr mich fragt.
Die Inspiration kam mir durch Codrops.

After quite some time a new style for the home page. This time it's image thumbnails which showcase title and snippet as soon as you hover above them. The images have a fixed aspect ratio of 1:1 and are ordered in collumns. If you click on the picture it'll open up the post just like it normally would.
I really like this style, but it does require an image in every post, otherwise it won't work. It is a little harder than the last ones, but the most harmonic looking if you aks me.
I got the inspiration for this look at Codrops.

Heads Up! Seit der Veröffentlichung hier hat Oliver eine Version mit dem alten Kommentarsystem veröffentlicht. Den Grundcode dafür findet ihr hier.

Heads Up! Since this tutorial has been published Oliver wrote a version with the old comment system. The basic code can be found here.

Und da ist es. Das neue Tutorial zu einem Responsiven Blogger-Template, welches auf Five basiert und bloss die Bootstrap-CSS verwendet, aber auf das Bootstrap-Menü verzichtet, welches ich bisher immer verwendet habe. Im Rahmen dieses zweiten Tutorials wollte ich eigentlich Drawing of A Rose genauer erläutern, spontan habe ich aber beschlossen, dass ich mehr Bock hab ein neues Template zu schreiben. ^^

And here it is. The new tutorial to a responsive blogger template, which is based on Five and only using the bootstrap CSS to have some basic style, but not using a bootstrap menu, because I already used this to often. Actually I intended on writing this based on my template Drawing of A Rose, but I just felt like writing a new one ^^

Hallo zusammen :D
Da ich nun schon einige Tuts zu einem responsive Template geschrieben habe (und mindestens noch 1 in Planung habe), dachte ich, dass es vielleicht einfacher ist, wenn ich einzelne Teile davon noch anschneide. Für all diejenige, die mithilfe meiner Tuts selbst was machen wollen, also ein kleiner Guide zu den einzelnen "Bausteinen" und dann könnt ihr einfach nur zusammensetzen was ihr haben wollt.
Da wir ja alle faule Menschen sind und einen Code, den wir schon einmal geschrieben haben, nicht noch einmal schreiben wollen (wozu auch?) sind wir(/ich) ganz euphorische Copy-Paste-Nutzer.
Ich geh also immer wieder zu meinen einzelnen Tuts zurück und kopiere munter einzelne Schnipsel. Den 3-Spalten-Footer ist dabei einer meiner Favoriten, weil er "klassisch" ist und einfach mehr Möglichkeiten bietet, platzsparend Gadgets zu platzieren. Vor allem da die meisten Gadgets für eine Sidebar konzipiert sind, folglich also keine ganze Blogbreite für sich alleine beanstpruchen.

Wie man Kommentare gestaltet das zeige ich heute. Von langweilig zu etwas weniger langweilig :D

Hier unser Ursprungslook

How to style comments is what I want to show you today. From boring to a little less boring :D

Okay, that's what blogger has given us

Vor einer Weile habe ich ein Tutorial geschrieben, wie man den Magazine Look auf der Startseite mithilfe eines JavaScripts erreicht. hier
Oliver hat mich dann darauf hingewiesen, dass das ganze auch ohne JavaScript klappt und bereits eine Version davon in einem seiner Tutorials erklärt (hier).
Heute möchte ich euch meine Version davon vorstellen.