Menü gestalten (schlichtes Menü/Sidebarmenü) [Tutorial]

27. Februar 2013 | 83 Kommentare

Hallo Leute!

Heute zeige ich euch mal, wie ich meine zwei Menüs gestaltet und gestylt habe. Vielleicht interessiert den ein oder anderen ja besonders das Menü in der Sidebar :) Und nein, das Grundgerüst dazu habe ich nicht selbst gebastelt - die Quellen werde ich natürlich verlinken!






Früher habe ich das "normale" Menü benutzt, das mit den Seitentabs von Blogger. Weil ich aber gerne selbst am Design herumexperimentiere, wurde mir das schnell zu langweilig und ich habe nach einem neuen gesucht - und hab eines auf CPL gefunden.

<center>
<div style="font-family: 'Handlee', cursive;  font-size:155%; margin-top:12px;">
<a href="http://pusteblumeasdf.blogspot.co.at/p/rezensionen.html">Rezensionen</a> |
<a href="http://pusteblumeasdf.blogspot.co.at/p/favourites.html">Favourites</a> |
<a href="http://pusteblumeasdf.blogspot.co.at/p/monatsstatistiken.html">Monatsstatistiken</a> |
<a href="http://pusteblumeasdf.blogspot.co.at/p/about.html">Hinter dem Blog</a>
</div>
</center>


<center>: Menü wird mittig angezeigt

font-family: Schriftart -ntweder 1) nehmt ihr eine der Standardschriftarten, die euch Blogger zur Verfügung stellt (Trebuchet, Verdana etc.) oder 2) ihr nehmt dieselbe Schriftart, die ihr für die Postüberschriften nehmt. Seht euch dazu auf jeden Fall ein Tutorial an, wie man Schriften von Google Webfonts einbindet.
font-size: Schriftgröße - einfach die Prozentzahl größer oder kleiner machen, bis es passt
margin-top: bestimmt, dass das Menü nicht am Header "klebt". Sprich, wenn man 0px einsetzt, ist die Schrift wirklich ganz nah am Header dran und das sieht einfach nicht wirklich schön aus. Einfach wieder die Zahl vergrößern oder verkleinern, bis es passt.
Diese Teile bestimmen, zu welcher Seite der Link führen soll und
diese Teile bestimmen, welcher Text dafür angezeigt werden soll.
Das sind einfach Platzhalter zwischen den Links. Man kann dafür auch andere Zeichen/Symbole einsetzen.

spoilerparadies.blogspot.de
So könnte es danach aussehen. Wenn man mit der Maus drüberfährt, werden die Felder hellgrau.
Das Gerüst stammt von care about what?, und ich erkläre euch hier nochmal, was die einzelnen Abschnitte bedeuten, damit man es selbst anpassen kann. Wäre ja doof, wenn alle Menüs gleich aussehen. 
Ich kann nicht garantieren, dass dieses Menü bei allen Vorlagen funktionieren wird. Im Grunde genommen sollte es schon, aber ich habe mich grün und blau geärgert, als ich es mit meiner früheren Vorlage einfach nicht geschafft habe. Also bitte nicht enttäuscht sein.

