Change Sidebar-Code on Post/Static Pages ✤✤✤

Erinnert ihr mich noch an April? Dort hab ich zum ersten Mal eine Sidebar gehabt, die nur auf der Startseite angezeigt wurde.
Das war ein ziemlicher Aufwand, weil ich sie komplett selbst geschrieben habe, aber ich möchte euch heute zeigen, wie das auf eine einfachere Art geht, mit konditionalen Tags und dem schon vorhandenen blogger markup.
Do you remember april, when I firt got my sidebar which was only displayed on the home page?
It took me a lot of time because I did write it all myself and just made it fit into the blog, which was pretty hard. But today I wanna show you an easy way to create the same effect. Using conditional tags and the markup from blogger.


In meinem Beispiel habe ich auf dem Blog ein About Me, eine Box in der verschiedene Posts hervorgehoben sind, sowie eine To-Do-Liste.
Bei mir ist es immer so, dass ich auf der Homepage auf die Gadgets achte, bei den einzelnen Post-Seiten eher weniger und auf statischen Seiten fallen mir Sidebars gar nicht mehr aus.
Mein Plan ist also auf der Hauptseite alle Gadgets anzuzeigen, auf den Post-Seiten nur das Gadget mit den hervorgehobenen Links und auf den statischen Seiten gar keine Gadgets mehr. Wie das geht, zeige ich euch jetzt.

In my example I have three widgets in my blog. An About me, a box with different links to posts I want to highlight and a to-do list.
I personally, only pay attention to the sidebar on the home page, as soon as i click on a post I maybe only glimpse at the sidebar and on static pages I don't even waste thinking about it, because I focus on the content. So my plan is, to hide all the gadgets on the static page and only showcase the gadget with the links on post-pages.

Find ID's

Als erstes müssen wir herausfinden, wie wir unsere Gadgets ansprechen können.

Dazu gehen öffnen wir den Code und suchen dann nach dem ersten Widget, das sich in unserer Sidebar befindet.

First of all we have to find out the IDs of our widgets to be able to work on them.

Open up your code and search for the first gadget in your sidebar





Dann haben wir gleich schön alle IDs auf einem Haufen.

You're gonna find all of them listed below each other.



Für mich waren das also:

So for me the IDs are:

#Profile1
#HTML1
#HTML2

HTML1 ist das Gadget, das sich besonders verhalten soll. Das ist mein "Link-Gadget", welches auf den Post-Seiten angezeigt werden soll.

HTML1 is the widget acting specially, it is my "link widget", I want to showcase on post pages.

Write Conditional Tags

Als nächstes schreiben wir jetzt unseren konditionalen Tags.
Was wir damit tun, ist Blogger eine CSS zu geben, die nur dann angewendet werden soll, wenn die Bestimmungen zutreffen.

Heute brauchen wir die Konditionen für die Statische Seite und die Post Seite.
Diese sehen so aus:

Next we're writing our conditional tags.
What we do in them is write a css, which is only applied if our condition is fulfilled.

We do need a conditional tag for static pages and post pages.
That's what these look like:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 Alles was auf der Post-Seite passieren soll
 | Everything happening on post page
</b:if> 

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 Alles für die statische Seite
 | Everything happening on static page
</b:if>

Innerhalb davon fügen wir style-Tags ein.

Auf der Post-Seite blenden wir die Gadgets aus, die wir nicht haben wollen.
Für die statischen Seiten entfernen wir die ganze Sidebar und strecken den Inhalt der Seite auf volle Breite des Blogs.
Wir können aber auch das Aussehen der Widgets verändern, genauso wie übrigens auch die Titel-Anzeigen, oder das Datum, oder den Hintergrund, oder den Header. Was auch immer ihr wollt :D
In meinem Fall habe ich auf der Statischen Seite dem Gadget einen Hintergrund gegeben, einfach um euch zu zeigen, dass wirklich jede CSS dort anwendbar ist, allerdings empfielt es sich nicht, einen so hässlichen Hintergrund ohne Padding und angepasstes Text-styling stehen zu lassen. Das ist wirklich nur für die Demo gedacht. ^^

Inside of them, we're adding style-Tags and our specific CSS.
On the post-page we hide all the widgets we don't want to show.
For the static pages, we remove our sidebar completely and set the width of our content to the full width of our blog.
We can also change the appearance of our widgets, just like the look of links, titles, date, background or the header.
Whatever you want. :)
In my case I did add a background to the static page widget, even though it does look ugly, but it's only for the purpose of demonstration, so I suppose it's okay.

Apply

Okay. Eigefügt werden diese konditionalen Links direkt unterhalb des schliessenden head-Tags.
also unter:
Okay, you're gonna past those tags directly underneath the closing head tag.

</head>

Meine sehen jetzt so aus. Ihr müsst das jetzt natürlich einfach auf eure eigene Sidebar anpassen, mit den IDs, die ihr in eurem Blog habt.

That's what mine look like.

<!-- only HTML1 on Post Page -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style>
  #Profile1, #HTML2 { display: none }
  #HTML1 { background: #aaa }
 </style>
</b:if> 

<!-- no sidebar on static page -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <style>
  .main-inner .columns {
   padding-left: 0px !important;
   padding-right: 0px !important;
  }

  .main-inner .fauxcolumn-center-outer {
   left: 0px !important;
   right: 0px !important;
  }
  
  .main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
   display: none !important;
  }
</style>
</b:if>

Else

Falls ihr jetzt das Gadget, das nur auf der Post-Seite angezeigt werden soll, auf der Startseite verbergen wollt, dann würdet ihr den Code dafür um ein else erweitern. Also um eine Information, was passieren soll, wenn die Kondition nicht mit einem Ja beantwortet wird. Also wenn nicht auf der Post-Seite, entferne Gadget, würde das dann ausgesprochen heissen.

If you, additionally, want to hide the gadget shown on the post page on the home page (confusing sentence, sorry) you just add an else. An else defines what happens if the answer to your condition is negative.

<!-- display HTML1 on Post Page and hide on Home Page -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <style>
   #Profile1, #HTML2 { display: none }
   #HTML1 { background: #aaa }
  </style>
 <b:else/> 
  <style>
   #HTML1{ display: none }
  </style>
</b:if>

Result

Das Ergebnis davon und auch der anderen Regel würde dann so aussehen.

Ich hoffe das hat euch weitergeholfen :)

And my result now looks like this.

Hope this was helpful :)