Wie erstelle ich ein Menü (Teil 5) ♥♥♥

Hey ihr da :) Ich bin Celina von La Fille Crue & heute schreibe ich mein erstes HTML Tutorial! Es könnte etwas wacklig sein & wenn ihr Fragen habt, beantworte ich sie euch gerne in den Kommentaren :)

Das Dropdown Menü

Wer kennt es nicht? Am Anfang, wenn man sich einen Blog erstellt, dann hat man erstmal nur diesen Blog mit der Startseite. Aber mit der Zeit kommen weitere Seiten dazu. Eine Seite über sich selbst, eine Seite über die Lieblingsblogs, dann eine Facebook Fanpage & ein Twitter Account. Und so geht es immer weiter. Aber wo soll man das alles in einem schlichten Design unterbringen? Blogger bietet ja bloß die Möglichkeit, mit Bildern auf die jeweiligen Links zu verweisen, oder die Links einfach untereinander aufzulisten.

Aber mit einem kleinen HTML Code & einem Gadget, könnt ihr nun ganz einfach die platzsparende Variante des Dropdown Menüs nutzen.

Zunächst öffnet ihr euren Editor und kopiert folgenden Text hinein:

<form action="../">

<select onchange="window.open

(this.options[this.selectedIndex].value,'_top')" style="font-size: 11px; text-align:left; font-family: arial;">

<option value="">My Pages</option>

<option value="LINK URL HERE">LINK TITLE HERE</option>

<option value="LINK URL HERE">LINK TITLE HERE</option>

<option value="LINK URL HERE">LINK TITLE HERE</option>

<option value="LINK URL HERE">LINK TITLE HERE</option>

</select></form>

Damit müsst ihr jetzt nur noch euer Menü ein bisschen gestalten.

So geht’s:

font-size: 11px – Damit stellt ihr ein, wie groß die Schrift in eurem Menü sein soll. Soll sie wie im Beispiel oben sein? Dann lasst 11px. Ansonsten könnt ihr jede beliebige Zahl vor das px einsetzen.

text-align:left – So könnt ihr eure Textausrichtung festlegen. Wenn euer Text linksbündig sein soll, lasst ihr es so. Wenn ihr ihn aber mittig bzw. rechtsbündig wollt, gebt ihr wahlweise right / center ein.

font-family: arial – Hiermit stellt ihr ein, welche Schriftart euer Menü haben soll. Auch hier ist Arial im Beispiel verwendet worden. Ich weiß nicht, welche Schriftarten alles gehen, aber das müsst ihr ausprobieren.

>My Pages< -- Wie soll euer Menü “heißen”? D.h , was soll oben immer stehen? Wie im Beispiel „My Pages“ steht, könnt ihr natürlich einsetzen, was ihr wollt. Nur, verletzt niemals die < > !!!

So, bevor ihr nun weiter werkelt, müsst ihr euch überlegen, wie viele verschiedene Links ihr eigentlich in das Menü packen wollt? 4? Dann reicht der Code aus. Falls ihr mehr wollt, kopiert ihr die Zeile

<option value="LINK URL HERE">LINK TITLE HERE</option>

Und fügt sie einfach VOR

</select></form>

...ein, so oft wie ihr sie braucht.

So, jetzt wird es eigentlich einfach.

LINK URL HERE – Wie der Name schon sagt, setzt ihr dort einfach den Link ein. Also z.B http://deinblog.blogspot.com/

LINK TITLE HERE -- Wie auch hier der Name schon sagt, setzt ihr ein, wie euer Link heißen soll. Also z.B „Startseite“

Wenn ihr also überall nun etwas eingesetzt habt, ist euer Dropdown Menü fertig. Nun müsst ihr es nur noch auf euren Blog bringen.

Das macht ihr in dem ihr vom Dashboard -> Design -> Gadget hinzufügen -> HTML / JavaScript und dann einfach euren fertigen Code in das Fenster hinein kopiert.

Speichern, richtig platzieren & fertig ist euer Dropdown Menü!