Ihr geht in eurem Dashboard auf Vorlage → Anpassen → Erweitert → CSS hinzufügen, kopiert diesen Code rein und speichert. 
/* Sidebar Menü
----------------------------------------------- */
a.navi {
 margin-bottom: 1.5px;
 display: block;
 border-bottom: 1px solid #ddd;
 font-family: sans-serif;
 font-size: 11.5px;
 color: #999;
 background-color: #fafafa;
 text-align: center;
 line-height: 17px;
-webkit-transition-duration:.4s; -moz-transition-duration:.4s;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
opacity:1;
}
a.navi:hover {
 margin-bottom: 1.5px;
 display: block;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
 border-bottom: 1px solid #ddd;
opacity:1;
 font-family: sans-serif;
 font-size: 11.5px;
 color: #b0b0b0;
 background:url(http://i48.tinypic.com/34nf78n.jpg) #f5f5f5;
-webkit-transition-duration:.4s; -moz-transition-duration:.4s;
 text-align: center;
 line-height: 17px;
}


a.navi und a.navi:hover sind die zwei Hauptbestimmungsteile. Der erste für den Link, wenn man gar nichts macht und das zweite mit dem Hover (wie der Name schon sagt) bestimmt, wie es aussehen soll wenn man mit der Maus drüberfährt.
margin-bottom ist dafür zuständig, wie weit die verschiedenen Linkboxen auseinander sein sollen. Vergrößert man die Zahl, wird der Abstand größer. Achtet darauf, dass margin beide Male, wo es vorkommt, denselben Wert hat, um hässliche Verschiebungen zu vermeiden!
border-bottom ist die Linie am unteren Rand eines jeden Kästchens. Man bemerkt sie kaum, aber es sieht optisch ein wenig besser aus. Die px ist die Dicke der Linie. Solid (durchgezogen) könnt ihr durch dottet (gepunktet) oder dashed (gestrichelt) ersetzen. Die Kombination danach ist die Farbe.
font-family bestimmt die Schriftart, näher habe ich das schon beim schlichten Menü erklärt.
font-size bestimmt die Größe. Mit größerer Zahl wird die Schrift größer, Kommazahlen trennt man mit einem Punkt.
color bestimmt die Schriftfarbe, eine Auswahl findet ihr hier oder bei colourpicker.com.
background-color bzw background bestimmt die Hintergrundfarbe. Ich habe beim Hover als Hintergrund ein Bild genommen, falls ihr ein anderes Bild haben wollt, schneidet ihr es am besten zu, ladet es irgendwo hoch und fügt dann die URL statt dieser ein. Wollt ihr eine normale Hintergrundfarbe, könnt ihr den Part mit der URL einfach löschen.
text-align bestimmt die Textausrichtung. center = mittig; right = rechts; left = links.
line-height bestimmt die Höhe des Linkkästchens. Vergrößert man die Zahl, wird das Kästchen größer.
4s bestimmt die Sekunden, die der Menü braucht, um von Linkschriftfarbe zu Hoverschriftfarbe und Linkhintergrund zu Hoverhintergrund zu wechseln. Vergrößert man die Zahl, geschieht der Vorgang langsamer.
Diese Teile bestimmen, wie abgerundet die Ecken sein sollen.


Die einzelnen Teile des Codes sind jetzt klar, oder? Falls noch etwas unklar ist, könnt ihr fragen, oder einfach selbst ausprobieren (vorher abspeichern nicht vergessen!). Wenn ihr diesen Code gespeichert habt, ist der Grundstein für das Menü gelegt. 

Nun geht ihr auf euer Layout und fügt ein neues HTML/Javascript-Gadget hinzu. Dort fügt ihr folgendes ein:

<div id="navi">
<a class="navi" href="LINK ZUR SEITE">ANZUZEIGENDER TEXT</a>
<a class="navi" href="LINK ZUR SEITE">ANZUZEIGENDER TEXT</a>
<a class="navi" href="LINK ZUR SEITE">ANZUZEIGENDER TEXT</a>
<a class="navi" href="LINK ZUR SEITE">ANZUZEIGENDER TEXT</a>
<a class="navi" href="LINK ZUR SEITE">ANZUZEIGENDER TEXT</a>
<a class="navi" href="LINK ZUR SEITE">ANZUZEIGENDER TEXT</a>
</div>

Das war's. Speichern und staunen. Nochmal, ich kann nicht garantieren, dass es bei allen Vorlagen funktionieren wird! Bei der Simple Vorlage und Minima Vorlage klappt es.

Vielleicht haben ja ein paar von euch was dazugelernt. Über eine Reaktion freue ich mich :)



