Info: Dieser Blog wurde 2014 eingestellt. Dies hat viele Gründe, die an dieser Stelle jedoch nicht relevant sind. Die meisten der hier veröffentlichten Tutorials sind inzwischen nicht mehr aktuell, verlasst euch also nicht auf das hier geschriebene.
Zusammen mit dem Blog sind auch unsere E-Mail, unser ask.fm und unser facebook eingestellt.

Ein schlichtes Menü erstellen

Edit: Der Fehler mit den Bildern tut mir furchtbar Leid. Ich hoffe jetzt funktioniert alles.

Da doch öfters die Frage kommt wie man ein Menü wie das folgende macht, dachte ich mir ich schreibe doch einmal ein ausführliches Tutorial darüber.


Schritt 1

Als erstes geht ihr auf Layout und danach auf 'Gadget hinzufügen'
Dort wählt ihr dann ein neues Textgadget zum hinzufügen aus.


Schritt 2
Dort schreibt ihr erst einmal die Namen eurer Seiten hin.



Jetzt verlinkt ihr mit dem kleinen Link-Symbol die Seiten auf den Wörtern.
(Wenn sich der Link in einem neuen Fenster öffnen soll guckt euch dieses Tutorial an)
Danach wechselt ihr in den HTML-Teil.



Dort habt ihr jetzt die Möglichkeit euer Menü zu gestalten.

Derzeit sieht es in etwa so aus:

<a href="http://deinlink.de">home</a> | <a href="http://deinlink.de">about</a> | <a href="http://deinlink.de">contact</a> | <a href="http://deinlink.de">follow</a>

Jetzt müsst ihr vor den ganzen Code <div> und ganz am Ende </div> hinschreiben. Diese sind der öffnende und der Schließende Tag für den Div-Code (div = division = Bereich) mit dem ihr das Menü genauer definieren könnt.
Ich hoffe diesen Satz habt ihr versatnden, wenn nicht auch nicht schlimm.

Wenn ihr das Menü zentrieren (mittig ausgerichtet) haben wollt fügt ihr align="center" direkt hinter <div ein. (Achtung, es muss vor der schließenden Klammer > stehen) [<div align="center">]

Ihr könnt das Menü auch noch anderweitig gestalten.

Dazu fügt ihr am besten hinter das <div style="" ein. (Dasselbe Prinzip wie bei align)
Zwischen die Anführungszeichen kommen die Dinge hin, die ihr haben wollt.

Nur Großbuchstaben: text-transform: uppercase; Nur Kleinbuchstaben: text-transform: lowercase;

Abstand zwischen den einzelnen Buchstaben definieren: letter-spacing: 1px; (probiert mit der Pixel-Zahl herum. Je größer um so größer der Abstand.)

Abstand zwischen den einzelnen Wörtern definieren: word-spacing: 1px; (probiert wieder mit der 
Pixel-Zahl herum. Je größer um so größer der Abstand.)

Schriftart verändern:  font-family: Verdana;

Schriftgröße verändern: font-size: 11px; 

Mehr Codes findet ihr hier (click)

Ein Beispielcode für das fertige Menü wäre z.B.:

<div align="center" style=" letter-spacing 2px; word-spacing: 3px; text-transform: uppercase;"<a href="http://deinlink.de">home</a> | <a href="http://deinlink.de">about</a> | <a href="http://deinlink.de">contact</a> | <a href="http://deinlink.de">follow</a></div>

So, das wars. Fragen ect. könnt ihr wie immer bei Formsping loswerden oder auch in unserer neuen Shotbox in der Sidebar.

Kommentare:

  1. haha achja? xD
    Wo denn, wäre möglich ^^

    AntwortenLöschen
  2. DANKE!!! Nicht nur für diesen Post, sondern für Tutorials im Allgemeinen, sie sind wirklich gut erklärt und sehr hilfreich! :)
    Liebe Grüße
    Leo

    AntwortenLöschen
  3. Hei :) ich schau ja schon seid langem bei dir ganz schön oft vorbei.Mal ne Frage: hat das neue Layout irgendetwas von den Bilder verändert? die kann mein pc nicht anzeigen. :/

    AntwortenLöschen
  4. hey (: das ist echt ne tolle sache. aber kann mir jemand sagen warum mein menü nicht erscheint, also durchsichtig ist? wenn man es markiert, sieht man, dass es da ist.
    trotzdem schon mal danke für das tolle tutorial! ♥

    AntwortenLöschen
  5. Heyo, wisst ihr wie man so ein Menü erstellt?
    http://ichbinnele.blogspot.de/

    AntwortenLöschen
  6. kann man das auch fixieren? sodass man das oben mitscrollen kann?

    lg jasmin
    http://fuckofreality.blogspot.de/

    AntwortenLöschen
  7. ICh hab mal ne frage bei mir klappt soweit alles bis auf das bei 'about' kein neues fesnter öffnet wo ich was über mich rein schreiben kann :/ wie funktioniert sowas? kannst du mir bitte weiter Helfen?
    lalaevachen@gmx.de

    AntwortenLöschen
  8. kann man auch machen, dass es:
    1. fixiert ist ?
    2. so zwei Ränder/Striche oben und unten hat so wie hier: http://pureleidenschaft.blogspot.de/

    antwort bitte an: foreveryoung-jenny@web.de

    AntwortenLöschen
  9. Oh Gott dankeschön. Das ist das erste Tutorial das bei mir funktioniert hat!

    :)

    AntwortenLöschen

Wie schon an anderer Stelle dieser Seite bemerkt, ist der Blog eingestellt. Das bedeutet leider auch, dass wir als Blogautoren auf deinen Kommentar nicht eingehen werden.