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.

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.

Nach einer gefühlten Ewigkeit wieder einmal ein Gimp-Tutorial. Letztens habe ich mithilfe von verschiedenen Actions in Photoshop einen Effekt hinbekommen, der mir richtig gut gefallen hat und ich hab mich gefragt, ob man das wohl in Gimp rekonstruieren kann.
Das Ergebnis hat mir dann sogar noch besser gefallen als die Photoshop-Version, also musste ich es euch zeigen :D

After what feels like an eternity a new gimp-tutorial. A few days ago I was playing around with actions in photoshop and achieved an effect that I really liked and I asked myself if I could recreate it in Gimp.
I ended up liking the end result even more than the photoshop version so I had to show you guys :D

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