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.

Postübersichten sind etwas, worüber sich viele Blogger immer wieder Gedanken machen. Ich denke der Hauptgrund dafür ist, dass man durch sie eine einfache Übersicht darüber geben kann, was man schon getan hat, was auf dem Blog an Inhalt überhaupt vorhanden ist, ohne dass der User sich durch die ganzen Posts durchscrollen muss.

Postet man zum Beispiel Rezepte, ist eine Rezeptübersicht wirklich wahnsinnig schnell gemacht.

Viele Leute die ich kenne, machen diese Postübersichten manuell. Ich selbst habe bis vor Kurzen meine Tutorialübersicht auch manuell gemacht, darum war die Liste komplett unvollständig und ein paar Tote Links hatten sich darin auch noch versteckt. Doch dann kam Oliver’s Post hier und ich beschloss das mit der automatisierten Liste umzusetzen. Und seitdem habe ich es an keinem Tag bereut

Eine Frage im Blogger-Hilfeforum (übrigens solltet ihr alle dort dabei sein, wenn ihr euch mit Blogger beschäftigt, wir helfen gerne bei jedem Problem :D (Frage hier)) hat mich dann heute angeregt, dieses Tutorial zu schreiben.

Notiz Das hier ist bloss ein Praxis-Beispiel, Credit für die Ajax-Liste gilt Herrn Doetsch.

Als ich mit dem Schreiben von Blogger Templates angefangen habe, habe ich das alles hauptsächlich im Blogger Editor selbst gemacht. Das einzige wofür ich HTML und meinen Editor auf dem Computer benutzte, waren meine "Skizzen", die im Grunde eigentlich Box-Modelle waren.
Seit diesen Anfängen habe ich nun schon so viele Templates geschrieben, dass ich ziemlich schnell feststellte, wie ungünstig das war. Ich begann damit Prototypen in HTML und CSS zu schreiben, die schon etwas mehr Style hatten.
Mittlerweile bin ich so weit, dass ich nicht einmal mehr die schlussendliche Funktionalität im Blogger Editor schreibe, sondern nur noch teste, ob das auch wirklich so ausschaut, wie ich mir das vorstelle.
In diesem Tutorial soll es darum gehen, wie man am besten einen Prototypen für ein responsives Blogger Template schreibt. Diese Vorgehensweise kann genauso gut auf andere Seiten angewendet werden. So mache ich es, wenn ich WordPress Themes schreibe, genauso.

Dies ist der erste Teil meiner Prototypen-Serie. Diese Methode verwende ich für einfache Templates, bei komplexeren, verwende ich Methode zwei, die so bald wie möglich folgt.

When I first started writing blogger templates I wrote most of it in the Blogger Editor itself. The only time I took out my editor and wrote pure HTML was when I wrote my "Sketches" which were basically models of my overall look.
Since those beginnings I wrote a lot of templates and found out pretty fast how flawed this whole workflow was. I started writing prototypes that had most of the basic styling already in it.
Now I am at a point where I write everything in my editor. A prototype that basically already looks like the end result and the blogger template with all the functionality, that only lands in the Blogger Editor to be tested if everything works out.
In this tutorial I want to go over writing a prototype which which our stylesheet and markup will be done. This workflow can also be used for other CMS' as well. That's how I do it if I write a WordPress Theme as well.

This is the first part of my prototyping series. I use this method for simple templates, when working on more complex templates, I will be using method two, which will follow as soon as possible.

Ein super einfaches responives 1-level Menu, mit Flexbox und gaaanz wenig JS.

A super simple 1-level menu with flexbox and just a teeny tiny bit of JS.

See the Pen responsive 1-Level Menu by Myri (@bekreatief) on CodePen.

Damit es hier auch mal wieder was zu lesen gibt, ausser das Versprechen, dass es denn bald wieder losgeht, schreibe ich jetzt mal wieder ein kleines Tutorial. Die ganzen Deadlines und der Weihnachtsstress haben mich nun doch etwas sehr eingeholt, aber als ich heute Morgen gefragt wurde, wie man denn einen Header macht, der sozusagen hinter dem Content liegt, wollte ich unbedingt eine Anleitung dazu für euch schreiben. Und hier kommt sie nun.

