Tipps & Tutorials, tutorial

Wie erstelle ich ein Menü – Rundes Menü (Teil 7)

Hallo ihr Lieben!

Mein Name ist Lina und mir gehört der Blog “Home is where your Heart is“. In diesem Tutorial zeige ich euch, wie ihr ein abgerundetes Menü erstellt.

Als erstes öffnet ihr den HTML Modus (www.blogger.com|Design|HTML bearbeiten).

Dann sucht ihr (Strg+F) nach: #footer und fügt darunter folgendes ein:

/* Navigation
----------------------------------------------- */
a.navi {
  font-family: Dawning of a New Day;
  font-style:Dawning of a New Day;
  background-color: #f5f5f5;
  color: #00000;
  padding: 2px;
  padding-left: 8px;
  padding-right: 8px;
  line-height:-5px;
  font-size: 15px;
  text-align: center;
  margin-bottom: 7px;
  text-transform:none;
  -webkit-border-radius: 3pt;
  -moz-border-radius: 3pt;
}

Die Größe kann hier verändert werden:

-webkit-border-radius: 6pt;
-moz-border-radius: 6pt;

Z.B. kann man statt den 6pt einfach 8 nehmen!

Falls es diesen Teil nicht gibt, fügt ihr einfach den folgenden Code über ]]></b:skin> ein:

a.navi{
-webkit-border-radius: 6pt;
-moz-border-radius: 6pt;
border-radius: 6pt;
}

Natürlich können diese Abrundungen noch angepasst werden!

Dann der 2. und letzte Schritt:

Geht auf eure Seitenelemente (www.blogger.com|Design|Seitenelemente) und überlegt wo ihr das Menü hinhaben wollt. Ich habe sie einfach mal über den Posttitel gemacht!

Ihr klickt dann an eurer Wunschstelle auf Gadget hinzufügen und wählt HTML/JavaScript aus. (Das steht etwas weiter unten!)

Dann öffnet sich ein Fenster,wo ihr diese Befehle eingebt:

<center>
<div id="navi">
<a class="navi" href="LINK1">TEXT</a>
<a class="navi" href="LINK2">TEXT</a>
<a class="navi" href="LINK3">TEXT</a>
<a class="navi" href="LINK4">TEXT</a>
</div>
</center>

Bei LINK fügt ihr ein,wo das Menü bzw. dieser Button hin soll (z.B. https://www.lovemira.de ).

Bei TEXT kommt dann hin,wie dieser Menü-Button heißen soll (z.B. : Home, Contact, …).

Falls ihr nicht so viele Buttons braucht könnt ihr auch entfernen:

<a class="navi" href="LINK">TEXT</a>

 

Reichen euch die Buttons nicht,könnt ihr diesen Befehl auch einfach nochmals eingeben!

WICHTIG: Immer nach </a> kommt ein neuer Button!

Vor…

</div></div></center>

(steht ganz am Ende) darf nichts stehen!

Die Farbe der Buttons könnt ihr dann ganz einfach bei Navbar bzw. Navi (HTML) ändern.

Liebste Grüße & Dankeschön an Mira:))

Anmerkung von Mira: Alternativ zu pt kann auch px genutzt werden 😉

