[Blogger] Take certain Post out of the stream (and have them somewhere else) ✤✤(✤)

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.



English Deutsch

1. Vorbereitung

Okay, wir arbeiten hier mit kondizionalen Tags und etwas jQuery.
Bevor wir das Script schreiben können, müssen wir unseren Blog untersuchen.
Dafür bracht ihr einen Browser wie Firefox oder Chrome, mit dem ihr das HTML dahinter ansehen könnt.
Öffnet euren Blog, und macht rechtsklick auf einem der Labels. Wählt dann Element untersuchen, um euch den Code anzusehen.

1. Prepping

Okay, we work with conditional tags and jQuery.
Before we start we need to inspect our blog.
For that you'll need a browser capable of looking through the Code.
So open up your blog, search for the labels and right click on one of them, to see the code.

Der Code klappt auf. Was ihr braucht ist die Klasse des Label-containers. Im Falle eines Stadartlabel-containers ist das .post-labels ein einzelnes Label sprechen wir also mit .post-labels a an. Das merken wir uns.
Was wir danach tun ist, die einzelnen Elemente nach oben durchgehen, bis wir den container gefunden haben, bei Blogger ist das typisch unlogisch .date-outer auch das merken wir uns.

The Code will pop open. What we need is the class of the label-container. In Case of a blogger standard layout, it'll be .post-labels. To call a single label we would then use .post-labels a. We'll memorize that.
What we then do is follow the containers up, finding the main post container. In typical blogger not-at-all logic it has the name .date-outer, we'll rememeber that one as well.

2. Script

Okay, kommen wir zum Script, welches im Grunde ganz einfach ist. Was wir tun ist, die labellinks nach "hidden" zu durchsuchen. Das ist das Label, welches wir hinzufügen werden. Und wenn wir das gefunden haben, gehen wir zum entsprechenden Post-Container und sagen ihm, dass er sich auf allen index-Seiten verstecken soll. Weil die Label-Suchseiten aber leider auch index-Seiten sind, müssen wir dem Post bei den Labelseiten sagen, dass er doch angezeigt werden soll. Und weil Blogger scheinbar keine Möglichkeit hat, konditionale Tags zu verbinden, müssen wir das in zwei separaten Scripts machen.
Das ganze ist jQuery, also müssen wir das noch hinzufügen. Falls ihr das schon habt, müsst ihr das nicht mehr reinkopieren.

Für das Script suchen wir nach </body> und fügen oberhalb davon den Code ein.

The script is basically very simple. What we do is search the labellinks for "hidden" which is the label we'll add. As soon as we found it, we jump to it's parent post-container and tell it to hide on every index page. But since the label search pages are index pages as well (and blogger's conditional tags seem not to be able to be used in combination) we add a second script where we tell the container to show itself to the world when on a label search page. And since it's jQuery you need to add the library. If you already use it, you do not need to add it a second time.

For the script we search our code for </body> and place the script above that.

<!-- jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>

<!-- hide posts tagged "hidden" on index pages -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <script type='text/javascript'>
        //<![CDATA[
            $(function() {
                $(".post-labels a").filter(":contains('hidden')").parents('.date-outer').hide();
            });
        //]]>
    </script>
</b:if>

<!-- display posts tagged "hidden" on Label pages -->
<b:if cond='data:blog.searchLabel'>
    <script type='text/javascript'>
        //<![CDATA[
            $(document).ready(function() {
                $(".post-labels a").filter(":contains('hidden')").parents('.date-outer').show();
            });
        //]]>
    </script>
</b:if>

3. Versteckter Post

Nun veröffentlichen wir unseren Post. Und fügen unter unseren Labels ein hidden ein. Sobald das veröffentlich ist, sehen wir den Post nicht auf der Startseite.
Suchen wir aber nach einem Label, welches unser versteckter Post trägt (dafür http://deineURL.blogspot.com/search/label/LABELNAME eingeben), wird es angezeigt.
WARNUNG Blogger lädt die Posts, bevor es sie entfernt. Das heisst der Post hinterlässt einen leeren Platz. Habt ihr also beispielsweise 8 Posts auf einmal und die letzten 8 Posts sind versteckt, werded ihr eine komplett leere Seite haben. Leider habe ich bisher kein Workaround gefunden, also würde ich vielleicht mal mit infinte scrolling dahinter, oder einfach das Datum der Posts verändern, sodass es nicht so drastisch auffällt, wenn ihr viele versteckte Posts haben wollt.

3. Hidden Post

Now we publish out post. When including the tags you want to include the label hidden. As soon as we publish our post, it will not be displayed on the index page. But if we search for a label that our hidden post contains (just enter http://yourURL.blogspot.com/search/label/LABELNAME), we can see it.
WARNING Blogger will still load the post before removing it. Which means it will leave an empty spot on your index page. So if you showcase 8 posts per page and you have 8 hidden posts right after each other, you will end up having a blank page. I have not found a workaround, so I suppose if you publish a lot of hidden posts at once, you may want to add infinite scrolling or change that date of your posts.

4. Details

Es ist nur ein Detail aber ich finde ein hidden label einfach nicht schön, also wollte ich es entfernen. Das geht ganz schnell, einfach ein Script indem wir wieder nach dem label suchen und das dann verstecken (in keinem konditionalen Tag, wir wollen es überrall verstecken). Aber was als Resultat herauskam waren zwei Kommas nacheinander. Die Kommas sind leider keine eigenen Elemente, also muss man das schnell machen. Ich habe es einfach in einem span-tag gepackt und dann beim script noch das folgende Element auch ausgeblendet. And that does the job!

It's just a detail but I just don't like the look of a hidden label in my list. So I wanted to remove it, with a simple script, but ended up not removing the comma. The comme is not in a container so you have to add some span or something around it. As soon as it is wrapped, we can hide it in the script. And then the job is done!

Das Script fügen wir unterhalb der anderen ein.

We add the script underneath the other ones.

<!-- hide "hidden" from label list -->
<script type='text/javascript'>
    //<![CDATA[
        $(function() {
            $(".post-labels a").filter(":contains('hidden')").hide().next().hide();
        });
    //]]>
</script>