Bloggen

Drop Down Menü bei Blogger einbinden

Ich habe mich länger geärgert, dass man bei Blogger kein Drop-Down Menü einrichten kann. Und dann brachte mich Google zu dieser Anleitung und nach ein bisschen Reindenken war es dann ganz einfach: http://www.5202.de/2012/10/blogger-drop-down-neue-version.html

Ich möchte gar nicht erst versuchen die Anleitung in meinen Worten für euch zu wiederholen, denn das würde nur schief gehen. Und die tolle Leistung uns allen zu ermöglichen ein Drop-Down Menü zu nutzen, soll wenigstens durch ein paar Klicks belohnt werden ;), aber ich möchte hier dann doch noch ein paar zusätzliche Hilfestellungen geben.

Zum Menüaufbau

Mein HTML für mein Menü sieht so aus:
<div id=“nav1″>
 <ul>
<li><a href=“http://lexasleben.de/“>Blog</a></li>
<li><a href=“http://lexasleben.de/p/ich-bin.html“>Über mich</a>
   <ul>
    <li><a href=“http://lexasleben.de/p/ziele.html“>Abnahme</a></li>
    <li><a href=“http://lexasleben.de/p/strategie_15.html“>Strategie</a></li>
    <li><a href=“http://www.lexasleben.de/p/sammelleidenschaft.html“>Meine Schätze</a></li>
   </ul>
  </li>
<li><a href=“#„>Blog-Hilfe</a>
<ul>
<li><a href=“http://www.lexasleben.de/2014/01/blog-hilfe-powered-bei-blogger-entfernen.html“>„Powered bei Blogger“ entfernen</a></li>
<li><a href=“http://www.lexasleben.de/2014/01/blog-hilfe-anzahl-der-kommentare-unter.html“>Anzahl der Kommentare anzeigen</a></li>
</ul>
</li>
<li><a href=“http://sportmuffelsweg.blogspot.de/p/jahreswechselchallenge.html“>Jahreswechselchallenge</a></li>
<li><a href=“http://sportmuffelsweg.blogspot.de/p/das-erste-bild.html“>Das erste Bild</a>
<ul>
<li><a href=“http://sportmuffelsweg.blogspot.de/p/das-erste-bild-ablauf-und-regeln.html“>Ablauf und Regeln</a></li>
<li><a href=“http://sportmuffelsweg.blogspot.de/p/das-erste-bild-buttons.html“>Buttons</a></li>
</ul>
</li>
<li><a href=“http://lexas-leckereien.blogspot.de/“>Rezepte</a></li>
</ul></div>

Rot markiert sind die Titel, die ihr im Menü sehen könnt.
Normalerweise wird davor der Link angegeben, der bei Klick auf den Titel aufgerufen wird, wenn ihr allerdings nur den Titel im Menü anzeigen wollt (also keine Seite hinterlegen), dann gebt ihr statt des Links einfach # ein. Dann passiert einfach nichts, wenn jemand auf den Titel klickt. Ist ja auch nichts hinterlegt. Als Link könnt ihr sowohl den Link zu einer bei Blogger erstellten Seite, direkt zu einem Post oder die Domain einer externen Seite angeben. Das ist völlig egal und alle drei Möglichkeiten sind in meinem Menü vorhanden.
Jeder Menüpunkt wird mit <li> geöffnet und mit </li> wieder geschlossen. Die Ebene wird mit <ul> geöffnet und dementsprechend mit </ul> geschlossen, wenn sie das letzte mal genutzt wird.
Ganz am Anfang wird die 1. Ebene geöffnet, danach folgt der einfache Menüpunkt „Blog“, der Link dafür wird geöffnet und gleich wieder geschlossen, da hier keine zweite Ebene geöffnet wird. Danach wird der Link zu „Über mich“ geöffnet, aber nicht wieder geschlossen, da es eine zweite Ebene geben soll. Die wird dann mit <ul> geöffnet und es folgen die einzelnen Links, die auf dieser Ebene erscheinen. Alle werden geschlossen, da es keine dritte Ebene gibt. Nachdem alle Links aufgezählt wurden, wird die Ebene mit </ul> wieder geschlossen und danach wird auch der „Über mich“ Link geschlossen, da dieser Menüpunkt hier jetzt zu Ende ist.
Das kann man jetzt so oft man will wiederholen, bis dann ganz am Ende auch die erste Ebene wieder geschlossen wird.

 

Wichtig ist beim Aufbau, dass ihr die vorgegebene Struktur beibehaltet. Also alles hübsch untereinander und die einzelnen Ebenen eingerückt. Ansonsten sieht es nachher nicht aus. Erstellt auch das Grundgerüst also am Besten in einem einfachen Texteditor und kopiert es dann nur noch in das zu erstellende HTML-Gadget rein.

Doch was genau ist damit gemeint: „Wenn ihr mit eurer HTML fertig seit, packt ihr alles zusammen in ein HTML/Java Gadget und legt es _unter_ den Header – fertig!“? 

Nichts anderes, als das hier:

Drop Down Menü

Ihr geht unter „Layout“ fügt ein HTML-Gadget hinzu, kopiert euer HTML-Grundgerüst dort hinein, speichert es und schiebt das Gadget dann an die Stelle, an der ihr euer Menü angezeigt haben wollt.