First of all so sorry for being a little lazy with my English in the posts, but the neglecting will hopefully end really soon. There are just a couple of deadlines and the necessary Christmas Stress right now that have been keeping me a little too busy. But when I was asked today how you'd create a header that lies behind the content, I wanted to write it for you.

Vor einer Weile habe ich beschlossen, für meine Buttons ein Sass Mixin zu schreiben, nur ist mir dabei aufgefallen, dass ich mehrere Farben brauche, die sich nicht ganz so einfach generieren liessen, wie anfangs gedacht. Und dann gab es noch das Problem der Schriftfarbe, welche entweder weiss oder schwarz sein sollte, je nach dem, was sich halt besser lesen liess. Man hätte mit mehreren Variabeln lösen können, aber ich hab beschlossen, mit Funktionen zu spielen und das Problem auf diese weise zu lösen.

Ich wurde letztens gefragt, wie ich denn meine Navigation sticky gemacht habe und habe versprochen, dass ich dazu einen Post schreibe.
Eigentlich wollte ich euch das Script präsentieren, das ich für mein Menu geschrieben habe. Da ich dieses in letzter Zeit für mehrer Projekte verwendet habe, ist mir aber aufgefallen, dass es ein bisschen Probleme macht. Das ist nicht das Problem meines sticky scripts, es ist das Problem von vielen Scripten. Nach Recherche und viel Trial und Error, habe ich nun ein Script zusammengestellt, dass das Problem nicht aufweist.

Ich habe schon ein paar Tutorials dazu geschrieben, wie ihr responsive Menus schreibt. Bei den komplizierteren, habe ich mich dabei bisher aber auf Frameworks oder andrer Leute Anleitungen verlassen. Mein letztes Menututorial ist aber auch schon eine Weile her. in der Zeit habe ich einiges gelernt und deswegen gibt es jetzt mein erstes "komplexes" Menu für euch. Und das alles nur, damit es für euch ganz einfach wird, das Menu zu verwenden.

I have written a few tutorials on here how to create a responsive menu. For the more complex ones I usually relied on framework or other people's explanations. But my last menu tutorial was written a while ago. In the meantime I learned a lot and that's why I am ready now to present a more complex menu today. And that's only because I wanted it to be super easy to use.

Vielleicht erinntert ihr euch noch an meinen Triangle Mania Post, den ich vor etwas über einem Jahr geschrieben habe. Dort habe ich euch gezeigt, wie ihr mit CSS Dreieicke zeichnet und was ihr damit schönes machen könnt. Vor einer Weile habe ich auf Codepen etwas mit den Dreieicken gespielt und mir gedacht, dass es eigentlich total cool wäre, wenn ich dafür ein Mixin hätte. Am besten Grösse, Farbe und Richtung eingeben und dann ist das ganze da, weil jedes Mal zu überlegen, wie ich das jetzt genau machen muss, ist mühsam und nimmt enorm viel Zeit in Anspruch.
Gesagt, getan. Und weil mir ein simples Dreiieck nicht genug war, habe ich noch Rechtwinklige Dreiecke gemacht und mich an gleichseitige herangewagt. Und da ich gerade so schön in Fahr war, folgte noch ein Mixin für Fähnchen.
Das alles habe ich dann für euch in einer Demo zusammengestellt, die ich euch hiermit nicht vorenthalten möchte. Viel erklärt ist nicht, wenn ihr Triangle Mania gelesen habt, wisst ihr, wie man Dreiecke zeichnet. Die Mixins veralgemeinern dass dann nur noch.

Maybe you remember my Triangle Mania Post, I wrote a little over a year ago. There I showed you how to create CSS triangles and what you can use them for. A while ago I was playing around with triangles on codepen and though it would be so much cooler to have a mixin for them. Like giving size color and direction and then the whole code is just there.
So I wrote one. And since a simple triangle was not enough I added right angled triangles and finally did some math to create equilateral triangles. And just because I was already on it I also wrote a mixin for flags.
All of that got together in a demo, which I want to show you guys now. I don't need a lot of explanation, if you read Triangle Mania, you will know how a triangle is created, the mixins just make your work a lot faster.
Triangle Mania Reloaded

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.