83 Kommentare

  1. Hey Sandra,

    ich freue mich immer, wenn es wieder ein neues Tutorial von dir gibt und dieses hier ist auch wieder sehr gelungen! Total klasse, wie viel Mühe du dir immer gibts die einzelnen Bestandteile der Codes zu erklären. Bloggestaltung für Dummies sozusagen. :D

    Ich denke schon länger darüber nach mein "Menü" ein wenig zu verändern und werde deine Tipps die Tage mal nutzen, um ein wenig zu basteln.
    Vielen Dank dafür!

    Liebste Grüße
    Tin

    AntwortenLöschen
    Antworten
    1. Hallo Tin,

      Ach, das freut mich! :D Ich bemühe mich immer die einzelnen Teile zu beschreiben, weil ich es mir vor ein paar Monaten auch gewünscht hätte. So habe ich es eben selbst erkundet, hat auch Spaß gemacht und nicht zwingend geschadet :P Aber ist eben geschickt, wenn man eine Vorstellung schon im Vornherein weiß.

      Grade bei dir würde ein individuelles Menü TOTAL toll aussehen! Hab's grade nochmal begutachtet und bin völlig hin und weg, was man bei diesen tollen Designfarben alles anstellen kann! :D

      Alles Liebe!
      Sandra

      Löschen
  2. Voll toll! Danke:):)

    Ich werd auf jeden fall mal herumprobieren.
    Ich fand es auch schon immer schade das man beim Menü nicht so viel verändern konnte!

    Schöne Grüße
    Mara

    AntwortenLöschen
    Antworten
    1. Gerne :)

      Beim "herkömmlichen" Menü, das von Blogspot selbst angeboten wird, kann man wirklich lächerlich wenig ändern. Aber wenn man sich manuell auseindersetzt, kann man eigentlich ziemlich viel rausholen :)

      Alles Liebe!

      Löschen
  3. Super TOLL gemacht ;) THXX <3 Fühl dich umarmt und ja wir werden es versuchen jetzt umzubauen ... Liebe Grüßchen

    AntwortenLöschen
    Antworten
    1. Danke sehr :))
      Würde bei eurem Blog hammer aussehen! Viel Glück!

      Alles Liebe ;)

      Löschen
    2. So das Sidebar Menü ist nun auf unseren Blog.
      NOCHMAL TAUSEND DANK! Ein echt super Tutorial!
      Alles Liebe Niz

      Löschen
  4. Ich finde auch, dass du's vollkommen verständlich gemacht hast! :) Supi! :D Aber du gibst dir immer so viel Mühe - also kein Wunder! :D

    Ich überlege, das Sidebarmenü einzubauen, und so meine Buttons zu den Challenges zu ersetzen. Na ja, ich muss bei Jadas Challenge noch einiges nachbringen und die Zeit rennt xD Also doch keine gute Idee, das bei mir einzubauen haha, für lediglich eine Seite? Ich habe nämlich alles über dem Header... Hm, trotzdem, falls sich mein Design mal ändern sollte, werde ich das hier vielleicht benützen. Ich find's sehr übersichtlich und deshalb praktisch für die Leser :D

    AntwortenLöschen
    Antworten
    1. Dankeschön Elle! :) Man tut was man kann, hm? :D

      Das würde sicher total schön aussehen, mit dem Blau und Weiß und so ... :p Kannst dir das ja mal bei Mara anschauen, die hat das jetzt auch so, aber ein bisschen abgeändert. Sieht echt gut aus.
      Wenn das aber dann alles über dem Header weg wäre, wäre das schon doof :o Dann vielleicht doch erst, wenn du dein Design änderst xD

      Löschen
  5. Kannst auch erklären, wie man ein Aufklappbares Menü macht? Also wenn man mit der Maus über einen Menüpunkt fährt und dann weitere erscheinen?

    AntwortenLöschen
    Antworten
    1. Meinst du ein "normales" Dropdownmenü, oder so eines, wie es die Leute von It's Time to steal Ideas haben? Ist jetzt nicht gerade mein Spezialgebiet, aber auf CPL gibt es echt verständliche Tutorials dafür.

      Löschen
    2. Ja genau, so ein Dropdownmenü. Aber sonst guck ich selbst mal nach... (du erklärst es nur immer so schön ;o))

      Löschen
    3. Ach, danke :) Wenn du Hilfe brauchst, kann ich mich auch nochmal damit auseinandersetzen.

      Löschen
  6. Ich mag deine Tutorials *_*
    So schön bunt ^^.
    Ich habe grad keine Zeit, mich ausführlich damit zu beschäftigen, aber wie du weißt arbeite ich ja immer noch an meinem Menü und vielleicht schaffe ich mir ja auch lieber so eins an - jenachdem wovon ich das HTML-Zeugs besser verstehe ^^.

    Auf jeden Fall schon mal Danke für das Tutorial ^^

    LG <3
    Charlie

    AntwortenLöschen
    Antworten
    1. Dankeschön Charlie hihi :D
      Wenn man die Funktion der Begriffe kennt, ist es gar nicht so schwer. Wenn du mal Zeit hast, ist das echt eine neue Erfahrung, das alles auszuprobieren xD Ich hab grade auch kaaaum Zeit, schreibe noch immer an der Zusammenfassung von Die Verratenen (mein Gott, das dauert lang) und komme noch weniger zum Lesen. Da fragt man sich schon, wie das die Blogger schaffen, die 17 Bücher in einem normalen Arbeitsmonat lesen ^^

      Alles Liebe!
      <3

      Löschen
    2. Vielleicht mal in den Ferien ^^.

      Hihi, ich schreibe meine Zusammenfassungen schon beim Lesen und bessere sie dann später aus. Irgendwie funktioniert das ^^.

      17 Bücher O_O? Krass, das würde ich nie hinbekommen :D.

      LG <3

      Löschen
  7. Muss ich da einen Post erstellen und den dann verlinken? Würde der dann nicht auch im Blog erscheinen?

    Würde mich über eine Antwort freuen^^

    LG Sandra

    AntwortenLöschen
    Antworten
    1. Wofür müsstest du einen Post erstellen? Der erste Teil des Tutorials bezieht sich auf den HTML-Quellcode und der zweite auf ein Javascript-Gadget :) Oder meinst du, wir man die Links zu den Seiten einfügen soll?

      Löschen
    2. Ja, genau das meinte ich. Die Home-Seite konnte ich ohne Probleme verlinken, aber die anderen weiss ich nicht so genau wie.
      Wenn ich bei mir jetzt z.b. auf Kontakt klicke, kommt dann die Meldung: Die Seite ist nicht vorhanden.

      Ich hoffe, du verstehst was ich meine :) Bin nicht so ein Profi in dem Gebiet xD

      LG

      Löschen
    3. Wenn du in deinem Dashboard auf "Seiten" gehst, hast du alle deine Seiten aufgelistet. Wenn du dort auf "Ansicht" klickst, kommst du direkt zu der gewünschten Seite und kannst den Link einfach reinkopieren.
      Beim Kontakt ist zB der Fehler dass es so aussieht: http://silkycloud.blogspot.ch/2013/03/kontakt.html, aber weil der Kontakt eine Seite ist, und kein Post, muss es so aussehen: http://silkycloud.blogspot.ch/p/kontakt.html
      Wenn du den Link eingibst, kommst du zu einer Seite, wo "test" steht :) Seiten haben immer dieses /p/ für page in der URL. Hoffe, das war nicht zu kompliziert erklärt! :D

      Alles Liebe!

      Löschen
    4. Yesss!! Ich habs geschafft :D Vielen vielen lieben Dank! :D

      Löschen
  8. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  9. Hallo :)
    Ich habe Dir eben einen Award verliehen.
    http://nico-wallmann.blogspot.de/2013/03/award-meine-nominierungen.html

    LG
    Nico W.

    AntwortenLöschen
  10. Huhu,
    du hast hier ein wirklich tolles Tutorial erstellt!
    Ich hab es grad versucht in meinen Blog einzubauen, aber ich scheitere beim Menü unter dem Header.
    Ich habe versucht, die Schrift größer zu machen, aber es tut sich leider gar nichts.
    Gibt es da einen Trick, was ich machen kann? Oder weist du, woran das liegt?
    Liebe Grüße
    Quietschie

    AntwortenLöschen
    Antworten
    1. Hey Quietschie :)

      Soweit ich sehen kann hast du diese Zeile hier:
      <div style="font-family: 'Handlee', cursive;"  font-size: 200% ; margin-top:12px;">

      Damit sich die Größe ändert müsste die Zeile so aussehen:
      <div style="font-family: 'Handlee', cursive; font-size: 160% ; margin-top:12px;">

      Du hattest bloß was vor der Größendefinition. Ich hoffe, es funktioniert jetzt :)
      Alles Liebe,
      Sandra

      Löschen
  11. Hey :) Ich habe mal den Teil für das Sidebarmenü versucht und habe jetzt ein kleines Problem...Bei mir wird, wenn ich alles gespeichert habe, nicht das Menü angezeigt, sondern nur die Links in einer Reihe :( Also quasi "Home. Bücherecke. Fotowand. Impressum." und wenn ich auf die einzelnen Wörter klicke komme ich halt auf die Seite, aber von dem Menü an sich ist keine Spur :(
    Weißt du woran das liegen kann?
    Alles Liebe, Nancy x
    Ps: Ich habe die Minima Vorlage :)

    AntwortenLöschen
    Antworten
    1. Ich hab es irgendwie hinbekommen :D Ich hab zwar keine Ahnung wie, aber es klappt jetzt auf einmal :o
      Also danke für das tolle Tutorial :) x

      Löschen
    2. Ich hab eine Frage: Wie kann man Seiten erstellen die dann eben in nur in der Sidebar beim Menü auftauchen aber nicht oben? :)
      Vielen Dank schon im Vorraus und natürlich für dieses tolle Tutorial (;

      Löschen
    3. @Nancy: Ja, ich weiß was du meinst. Das ist mir auch schon ein paarmal passiert, ich könnte dir jetzt aber auch nicht genau sagen woran das liegt. Vielleicht war der Style-Container irgendwie beschädigt oder Blogger hat ein bisschen rumgemeckert; bei Minima kenne ich mich generell nicht sooo gut aus, hat ein paar Eigenarten, das Template :D Schaut echt schön aus!

      @Jasi: Ich weiß grad nicht genau was du meinst :D Beide Menüs, das obere sowie das seitliche sind manuelle Menüs, heißt man muss sie selbst basteln und einfügen. Wenn du bei blogger.com auf den Menüpunkt Seiten gehst (also da, wo du auch neue erstellen kannst etc) sollte das "Seiten anzeigen als" auf "nicht anzeigen" festgelegt sein. Wenn du die als Top-Tabs nimmst, dann ist das so eine automatische Seitenleiste von Blogger - also wenn du eine neue Seite hinzufügst ist sie sofort in der Leiste drin ohne dass du was machen musst.

      Weiß jetzt nicht, ob ich dir das ein bisschen beantwortet habe :D Aber deine beiden Menüs sehen eigentlich so aus, als wärst du erfolgreich gewesen.

      Löschen
  12. Tolles Tutorioal, hat super geklappt...nun stehe ich aber vor dem Problem: Wie "befülle" ich meine Sidebar? Also wie kann ich Posts da einfügen? Sicherlich eine total dämliche Frage und du schüttelst sicher den Kopf bei so viel Unwissen...aber ich habe echt keine Ahnung =D

    AntwortenLöschen
    Antworten
    1. Da hab ich ja einen Kommentar übersehen :o Meinst du das Menü oder das Sidebar-Menü? Für gewöhnlich verlinkt man da Seiten wie die Wunschliste, SuB, Rezensionen, was auch immer ... Solche Seiten erstellst du in deinem Dashboard, da ist irgendwo ein Unterpunkt "Seiten". Wenn du dir da eine Seite erstellst und diese Seite aufrufst, lautet die URL dieser Seite wahrscheinlich so ähnlich: www.blogname.blogspot.de/p/seitenname.html

      Wenn du die Seite in dem Menü verlinken willst, kopierst du die URL der Seite. Ein Link gehört immer an die Stelle mit ... href="www.blogname.blogspot.de/p/seitenname.html" ...

      Vielleicht konnte ich dir ein bisschen helfen. Frag ruhig nochmal nach :)

      Löschen
  13. Liebe Sandra
    Das ist ja echt wunderhübsch und so toll verständlich! Das liebe ich, vorallem weil ich eine totale Dummie in diesem Gebiet bin, und so auch noch eine Frage habe,
    Ich schaffe es nicht, das Menu (nicht das Side-Bar-Menü, sondern das normale, schlichte) ganz nach oben hin zu verlegen, das heisst, ich weiss nicht, wo in meinem HTML-Text sich das befindet... Kannst du mir da vielleicht helfen?
    Ansonsten wunderbarer Blog, werden ganz bestimmte regelmässige Leserinnen! ;D

    Alles, alles Liebe,
    Mara ♥

    AntwortenLöschen
    Antworten
    1. Vielen Dank :) ... Willst du das Menü ganz über den Header oder einfach nur näher dran?

      Löschen
    2. bitteschön :D Hab dir übrigens noch ein Mail geschrieben ^^ ;D
      Upps, ehrlich gesagt ist mir das nun ziemlich peinlich, aber ich habe nun alles, es hat geklappt! Danke für die tolle Anleitung! ;D

      Löschen
    3. Okay, dann hat sich das erübrigt :) Hab dir schon geantwortet, dauert in letzter Zeit leider ein bissl länger bei mir weil mein Handy nicht geht und ich nicht sehr oft am Laptop bin.

      Löschen
  14. vielen vielen dank :) ich habe es ewig lange gesucht und du bist die einige die mir weiter helfen konnte

    AntwortenLöschen
  15. Wow, Du bist echt fantastisch! =D Experimentiere gerade mit dem schlichten Menü.^^ Kann ich da auch einen Hover Effekt und Hintergrund rein basteln? Würde mich freuen, wenn Du mir sagen könntest ob und wie? ;-)

    Ganz liebe Grüße
    Katie

    AntwortenLöschen
    Antworten
    1. Na sicher geht das, alles geht, wenn man will! Also ich hätte das jetzt so gemacht: http://oi40.tinypic.com/de5vsi.jpg

      Es schaut natürlich nicht sehr toll aus weil ich das auf meinem Testblog gemacht habe und die Schriftart/farbe/blabla, aber theoretisch kann man schon mal einen Hintergrund reinmachen - falls du das meinst ^^ Dafür hab ich einfach das hier gemacht: <div style="font-family: 'Handlee', cursive; font-size:155%; margin-top:12px; background-image: url('http://i39.tinypic.com/2duypgg.jpg')">

      Die Adresse mit tinypic ist einfach die URL von dem Bild, ich lade das immer dort hoch damit ich den Speicher von meinem Blog nicht belaste. Und beim Hover kommt es drauf an - meinst, dass die Schrift dann so 'fadet'? Kannst du hier ansehen: http://care-about-what.blogspot.de/2012/09/fadehover.html

      Vielleicht konnte ich dir ja wenigstens ein bissel helfen ... ;)

      Schönen Nikolaus und alles Liebe,
      Sandra

      Löschen
    2. Oh ja, ich werde mal ein bissel rumprobieren =) Dankeschön für Deine große Mühe ♥ Bin die letzten Wochen nicht dazu gekommen =D

      Grüßle

      Löschen
    3. Genau so hatte ich mir das gedacht =) Jetzt muss ich nur ein anderes Bild finden ;-)

      Löschen
  16. Hallo Sandra :)

    Ich finde das Tutorial toll.. aber ich weiß einfach nicht wo ich den Code für das Schlichte Menü einfügen soll :(

    AntwortenLöschen
  17. Erstmal vielen Dank für das Tutorial eines der wenigen die mich denken lassen, es könnte auch bei mir funktionieren.

    Trotzdem stehe ich kurz vor dem absoluten Verzweifeln, seit 3 Tagen suche ich mir nun schon einen Wolf, denn irgendwie fehlt mir ein Stück um das alles zu verstehen.
    Ich habe bisher eine Seite und zwar mein Impressum. Labels habe ich nur eines und zwar Rezensionen....nur wie weiter???

    Ich möchte gerne einen Menüreiter für die Startseite, für meinen SuB oder über mich usw. aber ich habe dazu noch keine Posts oder Seiten erstellt, daher meine Frage wie bekomme ich überhaupt einen Link zum einfügen für das Menü? Ich stell mich vielleicht gerade unglaublich dumm an aber mir ist nicht klar ob ich je eine neue Seite erstellen muss um überhaupt einen Link für das Menü einfügen zu können oder was auch immer. Ich hoffe ich schreibe nicht so verwirrend wie ich mich an"lese" und noch mehr hoffe ich das du mir helfen kannst. Ich wäre dir jedenfalls sehr dankbar.
    liebe Grüße

    AntwortenLöschen
    Antworten
    1. Für Rezensionen (als Übersicht), Über mich, etc ... ist es am praktischsten eine Seite zu erstellen, ja! :) Ich nehme an, so hast du dein Impressum auch erstellt, oder?
      Sobald du deine Seite erstellt hast (kann man später natürlich noch bearbeiten) kannst du auf "Ansicht" (oder so ähnlich) klicken und da hast du dann gleich die URL/den Link, den du dann im Menü einbinden kannst.

      Am Handy kann ich dir nicht so gut helfen, aber ich dachte eine schnelle Antwort wär vorerst besser als eine sehr detailreiche :)

      Löschen
    2. Ganz lieben Dank es hat mittlerweile sehr gut geklappt. Ein hoch auf dein Tutorium ^^

      Löschen
  18. Danke für das coole Tutorial, endlich mal jemand der das idiotensicher erklärt :)
    Ich hab nur noch eine Frage, und zwar geht das, dass ich die Sidebar auch breiter machen kann? Du kannst dir das auf meinem Blog ja mal anschauen, das ganze passt igrendwie nicht so zum Header.
    Liebste Grüße, Elli
    http://justadreamyday.blogspot.com

    AntwortenLöschen
    Antworten
    1. Danke :)
      So kannst du die Breite von deiner Sidebar vergrößern oder verkleinern: http://care-about-what.blogspot.co.at/2013/02/dein-bloggerlayout-part-1-die-grundlagen.html
      Falls dein Header auch wirklich ein Header-Gadget ist, ist die Anpassung ebenfalls unter #header-wrapper erklärt :) Wenn es nur ein Bild ist, kannst du die Größe ganz leicht mit height und width anpassen.

      Löschen
  19. Danke für das Tutorial !! :-)
    Hat bei mir echt super geklappt :-) VIEEEELEN DANK ♥
    Ich hab so ein Tutorial lange gesucht und endlich gefunden !!

    AntwortenLöschen
    Antworten
    1. Vielen Dank! Ich freu mich sehr, dass meine Posts ihren Sinn erfüllen!

      Löschen
  20. Deine Erklärung war sehr schön und ich hab's auch geschafft:-)
    Noch eine Frage: Also ich erstelle grad einen Auslandsjahrblog und habe einen Post veröffentlicht mit Infos über mich und einer meiner erstellten Menüpunkte ist halt About Me und ich würde den Post gern auch auf der Seite haben, wie krieg ich das dann hin, dass der da auch angezeigt wird?

    AntwortenLöschen
    Antworten
    1. Hey Alicia,
      danke! Ich bin mir grad nicht so sicher was du meinst, weil unter "About me" derselbe Text steht wie im "Welcome"-Post. Wenn du willst, dass der Post (vom 31. August) aufgerufen wird, wenn man auf "About me" klickt, fügs einfach so ein:

      <a class="navi" href="http://alice-in-canada-2015.blogspot.de/2014/08/normal-0-21-false-false-false-de-x-none.html">About me</a>

      Löschen
    2. Ja ich hatte den gleichen Text dann nochmal auf der Seite gepostet damit er da schonmal steht aber es war eben noch nicht mit dem Label verlinkt. Danke, ich probier's gleich aus:-)

      Löschen
  21. Ich würde eigentlich nur gerne die Schriftgrösse im Menü oben ändern aber finde das nicht =(

    LG

    AntwortenLöschen
    Antworten
    1. Die Schriftgröße wird hier immer mit font-size bestimmt (entweder Pixel- oder Prozentangaben). Das normale Seitengadget von Blogger nutze ich schon lange nicht mehr, sollte aber im Vorlagendesigner anzupassen sein!

      Löschen
  22. Ich weiß nicht ob du hier noch antwortest da es schon ganz schön her ist, aber ich komm einfach nicht klar ich möchte das einfach alles größer haben, es ist alles so klein für meinen Geschmack dann ändere ich bei font-size eben die Zahl und es bleibt trotzdem so und das ist überall so, ich kann verändern was ich will es bleibt immer gleich total merkwürdig oO
    Ob du ne Ahnung hast was da los ist .. ^^'

    AntwortenLöschen
    Antworten
    1. Klaro, ich bekomme bei jedem Kommentar eine Mail :)
      Hast du vielleicht unabsichtlich etwas weggelöscht (; zB)? Ansonsten kannst du statt % auch px versuchen. Was ich auch gerne mache wenn nichts funktioniert haha, ist "!important" zu verwenden, dann sollte es mehr bberücksichtigt werden bzw andere Befehle überschreiben. So sieht das dann aus:

      ... font-size: 30px !important; ...

      Löschen
  23. Ach krass jetzt mit dem !important klappt es wirklich! Dankeschön :D

    AntwortenLöschen
    Antworten
    1. Ups sollte eigentlich eine Antwort sein naja egal, habe trotzdem noch eine Frage kann man das eigentlich auch noch länger machen, also eher in die Breite ziehen? Hoffe die Frage ist nicht so doof :D

      Löschen
    2. Das würde ich ganz unelegant mit Leerzeichen machen, oder lauter ___ und diese dann transparent einfärben (<span style="color: transparent;">_____</span>). Da merkt man wieder, Profi bin ich keiner :D

      Löschen
  24. Hi :)
    Ich kenne mich leider damit noch gar nicht aus. :/
    Deswegen habe ich eine Frage.
    Wo muss ich diesen Code denn einsetzten? Also ich meine an welcher Stelle.
    Danke im Vorraus :)

    AntwortenLöschen
    Antworten
    1. Hallihallo, um die Menüs genau dort zu platzieren wo du sie haben möchtest, gehst du vom Bloggerdashboard aus auf den Unterpunkt Layout. Dort, wo du den Code haben willst (also beim Sidebarmenü in der Sidebar auf der Seite und beim schlichten Menü im Bereich direkt unter dem Header), klickst du auf Gadget hinzufügen und dann auf HTML/JavaScript. Den Titel kannst du auslassen (wär irgendwie doof einem Menü eine Überschrift zu geben :p) und den Code einfügen, speichern. Wie du Farbe, Form, Größe etc. vom Sidebarmenü änderst steht eh im Post, über den Vorlagendesigner unter "Vorlage". Wenn du noch Fragen hast, frag ^.^

      Löschen
  25. Hallo,
    leider funktioniert alles was ich mache nur wenn man mit der Maus über den Text fährt. Ansonsten bleibt das Menü unverändert, also nicht so wie ich es will. Woran kann das liegen? Ich habe beide Male dieselben Befehle eingegeben..
    Liebe Grüße und Danke! :)

    AntwortenLöschen
    Antworten
    1. Ich wollte grade schreiben, dass eine Leserin neulich das selbe Problem hatte, haha :D Na, das hätten wir ja gelöst. Schlau von dir, mir eine Mail zu schreiben, wenn ich auf Kommentare nicht reagiere.

      Löschen
  26. Hallo!
    Vielen Dank für das Tutorial! Nach einigem ausprobieren habe ich es auch hinbekommen :)
    Nun meine Frage, man kann ja entscheiden wie nah oder fern das Menü am Header sein soll, kann man auch einstellen, wie nah oder fern es vom Post entfernt sein soll?
    Und wie kann ich das abstellen, dass wenn man über das Menü fährt, dass dann der Unterstrich weg ist?
    Danke schon mal im voraus :)
    http://sarahsbuecherliebe.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Hey Sarah,

      Hier der Abstand zum Post:
      <div style="font-family: 'Handlee', cursive; font-size:155%; margin-top:12px; margin-bottom:20px;">
      20 Pixel werden dir wahrscheinlich zu viel oder zu wenig sein, also probiere einfach mit der Zahl herum bis es passt.

      Für deine andere Frage habe ich hier ein Tutorial für dich: http://tuttikompletti.blogspot.co.at/2013/04/tutorial-unterstrich-bei-links-entfernen.html

      Vielleicht konnte ich dir helfen!

      Löschen
    2. Hey, vielen lieben Dank! Es hat alles super geklappt! Dankeschön :)

      Löschen
  27. Huhu =)
    Also erstmal, deine Erklärung sind eigentlich echt super, hab es endlich auch mal hin bekommen. Zumindest so halbwegs. Allerdings hab ich leider das Problem, dass bei mir jetzt About und Travel in der Leiste untereinander stehen und nicht nebeneinander. Weißt du zufällig, wie ich das hinbekommen kann, das es nebeneinander steht? Und wenn ich auf die einzelnen Punkte klicke, kommt irgendwie nicht die Seite, die ich haben möchte und bei About wollte ich den Link zu meinem Profil bei Blogger hin haben, da steht dann aber das ich das Profil erst öffentlich freigeben muss, obwohl ich es an sich schon freigegeben habe, hab es auch nochmal kontrolliert. Ich hoffe, du oder irgendwer kann mir weiter helfen. ich verzweifle schon so langsam aber sicher. :/
    Lg

    AntwortenLöschen
    Antworten
    1. Hey Sunny,

      Grade hast du auf deinem Blog ein anderes Menü eingebunden, sodass ich mir den Code oder das Problem nicht direkt anschauen kann. Ich könnte mir nur vorstellen, dass die Schrift zu groß eingestellt war, sodass "Travel" keinen Platz mehr in der Zeile hatte und in die nächste Zeile verschoben wurde.
      Das Bloggerprofil einbinden hast du ja geschafft. Dropdownmenüs finde ich übrigens total cool :)

      Löschen
    2. Hey, ja das klingt irgendwie logisch. Damit könntest du Recht haben (:
      Ich mag Dropdownmenüs auch, aber ich hätte da gerne noch so Unterpunkte rechts neben den einzelnen Kategorien, allerdings weiß ich leider nicht wie das geht und im Internet hab ich dazu auch nichts gefunden. Du weißt nicht zufällig wie das geht, oder? :D

      Löschen
    3. Ich bin mir nicht ganz sicher, was du meinst. Ich kenn ein Tutorial, bei dem ein "Drop" sozusagen noch mal ein Drop hat; also 3 Ebenen anstatt 2. Hier kannst du's angucken, beim vierten "Ebene 1".
      Hier das Tutorial: http://www.5202.de/2012/10/blogger-drop-down-neue-version.html

      Löschen
  28. Hallo liebe Sandra! Danke für das schöne Tutorial. Nun ist meine Frage, wie ich mehrere Links unter ein Thema/Kategorie in mein schlichtes Menü packen kann (Bsp.: mehrere Posts zum Thema Fashion)? Danke. LG Marie www.muemmelnina.blogspot.de

    AntwortenLöschen
    Antworten
    1. Hm, also mein Vorschlag wäre einfach die Labels einzubinden. Also allen Posts, die angezeigt werden sollen, ein bestimmtes Label verpassen (z.B. Fashion) und statt des Links zur Seite den Link zum Label angeben. So sieht das dann aus:
      http://pusteblumeasdf.blogspot.co.at/search/label/Tutorial

      Löschen
  29. Hallo Sandra, deine Tutorials sind wirklich super! Du hast mir sehr geholfen, da Ich von Menü-Schreiben und HTML etc leider keine Ahnung habe, aber trotzdem gerne an meinem Blog herumexperimentiere, war es wunderbar deine Seite zu entdecken und mit Hilfe deiner Anleitung habe Ich sogar dein super schönes Seitenmenü und ein das zentrierte Menü oben unter dem Header hinbekommen :) Ich bin begeistert! Vielen vielen lieben Dank dafür :)

    AntwortenLöschen
  30. Super Tutorial!! Hat sehr gut geklappt. Ich habe nur ein Frage wie hast du es bei deinem aktuellen Menü (Rezensionen, ....) hinbekommen, dass die Schrift eine andere Farbe hat und diese dann auch bei drüberfahren mit der Maus in eine andere wechselt? Weil bei mir ist es dieses normale von Grau zu Blau und das würde ich gerne ändern. LG Sophie https://www.sophieswelt2000.blogspot.de

    AntwortenLöschen
    Antworten
    1. Hallo Sophie,

      Diese Funktion heißt "Hover" und kann man ganz einfach direkt bei Blogger ändern. Geh dazu vom Dashboard aus auf Vorlage, Anpassen, Erweitert, Links. Die Hover-Farbe ist die Farbe die der Link annimmt, wenn man mit der Maus draufgeht.

      Löschen
  31. @Isi Ko:
    Danke für deinen irrsinnig lieben Kommentar! ^.^

    AntwortenLöschen
  32. Sandro, dafür das ich dieses Tutorial nun schon seit mindestens 2 Jahren mindestens bei jedem zweiten Design das ich mache benutze wollte ich kurz mal meinen Dank dalassen ♥ (Auch wenn ich es andauernd abändere haha aber nu, ohne das Grundgerüst würden Änderungen auch nichts bringen :p)

    AntwortenLöschen
    Antworten
    1. Haha Ines, danke :D Es ist eben sozusagen dass allersimpelste Simpel-Menü und lässt sich gut für alles Mögliche anpassen ;)

      Löschen
  33. hey, erstmal sorry, dass ich schon wieder schreibe :D
    Ich hab das Problem, dass sich nur bei dem Rüberfahren mit der Maus etwas ändert, ansonsten ist der Text nicht so wie ich es haben möchte. Die letzten Male konnte ich es irgendwie immer noch selbst wieder ändern, aber dieses Mal klappt es nicht. Hast du vielleicht einen Tipp für mich?
    Danke und vlg,
    Nina. :)
    http://ninalgphotographie.blogspot.de

    AntwortenLöschen
  34. Hey,
    du hast oben als Beispielbild eins von einer Rezension und ich würde gerne wissen wollen, wie du diesen "Kasten" mit den Infos zu dem Buch neben dem Coverfotos machst.
    Vielleicht kannst du ja mal einen Post dazu machen? :)
    Liebe Grüße,
    Chrissi!

    AntwortenLöschen
    Antworten
    1. Hallo Chrissi, dafür gibts schon ein Tutorial: http://pusteblumeasdf.blogspot.co.at/2013/02/kasten-um-informationen-tutorial.html

      Löschen

Ich schätze es sehr, dass du dir die Mühe machst, mir dein Feedback zu hinterlassen! Der Blog wird nicht mehr weitergeführt, ich bin aber noch über die Kommentar-Funktion erreichbar.

© 2012 - 2016 Pusteblume? · Powered by Blogger · Datenschutz · Impressum