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.

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.

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.

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.

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.