Ich hab mich ja vor einer Weile in SASS verliebt. Hat eine Weile gedauert, ehe ich mich rangetraut habe und jetzt frage ich mich wirklich, wie ich CSS ohne SASS gesschrieben habe, es spart so viel Zeit! Heute bin ich über meine Mixins gegangen und habe etwas mit dem padding-Hack rumgespielt, wobei gleichzeitig noch dieser Faux-Overlay Effekt entstanden ist. Wie wir das machen, möchte ich euch heute zeigen. (Falls ihr SASS noch nicht kennt, checkt definitiv die Website aus und probiert es aus, es ist grandios!) Wenn ihr wollt, dass ich noch einen Einführungspost zu SASS schreibe, gebt bescheid. :)

I fell in love with SASS a while ago. It took me quite a while until I finally checked it out, but now I'm actually asking myself how I ever wrote CSS without it. It saves a ton of time! Today I want over my mixins and played aroung with the padding-hack, which resulted in this faux overlay effect on the images, I want to show you today. How to achieve this, is what I want to show you today. (If you don't know SASS yet, definitely check out the Website and try it out, it is fantastic!) If you want me to write more of an introduction post on it, let me know :)

Ich wurde gefragt, wie man es macht, dass man bestimmte Posts aus dem Kontext nimmt, sie also nicht auf der Startseite anzeigt, dafür aber irgendwo anders anzeigen kann, nicht nur auf der Postseite selbst, sondern sozusagen "mehrere einzelne Blogs" hat. Das ist eigentlich ziemlich einfach und geht auch gar nicht so lange. Was wir machen ist mit einem einzelnen Label zu arbeiten, welches wir hidden nennen. Damit können wir beliebige Posts aus dem Kontext nehmen. Um dann unter den versteckten Labels noch zu sortieren, sortieren wir dann in der URL nach bestimmten Labels.

I was asked, how you take out certain posts out of the context, so that they will not be displayes on the index page, but still be showing on item and label pages, so you kinda get a "second blog". That's pretty simple and it takes almost no time. What we do is work with a label, to which we'll add a bit of jquery.

Hallo zusammen :)
Das Ziel des heutigen Tutorials könnt ihr gleich in diesem Post sehen. Es geht darum die Sprache mithilfe eines Buttons zu wechseln.
Ich wurde gefragt, wie man das denn machen kann. Anfangs wollte ich mit JavaScript dahinter, hab mich dann allerdings für den :checked-Hack entschieden, der auf das Script verzichtet und einen alles mit CSS lösen lässt.
Ich find die Idee eigentlich ganz sauber, ist wahrscheinlich angenehmer zu als beides parallel, ich werde das also wahrscheinlich jetzt für den Tutorialteil mal beibehalten. Gebt mir Bescheid, ob ihr's so besser findet.

Hey there :)
The result of the tutorial of today can be seen in this post. It's about changing the language with a button.
I was asked how this can be achieved. At the beginning I wanted to go with jQuery, but then I decided to go with the :checked-Hack, which does not require javascript and actually works with CSS only.
I like the idea for it's "cleanness" in the result, since it's probably more comfortable to read, so I may keep the idea. Tell me if you like it better like this.

Leute, ihr könnt euch niccht vorstellen, was für ein Chaos es war, bis ich diesen Post hier fertig hatte.
Ich wollte mal wieder ein Video machen, hab alles schön gefilmt. Der Teil vor der Pause war okay und dann hat mein Programm entschieden, dass es meinen Laptop und den externen Monitor beide auf ein Verhältnis von 16:9 bringen will (obwohl ich gesagt habe nur Bildschirm 1). Wie auch immer, ich habe dann einfach einen Tag später noch einmal gefilmt, sodass ich euch jetzt trotzdem das Video präsentieren kann.
Worum geht es? Um Parallax.
Wahrscheinlich habt ihr schon die schönen Seiten gesehen, die parallaxes Scrolling einsetzen, bei denen Animationen ablaufen, sobald ihr runter scrollt. Parallax kann man super für Storytelling einsetzen, aber auch "subtile" Effekte peppen eine Seite auf.
Um so einen "subtilen" Effekt geht es heute.

