[BLOGGER] Widgetsection Under Any Post ✤✤✤

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.




English Deutsch

Am Anfang brauchen wir jQuery. Womöglich habt ihr das bereits in euren Blog integriert, falls nicht, kopiert das Script am Ende mit.
Die Grundidee ist ganz einfach. Wir erstellen unterhalb der Blogspots eine neue Widget-Section, in die wir die Gadgets kopieren können, die wir zwischen den Posts haben wollen. Als nächstes fügen wir einen Container unter den dritten Post ein und in diesen Container verschieben wir den Inhalt der Widget-Section.

Als erstes müssen wir also unsere Widget-Section schreiben. Dazu öffnet ihr das HTML, springt zum Widget Blog1, platziert euren Cursor und sucht dann nach </b:section> Das erste Ergebnis nach Blog1 ist die schliessende Section der Blog-Section. Direkt darunter platzieren wir unsere neue Section.

To begin with we'll be using jQuery so make sure you'll have that included, in case you haven't copy the link as well.
The basic idea is the following, we create a widget section right underneath the blog section in which we add the widgets. Then we'll add a class to the third post and put a div-container under it. And then we just move the content of the widget-section into our new container.

First we need to write the section. So open up your HTML, jump to the Blog Widget and put your cursor there. Then search for </b:section> and the first result after the Blog Widget is the end of the section. Underneath it, we'll write our new section.

<b:section class='between' id='between' showaddelement='yes'>
</b:section>

Wenn wir das haben können wir unter Layout ein Gadget einfügen und uns das mal ansehen.

After we've done that we can add a Widget in the layout section and have a look at the result.

Das ist jetzt ganz am Ende. Nun suchen wir nach </body> und fügen oberhalb davon unser Script ein. Und schon haben wir nach dem dritten Post unser Widget. Wollt ihr es an einer anderen Stelle haben, müsst ihr die Zahl hier .date-outer:eq(2) verändern. Einfach -1 rechnen.

So now it's under all of the posts. We search for </body> and place the script above that. And we moved our Widget! If you want to put it somewhere else, just change the number here .date-outer:eq(2) by taking your post number and calculating -1,

<!-- jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
<!-- Widget Area Between Posts -->
<script>
    $(document).ready(function(){
        $(".date-outer:eq(2)").addClass("thirdpost");
        
        $( "<div class='mywidgetcontainer'/>" ).insertAfter( ".thirdpost" );
        
        var widgetcontent = $("#between").contents();
        
        $(".mywidgetcontainer").append(widgetcontent);
        $("#between").empty;
    });
</script>