Wirklich einfach.
Und auch die Änderungen im Quellcode eurer Seite sind einfach, es ist ja nur reinkopieren. Denkt dran, wenn ihr in den HTML-Bereich klickt und dann STRG+F drückt öffnet sich ein Suchfenster und lotst euch direkt zu den Stellen, an denen ihr die zusätzlichen Zeilen einfügen sollt.
1. HTML bearbeiten und die zwei Abschnitte, die euch bei 5202 gegeben werden reinkopieren.
2. Anpassen und das Ganze optisch an euren Blog anpassen.
Optisch hübsch machen könnt ihr das Ganze jetzt ganz einfach über den Vorlagen-Designer von Blogger (dank des zweiten HTML-Teils, den ihr in eure HTML-Vorlage bei Blogger kopiert habt).
Drop Down Menü
Diese zwei Punkte müssten jetzt neu bei euch auftauchen, wenn ihr alles richtig reinkopiert habt.
Ich hoffe, ich konnte die schon vorhandene Erklärung für manche noch ein bisschen verständlicher gestalten.
Sollte ich euch zusätzlich verwirrt haben, tut es mir leid. 😉
Sollten noch Fragen offen sein, ich helfe gerne, so gut ich es kann.

19 Kommentare

  • Hi, ich versuche das schonden ganzen Samstag und bekomme das leider nicht hin 🙁 bei mir legt er die „unterseiten“ einfach nur eine Reihe unter die Überschrift :/ kannst du mir evtl helfen ? Habe im Entdefekt deine „Vorlage“ genommen und sie mit meinen Punkten ausgetauscht, aber es kommt einfach kein Drop Down Menü -.-

    Lg Frida

    • Hast du mal einen Link zu deinem Blog für mich? Denn dein Profil lässt sich nicht aufruffen. Und den Rest der Anleitung auf 5202.de hast du auch genauso befolgt?

  • Hi Lexa, komisch dachte ich hätte dir schon geantwortet.Also ich habe deine Anweisungen befolgt, die von 5202.de nicht denn dafür hatte ich nachhe einfach keine Geduld mehr. mein Blog findest du unter:

    Ich wollte # Abnehmen, # Stil und # Wohlfühlen gerne als drop down menü unter Ziele 2014 packen. Und wenn ich es dann endlich mal geschafft habe dann halt evtl andere Seiten.

    Lg Frida

    • Dann ist klar, warum es nicht funktioniert. Du musst im HTML-Bereich deines Blogs einiges ändern, bevor du das Menü so einbinden kannst, wie ich es beschrieben habe. Meine Erklärungen ihr sind nur zusätzliche Erläuterungen. Das grundsätzliche findest du auf dem verlinkten Blog. Wenn du deinen HTML-Code angepasst hast wie dort beschrieben und es dann immer noch nicht funktioniert, kannst du ja nochmal nachfragen. Hier, oder direkt bei 5202.de. Wahrscheinlich kann dir da viel besser geholfen werden.

      Viel Erfolg.

  • ufff ich arbeite jetzt schon 3h an meiner Dropdownliste und irgendwie wirds nix. Obwohl deine Vorlage gut ist. Ich geh mal weiter probieren

  • es stand alles nebeneinander, also der Hauptpunkt war richtig und die Unterpunkte gingen dann darunter quer weg und nicht senkrecht…Hab jetzt nochmal von vorn angefangen. 😀 Ma schauen obs dieses mal klappt

    • Die Leerzeichen am Anfang der Zeilen sind wichtig. Die eingerückte Struktur sorgt dann dafür, dass alles ordentlich untereinander steht. Vielleicht lag es ja einfach nur dadran bei dir.

  • Hey ich probiere gerade ein dropdown menü zu erzeugen 😀
    leider kann ich die angegebenen Zeilen in der HTML -Vorlage nicht finden, weißt du zufällig warum?

    • habe mittlerweile die beiden Sachen in meinem HTML gefunden aber jetzt erscheint kein dropdown menü nur die ganznormalen Punkte der ersten ebene

      • Hallo Tina,

        ich war im Urlaub und komme deswegen erst jetzt dazu zu antworten.

        So aus dem Stehgreif kann ich dir jetzt leider auch nicht helfen. Hast du dich genau an die Anleitung bei 5202 gehalten? Mein Post liefert ja nur eine Zusatzhilfe.

        Am besten auch dort direkt nachfragen 😉

        Viel Erfolg noch.
        Lexa

  • Hey Lexa,
    sag mal, geht das, dass ich das Drop Down Menü habe und darin auch ein Drop Down. Wie zum Beispiel…Rezepte = vegetarisch, vegan und sowas??

    • Hey,
      ja, das geht. Du fügst einfach weitere Ebenen ein. Ist aber auch bei 5202 erklärt, wenn ich mich richtig erinnere.
      LG Lexa

  • Hallo Lexa,

    ich glaube, dass versuche ich mal umzusetzen. Ich ärgere mich darüber auch schon seit einiger Zeit.
    Als ich noch bei WordPress war, ging das alles ganz easy, doch da ich eigentlich nur noch privat blogge, wechselte ich wieder zu Blogger. Hoffentlich bekomme ich es hin. Lieben Dank, für den Link und die Tipps 😀

    Liebe Grüße
    Lola

Schreibe einen Kommentar