57 Comments

  1. Jen W

    8. May 2012 at 22:14

    Da fehlt aber noch der universelle Befehl "border-radius" ohne moz und webkit 😉
    Sonst wird es am Ende nicht in allen Browsern zu sehen sein.
    http://www.css-cafe.de/art_css3_vendor.php

  2. emely

    9. May 2012 at 7:28

    Tolles Tut – wenn ich mit meinem Menü nicht schon zufrieden wäre, würd ichs machen 🙂

  3. Krissii

    9. May 2012 at 9:02

    echt klasse Tut. werds heute Nachmittag mal ausprobieren.
    Danke 😀

  4. Lena ♥

    9. May 2012 at 9:33

    bei mir wird das nicht rund 😀

  5. Meltem

    9. May 2012 at 10:10

    Bei mir kann man /* Navigation bzw. a.Navi nicht finden.:/

  6. Zimtschnute

    9. May 2012 at 12:28

    Bei mir klappt es nicht… kann es sein, das das nicht für jede Designvorlage geht? Ich wüsste auch gar nicht, wie ich die Seiten manuell verknüpfen sollte – dieses Feld kommt bei mir gar nicht…

  7. Anonym

    9. May 2012 at 12:38

    @ Zimtschnute:
    Du musst einfach die neue Vorlage deaktivieren:))
    Ich werde nochmal schauen,was an dem Tut falsch ist!

  8. Zimtschnute

    9. May 2012 at 12:53

    Sorry – aber vielleicht steh ich gerade auf´n Schlauch… Du meinst die Blogger-Oberfläche? Selbst wenn ich auf die alte zurückgreife, sehe ich das Fenster nicht, wenn ich ein HTML-Gagdet hinzufüge…

    Ist jetzt nicht schlimm… wenn es bei mir nicht geht… runde Button sind jetzt nicht lebensnotwendig – wurmt mich aber dennoch *g*.
    Ich schaue heute Abend nochmal rein – vielleicht meldet sich jemand, bei dem es auf Anhieb geklappt hat… ♥

  9. Marie

    9. May 2012 at 17:42

    wollte's ausprobieren, aber bei mir gab's kein Navigation 😮

    http://musik-literatur-leben.blogspot.de/

  10. Anonym

    9. May 2012 at 20:14

    @all: Dieses a.Navi müsst ihr erst coden, dann klappt es. Ihr habt es in euren Code nicht drin.

  11. Anonym

    9. May 2012 at 20:30

    Tut mir leid,hatte ich total vergessen!
    Danke,Tenzi

  12. SelMama

    10. May 2012 at 10:01

    ok, wie "code" ich? Ich finde Navigation nämlich auch nicht…
    Aber dieses runde Menü finde ich toll und wills unbedingt auch haben!

    LG
    SelMama

  13. SelMama

    10. May 2012 at 10:13

    Das steht bei mir unter skin, ich trau mich gar nicht, was zu verändern.
    Was soll ich hier wo einfügen?

    Danke schonmal 😉

    <![CDATA[/*
    ———————————————–
    Blogger Template Style
    Name: Simple
    Designer: Josh Peterson
    URL: http://www.noaesthetic.com
    ———————————————– */

  14. CACANITO©

    10. May 2012 at 12:21

    wie kann ich eigentlich ich versuchsmal zu erklären in eine Zeile 2 oder 3 Listen einfügen???

    Ich hätte gerne das Menü nicht nebeneinander sondern untereinander?

  15. Anonym

    10. May 2012 at 12:56

    @ SelMa:
    Über Outer-Wrapper gibst du das ein:

    /* NAVBAR */
    #navbar {
    display: none;
    visibility: hidden;
    }

    /* Navigation
    ———————————————– */
    a.navi {
    font-family: Georgia;
    font-style:italic;
    background-color: #F7F1EC;
    color: #00000;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    line-height:-5px;
    font-size: 10px;
    text-align: center;
    margin-bottom: 7px;
    text-transform:none;
    -webkit-border-radius: 6pt;
    -moz-border-radius: 6pt;
    }

    Dann klappts!
    @Cacanito:

    Du kannst entweder gaaaanz viele Html-Gadget hizufügen und immer eins dort reinkopieren oder du änderst etwas an dem Code,ich schaue mal,was genau!

    1. CACANITO©

      15. May 2012 at 12:19

      danke für die Antwort ich hab jetzt verstanden wie man das Menü als liste einbaut aber ich würde gerne noch ein paar gadgets einbauen so das ich 2-3 Listen nebeneinander habe was muss ich dafür machen?

  16. SelMama

    10. May 2012 at 13:58

    Liebe Lina,

    Outer-Wrapper habe ich leider auch nicht.
    Sorry, ich nerv mit meiner Fragerei, aber gut dass es Profis wie dich gibt ;-))

    LG
    SelMama

  17. Anonym

    10. May 2012 at 14:31

    Wie kann ich denn einen Blog mit den alten Vorlagen machen? Viele sagen damit geht alles etwas leichter. KAnn mir jemand helfen (Mira?)
    Danke im Vorraus;'*

  18. Anonym

    10. May 2012 at 18:41

    @ SelMama:
    Hast du body { ?
    Dann mach es mal da drunter!
    @ Anonym:
    Wenn du z.B. auf Layout gehst,siehst du da so eine "Schraube" da musst du draufklicken und dann auf "bisherige Blogvorlage" klicken.

    1. Anonym

      11. May 2012 at 15:11

      dankedankedanke;'*

    2. shishiwaii

      19. May 2012 at 21:59

      Finde ich, aber um ehrlich zu sein, funktioniert das ganz und gar nicht, wenn ich es eingebe.
      Dann will Blogger das ganze HTML noch nicht Mal annehmen.

  19. Anonym

    11. May 2012 at 18:00

    liebe Lina!
    erstmal: super tut! aber: bei mir werden die ecken leider nicht rund, egal was ich vor pt eingebe…hast du ne ahnung woran das liegen könnte?? 🙁
    dankeschonmal im vorraus 🙂

    1. Anonym

      12. May 2012 at 11:58

      Ich kümmere mich mal drum:))

  20. Anonym

    12. May 2012 at 10:06

    Schon Scheiße, wenn dieses Menü jemand ganz anderes Erstellt hat und es dann als eigenes verkauft. OMG, wie Arm!

  21. Anonym

    12. May 2012 at 11:56

    @ Anonym: & wer soll das gewesen sein?;D

    1. Anonym

      12. May 2012 at 11:59

      Und sich als Anonym auszugeben,das ist nicht arm oder wie?;D
      Solltest du dir mal durchlesen?!: http://liina-blog.blogspot.de/2012/05/nervige-kommentareklappe-die-2.html

  22. Rebecca-Desireé

    12. May 2012 at 13:40

    Ich bleib schon beim ersten Teil stecken..warum gibt es bei mir keine /* Navigation bzw. a.Navi ?

  23. Anonym

    12. May 2012 at 15:43

    @ Rebecca-Desireé:
    Steht oben im Kommentar:))

  24. SelMama

    12. May 2012 at 18:33

    Bei mir klappt das leider ganz und gar nicht :-((

  25. Anonym

    15. May 2012 at 11:02

    Danke <3
    Hat super geklappt:)

  26. L.

    15. May 2012 at 17:05

    mit welchen Vorlagen-Basics kann man das denn am besten machen?
    welche Vorlage benutzt du zB bei deinem Blog?

    1. Anonym

      15. May 2012 at 18:10

      Ich habe ein gecodetes Layout,keine Vorlage!
      Bis jetzt habe ich noch kein Problem gefunden,ich schaue aber weiter!

  27. -Dana-

    28. May 2012 at 14:14

    Lina?
    Also ,erstmal Danke für die Arbeit .
    Nur,ich habe soweit alles hin bekommen ,aber dass Menue willnicht rund werden …

    Weisst du was ich machen kann ?

  28. Jen !

    29. May 2012 at 17:25

    Kann mir wohl einer sagen, wie man die Seite vorher manuell verknüpfen kann, ich komme da leider nicht weiter :/
    Wäre echt lieb(: &' danke schonmal im Vorraus !

  29. Nici

    2. June 2012 at 17:03

    Wenn ich das mache, sind die links untereinander und ich möchte sie gerne nebeneinander haben. Wäre lieb wenn mir jemand antwortet, am besten direkt als Kommentar auf meinem Blog! 🙂
    http://schokoschnitte.blogspot.de/

  30. Anonym

    13. June 2012 at 10:54

    @ ALL:

    Einfach das unter #footer einfügen:

    a.navi {
    font-family: Dawning of a New Day;
    font-style:Dawning of a New Day;
    background-color: #f5f5f5;
    color: #00000;
    padding: 2px;
    padding-left: 8px;
    padding-right: 8px;
    line-height:-5px;
    font-size: 15px;
    text-align: center;
    margin-bottom: 7px;
    text-transform:none;
    -webkit-border-radius: 3pt;
    -moz-border-radius: 3pt;
    }

    1. me.

      1. October 2012 at 17:48

      geht auch einfach unter boy oder so.
      hat dann zwar auch erst nicht bei mir funktioniert hab dann einfach das -webkit und -moz weggemacht und es ging 🙂

  31. E D▲

    9. July 2012 at 21:50

    es klappt leider nichts von obwohl ich es so gern hätte

  32. Kates World

    16. August 2012 at 12:25

    Ich finde keinen footer 🙁

  33. Lisa

    9. September 2012 at 17:42

    Wie kann ich die Farbe von den Buttons ändern? 🙂

  34. Darling. ♥

    20. September 2012 at 16:48

    Bei mir gibt es kein #footer. Was nun?

    1. Darling. ♥

      20. September 2012 at 16:49

      Und Outer-Wrapper existiert auch nicht in meiner HTML-Vorlage.

      Bitte alles richtig stellen oder Screenshots veröffentlichen!

    2. me.

      1. October 2012 at 17:50

      geht auch wenn du es unter einfach body machst. hatte beides auch nicht ging dann aber nachdem ich noch das -webkit und -moz weggemacht hab 🙂

  35. Ines Caranaubahx

    2. October 2012 at 21:42

    bei mir wird garkein #footer gefunden o.O also footer schon, aber nur ohne dem # …

    1. Mira Ho

      2. October 2012 at 21:51

      dann füg es über ]]>

      ein 🙂

  36. Anonym

    28. October 2012 at 11:27

    Hab alles so gemacht ,wie es da stand. Aber es funktioniert nicht. 🙁

  37. vanessa

    2. November 2012 at 14:09

    ich finde seitenelemnte nicht 😀
    wo steht das?

  38. Laura Andre

    7. January 2013 at 17:03

    Bei mir werden die Ecken nicht rund…

  39. xuscha

    28. January 2013 at 17:30

    Vielen Dank für die hilfe 🙂
    Es klappt alles nun bei mir! Aber kann mir einer sagen wie ich es schaffe den Abstand zwischen den Elementen zu vergrößern und die Elemente an sich auch?

    🙂

    1. xuscha

      28. January 2013 at 17:32

      Hat sich erledigt, aber danke 🙂

    2. xuscha

      28. January 2013 at 17:38

      zumindest die sache mit der größe, aber NICHT dem abstand 🙁

  40. Lena

    27. May 2013 at 14:52

    Ich finde #footer nicht. Ohne # finde ich es, aber da gibt es total viele.

Leave a Reply