Tipps & Tutorials, tutorial

Sidebartitel ausblenden

Heute zeige ich euch, wie man die Sidebartitel ausblenden kann. Dieser Post besteht aus zwei Teilen: Wie man alle Sidebartitel ausblendet und wie man nur bestimmte Titel ausblendet. Ersteres ist wirklich sehr einfach, bei zweiteres müsst ihr euch selbst ein wenig mit eurem Code beschäftigen ist es auch gar nicht so schwer 🙂

Meistens wird das gebraucht, um ungewünschte Titel, die man eingeben muss, auszublenden oder um die Titel durch Widgets mit hübschen Grafiken zu ersetzen.

Da viele von euch noch Probleme mit der Suche haben, erkläre ich hier euch, wie ihr die richtige Stelle auch ohne Suche findet 😉

Variante 1: Alle Sidebartitel ausblenden

1. Öffnet “Bloggerdashboard” –> “Vorlage” –> “HTML Bearbeiten”.
 
2. Sucht nach der Zeile <b:skin>…</b:skin>. Es ist relativ am Anfang, bei uns ist es zum Beispiel in Zeile 13. Klickt neben dran auf das Pfeil.
 
 
3. Jetzt seht ihr ganz viel blaues Kram. Das nennt man übrigens CSS, so ganz nebenbei ;). Scrollt ganz zum Ende, bis ihr ]]></b:skin> seht. Fügt folgendes davor ein:
.sidebar h2 {
display:none;
}

4. Speichern & Fertig!


5. Mit display:none; verschwindet der Titel komplett und die Widgets rutschen ein wenig hoch. Wenn ihr das nicht wollt, könnt ihr auch visibility:hidden;, dann ist der Titel noch da bzw. nimmt noch den Platz ein, ist aber unsichtbar. Ihr könnt ja beides mal ausprobieren (aber nicht zusammen!) und schauen, was euch besser gefällt 🙂

Variante 2: Nur bestimmte Sidebartitel ausblenden

1. Bevor wir anfangen, müssen alle Widgets, deren Titel ausgeblendet werden, vorhanden sein. Es ist egal, was ihr als Titel wählt – am besten eins, dass ihr unter Layout schnell wieder erkennen könnt – zum Beispiel könnt ihr das Bild-Widget mit dem Potrait von euch “Potrait von mir für die Startseite” nennen, für eure Leser ist der Titel nicht sichtbar.
 
 
2. Sucht euch eure Widgettitel aus, die ihr ausblenden möchtet. Um diese ausblenden zu können, brauchen wir seine WidgetID. Die findet man am einfachsten heraus, wenn man mit der Maus über die Werkzeug-Icons des Widgets fährt. Im Browser wird die komplette URL angezeigt, in der auch die ID versteckt ist, die wir brauchen:
 
 
Wenn ihr auf das Bild klickt, könnt ihr die ID’s besser erkennen.
 
Bild-Widget ID = Image1
Blog-Archiv = BlogArchive1
Suchen = CustomSearch1
 
WICHTIG: Bitte achtet auf die Groß- und Kleinschreibung – ansonsten funktioniert das nicht ganz!
 
 
3. Befolgt von der Variante 1 die Schritte 1 – 3, fügt aber statt .sidebar h2 {…} folgendes ein:
#Image1 h2{
display:none;
}

#BlogArchive1 h2{
display:none;
}

#CustomSearch1 h2{
visibility:hidden;
}
 
Ihr könnt aber auch IDs mit den gleichen Eigenschaften zusammenfassen, so wie hier im Bild:
 
 

4. Speichern & Fertig!

15 Comments

  1. Emma

    13. November 2013 at 15:08

    Danke für dieses schöne Tutorial, wird mir bestimmt noch irgendwann helfen! 🙂

  2. Nadi

    14. November 2013 at 6:32

    vielen Dank!

    könntest Du vielleicht noch ergänzen, wie man die Titel durch Grafiken ersetzt?

    1. Labellogy s

      9. May 2014 at 12:45

      würde ich auch gern wissen

  3. Kathy

    14. November 2013 at 17:23

    Genial! Hab es gerade angewendet und es klappt super! Dankeschoen!!

  4. bun, hun.

    15. November 2013 at 7:21

    Vielen Dank für deinen Hinweis zum Blogger Forum 🙂 Schaue gleich mal wieder rein <3

  5. Myriam Kreatief

    30. November 2013 at 8:17

    Es geht noch schneller, wenn man den Titel durch HTML-Kommentare ersetzt also anstelle Archiv stünde dann dort: <!–Archiv–> und dann ist der Titel auch weg 🙂

    1. Anonym

      18. May 2015 at 1:06

      Dankeschön :*

  6. Tamara

    15. December 2013 at 12:50

    Hat super geklappt, danke 🙂

  7. Michelle Früh

    7. January 2014 at 9:50

    Danke hat gleich funktioniert:)

  8. lisa marie

    11. April 2014 at 11:34

    Schade, bei mir funktioniert das leider nicht .. trotzdem tolles tutorial!

  9. betsi

    21. October 2014 at 16:06

    Danke! Das ist eine große Hilfe!

  10. maackii

    4. August 2015 at 20:25

    Danke fürs Tutorial! Hat super und ganz einfach geklappt 😉

  11. Vanessa Amann

    4. October 2015 at 20:46

    bei mir hat es leider auch nicht geklappt.

Leave a Reply