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.

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 :)

Dieses Problem hat mich für eine ganze Weile beschäftigt. Wie um Himmels Willen bekommt man Widgets zwischen Posts. Das einzige, was ich herausfand war, dass man Ads zwischen zwei Posts platzieren konnte, doch wie man Gadgets zum Beispiel zwischen dem dritten und vierten Post platzieren konnte, war im WWW unauffindbar.
Vor einer Weile hab ich begonnen mich näher mit JavaScript und jQuery zu beschäftigen und hatte dann plötzlich eine Idee, die mir geradezu zu einfach vorkam. Ich hatte schon Sorge, dass ich was nicht bedacht hatte, doch es funktioniert tatsächlich. Und weil ich so happy bin, möchte ich euch heute zeigen, wie es funktioniert.

It stayed with me for years, how the hell do you put widgets in between posts. Not after each one, but for example between the third and fourth post. I googled forever, but the only thing I knew after was that you could place Ads between posts, but how to put widgets between any kinds of posts was nowhere to be found.
A while ago I started getting into JavaScript and jQuery und suddenly one day I had an idea which seemed almost to simple to not have been found before. I was afraid it wouldn't work, but it actually did and that's why I want to show you today, how you can achieve This.

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.

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.

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

Update
Da dieser Post einer der meistbesuchten ist und mittlerweile etwas veraltet ist, hab ich ihn jetzt überarbeitet.

Since this post is one of the most popular and a little old already, I decided to revise it.

---

Die Blogger-Attribution. Man kann zwar sein eigenes Copyright hinzufügen, aber powered by blogger und die Information welche Vorlage man verwendet, bleiben vorhanden. Mich hat das früher, als ich noch die Blogger-Templates verwendet habe, immer extrem genervt und deswegen habe ich mein eigenes Copyright geschrieben. Wie ihr das macht, zeige ich euch in diesem Tutorial.

The Blogger Attribution. You can add your own text, but there still remains information about the template and who powers the site. I never liked it, so I wrote my own copyright information. It is done very easily. Just follow these simple steps.

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.

So, nach einer gefühlten Ewigkeit mal wieder ein kleiner Quicktip. Ich wurde gefragt, wie ich zwei Bilder nebeneinander platziere. Das möchte ich euch jetzt kurz zeigen.
Ich hab total viele Tutorials zu dem Thema gelesen, diese beiden Versionen kommen aber am häufigsten zu Gebrauch.

After what seems like forever a new quicktip. I've been asked how to place two images next to each other. That's what I want to explain to you today.
I searched like a hundred tutorials about that, but the two solutions I show you here work best for me.

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 ^^