Dass ich und JavaScript uns nicht besonders gut verstehen, habe ich glaub ich schon ein paarmal erwähnt. Trotzdem versuche ich ja in letzter Zeit so bisschen damit zu arbeiten. Heute bei der Arbeit musste ich einen Turn off the lights button schreiben und habe festgestellt, dass kein Script das gemacht hat, was ich wollte. Irgendwie hab ich mir dann aus sechs verschiedenen Scripten selbst was zusammengebastelt, dass dann am Ende das getan hat, was ich haben wollte. Und weil ich eigentlich gar nicht sooo viel haben wollte, sondern eigentlich nur das, was in den Kommentaren der jeweiligen Posts auch gefragt wurde (und dann eigentlich nie beantwortet wurde...) habe ich beschlossen meinen Button mit euch zu teilen :)

Me and javaScript haven't really been best friends. that's a fact most of you probably will now about. Still, I try to get a little closer to it, and try writing some simpler scripts. Today at work I had to create a turn off the lights button and realized that all over the internet I could not find one script that did what I wanted. So I had to mix about six different ones until I got the result I was looking for. And since I did not have wishes like noone else but had the same questions usually asked in the comment section of each of the tutorials I decided to share my script with you.

Okay, ein bisschen geschummelt habe ich. SVG steht für Scalable Vector Graphics aber meine Definition stimmt eher :D
Um Vektoren geht es, nicht wegrennen Mathefeinde, das hier ist nämlich richtig cool! Mathekenntnisse sind keine vorhanden, dafür gibt es Inkscape.
SVG unterscheiden sich von herkömmlichen Bild-Formaten dadurch, dass sie nicht auf Pixeln basieren. Man kann sie so gross aufblasen wie man will, ohne dass sie je verpixelt werden. Ausserdem sind SVGs der Schlüssel zu eigenen Icon-Fonts, doch heute möchte ich euch erst einmal erklären, wie der Arbeitsverlauf ist, und wie ihr den von Inkscape generierten Code nachher aufräumt.

Okay, I tricked a little bit. SVG does not really stand for superb vector goodness but scalable vector graphics, which tells you something about it, but my definition is more attractive. It screams Check us out, which you really should, because these graphics are great. Even if it says vector, you don't have to do the maths, my new buddy inkscape does that. SVG are different from usual images because they are not pixel-based. They are made out of vectors, so out of lines. What that means is that you can blow them up, scale like crazy and they'll still look the same, just bigger. Also, SVG is the key to creating an icon-font, but today I want to show you the workflow and how to clean up the code inkscape puts out.

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.

Hallo zusammen :)
Heute möchte ich euch zeigen, wie ihr "Coutout Images" in Gimp erstellt und dann in euren Blog einfügt. Als Cutout Image bezeichne ich Bilder, die so aussehen, als wären sie ausgeschnitten worden. Das heisst in eurem Blog-Container habt ihr ein "Loch", das euren Hintergrund durchscheinen lässt.
Um das ganze zu verbildlichen, habe ich ein Demo geschrieben.

Hello Everyone :)
Today I want to show you how to create and implement cutout images in your blog. I call them cutout because that's what it looks liks. Inside of your container you'll have an image cut out. I wrote a demo so you can see the effect.

Demo

To all the English Readers: There is no English Version of this Tutorial, because there are a lot of very detailed posts about writing variables for blogger in english, and since I usually follow the rule: "Do What You Do Best, Link To The Rest" I'm just gonna send you to the place where I learned it. Link. Still, if you have any questions, feel free to ask.

Der Grund warum ich diesen Post schreibe ist der, dass ich bei meiner Suche nach Tutorials zu diesem Thema bloss uralte oder sehr unvollständige Posts (auf Deutsch) gefunden habe. Ich sage nicht, dass ich einen allumfassenden Post schreiben kann, aber zumindest einen Grossteil in abdecken möchte, für all diejenigen, die gerne eigene Variabeln in ihren Blog schreiben möchten, oder das Ziel haben Templates zu erstellendie mit dem Vorlagendesigner kompatibel sein sollen. Trotzdem befolge ich eigentlich immer den Spruch: "Do what you do best, link to the res" (tu, was du am besten kannst, verlinke den Rest) und verweise auch für alle unter euch, die mit English zurechtkommen auf den Link oben, denn dieser Post hat mir das Variabelnschreiben beigebracht.