[Blogger Hilfe] Navigationsleiste / Seiten

Heute zeige ich euch, wie ich meine Navigationsleiste erstellt habe. Dazu habe ich einen eigenen HTML-Code benutzt. Anfangen möchte ich aber damit, wie man die schon von Blogger zur Verfügung gestellten Seiten integriert, da mir aufgefallen ist, dass viele Blogger-Neulinge gar nicht verstehen, wie man diese eigentlich einbindet. Im zweiten Teil zeige ich dann meinen eigenen Code.

Gliederung:

- Teil A: Seiten von Blogger einbinden
- Teil B: eigene Navigationsleiste erstellen mit HTML
      - Nur Textdarstellung
      - Alternative Darstellung mit Grafiken


Teil A: Seiten von Blogger einbinden

Schritt 1:

Zunächst wählt ihr im Dashboard euren Blog aus, dann solltet ihr zu unten abgebildeter Seite kommen. Eure Seiten, die dann später in der Navigation erscheinen sollen, könnt ihr unter dem Punkt "Seiten" anlegen und verwalten. Wenn er bei einer Seite auf "Ansicht" klickt, wird diese Seite angezeigt, auch wenn sie noch nicht im Blog eingebunden ist. So könnt ihr dann auf die Adresse zugreifen.



Schritt 2:

Die Seiten, die ihr so anlegt, erscheinen aber nicht automatisch da, wo man sie erwarten würde (meistens unter dem Header). Ihnen ist nämlich noch gar kein Platz auf eurem Blog zugewiesen. Post-Bereich und Header sind die Grundfeatures des Blogs, deswegen sind sie schon standardmäßig eingebunden, die Seiten sind aber optional und müssen noch selbst an dem gewünschten Platz eingebunden werden. Dazu klickt ihr den Punkt "Layout" an und dann geht ihr auf "Gadget hinzufügen". Ihr wählt anschlißend das Gadget "Seiten" aus und zieht es da hin, wo ihr es haben wollt, also z.B. unter den Header oder alternativ in die Sidebar. Dort könnt ihr dann noch auswählen, welche Seiten ihr anzeigen wollt und in welcher Reihenfolge.




Teil B: eigene Navigationsleiste erstellen mit HTML

Schritt 1:

Das von Blogger angebotene Seiten-Gadget bietet mir einfach nicht die Design-Möglichkeiten, die ich gerne hätte oder nur sehr umständlich im gesamten Websiten-Code. Deswegen habe ich mir ein eigenes erstellt. Ihr müsst genau wie oben zuerst die Seiten anlegen (Schritt 1). Bei Schritt 2 wählt ihr dann aber statt "Seiten" eine neues "HTML/JavaScript Gadget" aus. Meine Navigationsleiste sieht momentan so aus:



Durchscheinender grauer Hintergrund mit abgerundeten Ecken, große rote Schrift, getrennt mit einem Kreuz-Sonderzeichen. Grundsätzlich sind euch hier im Design keine Grenzen gesetzt. Ihr könnt alles beliebig anpassen. Alternativ kann man auch Bilder hinterlegen, das zeige ich anschließen.

Schritt 2: Code für Text-Navigation

Es kommen auch hier wieder einige Sachen vor, die schon aus anderen meiner Tutorials bekannt sind. Nachlesen könnt ihr verschiedenste Sachen unter meinem Navigations-Punkt "Tutorials".

<div style="font:'Georgia'; font-size:16px; text-transform:uppercase; word-spacing:10px; text-align:center; margin-top:20px; margin-bottom:70px; margin-left: -30px; margin-right:-30px;  background-color: rgba(22,20,20,0.6); border-radius: 18px; line-height: 40px;">

<a href="http://wort-gewalt.blogspot.de/">Startseite</a>
† <a href="http://wort-gewalt.blogspot.de/p/rezensionen-nach-autor.html">Rezensionen</a>

† <a href="http://wort-gewalt.blogspot.de/p/sub-stapel-ungelesener-bucher.html">SUB</a>

† <a href="http://wort-gewalt.blogspot.de/p/challenges.html">Challenges</a>

† <a href="http://wort-gewalt.blogspot.de/p/tutorials.html">Tutorials</a>

† <a href="http://wort-gewalt.blogspot.de/p/uber-mich.html">Über mich</a>

† <a href="http://wort-gewalt.blogspot.de/p/impressum.html">Impressum</a>
 </div>


Im Bereich div style="... könnt ihr allgemein Einstellungen für das Aussehen festlegen. Mit font legt ihr die Schriftart fest, mit font-size die Schriftgröße. Hinweis: die Schrift ändert sich eventuell nicht, da die Schriftart für Links, welche ihr hier ja anlegt, woanders im Layout festgelegt werden und eventuell nicht beeinflusst werden können! Um dieses Problem zu umgehen, löscht oben font und font-size heraus und fügt stattdessen zwischen dem grünen und dem blauen Bock folgendes ein: <font face="arial"><font size=6>. Hierüber könnt ihr dann die Schriftart anpassen.

text-transform: uppercase steht für Großbuchstaben, d.h. mein Text wird ausschließlich groß dargestellt. Es gibt auch noch lowercase für reine Kleinbuchstaben oder ihr lasst das einfach weg, dann wird der Text so dargestellt, wie ihr es eingebt. word-spacing ist der Abstand zwischen den einzelnen Wörtern, text-align: center gibt an, dass alles zentriert dargestellt werden soll. Möglichkeiten hier wären right für rechtsseitige Ausrichtung oder left für linksseitig. margin-top/bottom/left/right gibt die Abstände von oben, unten, links und rechts an. Also wie weit die Navigationsleiste vom Header, vom Postbereich und von den Seitenrändern entfernt ist. Anschließend lege ich die Farbe des Hintergrundes mit background-color fest. Ihr könnt hier die Farbangabe verwenden, die euch am Besten liegt, z.B. Hex, rbg oder rgba. Zweckmäßigerweise habe ich mich für die Farbe in rgba entschieden, da man dort auch Transparenz einstellen kann. Tabellen mit Farben und entsprechenden Werten findet ihr ganz leicht im Internet. Wenn ihr den Hintergrund ganz durchsichtig wollt, könnt ihr background-color:transparent; angeben. Als letztes habe ich noch die Rundungen angegeben mit border-radius, was ihr auch weglassen könnt, wenn ihr eh transparenten Hintergrund habt oder keine Rundungen haben wollt. Line-height gibt die gesamte Höhe der Leiste an. Die Link-Farbe entspricht bei mir der Farbe, die ich standardmäßig für Links eingestellt habe und kann hier auch nicht oder nur über Umwege geändert werden (eine Möglichkeit dazu wäre die Einbindung von Grafiken, siehe nächste Anleitung weiter unten).


Der blaue Block ist für die Einbindung der Seiten-Links da. Das funktioniert ganz einfach nach schon bekanntem Schema. <a href="Link zur Seite">angezeigter Name></a>. Bei "Link zur Seite" tragt ihr einfach die Adresse der Seite ein, die ihr einbinden wollt, im Beispiel oben also meine Startseite, Rezensionen etc. (vgl. Teil A Schritt 1). Bei "angezeigter Name" könnt ihr den Link so benennen, wie er dann in der Leiste erscheinen soll. Anschließend habe ich immer noch ein Sonderzeichen eingefügt, dann nochmal der selbe Codeteil für die jeweils anderen Seiten. Das Sonderzeichen ist natürlich nicht nötig, mir gefällt es aber. Ihr könnt beliebige Zeichen einbinden, z.B. einfach einen Trennstrich |, Bindestrich -, ♥, ♫. Sonderzeichen findet ihr bei Windows in der "Zeichentabelle". Den Codeblock müsst ihr dann noch mit </div> wieder abschließen.


Alternative Darstellung mit Grafiken

Falls ihr eure Navigation mit besonderen Bildern, Schriftarten, Buttons gestalten wollt, bietet es sich an, anstatt dem Text Grafiken einzubinden. Ich erstelle meine Grafiken immer mit Gimp, ihr könnt aber auch ein anderes Programm nutzen, dass euch gut liegt. Im Beispiel unten habe ich meine Texte in einer schönen Schriftart dargestellt, die man so nicht bei Blogger auswählen kann oder die sonst nicht bei jedem angezeigt werden würde, da die Schriftart auf dem jeweiligen PC installiert sein muss. Außerdem haben die Texte einen leichten Farbverlauf. Die Bilder müsst ihr irgendwo hochgeladen haben, um sie verwenden zu können, z.B. bei Photobucket oder ähnlichen Seiten.



 Der Code dazu ist nicht allzu schwer:

<div style = "text-align: center;">

<a href="http://wort-gewalt.blogspot.de/"><img src="http://i1309.photobucket.com/albums/s625/Camill3x/Tutorials/navi1_zps940267b6.png" style="margin-right: 20px; height:45px;" /></a>

<a href="http://wort-gewalt.blogspot.de/p/rezensionen-nach-autor.html"><img src="http://i1309.photobucket.com/albums/s625/Camill3x/Tutorials/navi4_zpsc64e1448.png" style="margin-right: 20px; height:45px;"/></a>

<a href="http://wort-gewalt.blogspot.de/p/impressum.html"><img src="http://i1309.photobucket.com/albums/s625/Camill3x/Tutorials/navi2_zps422c416f.png"  style="height:45px;"/></a>


</div>


Erklärung:

<div style = "text-align: center;"> gibt an, dass die Bilder zentriert dargestellt werden sollen.
Im blau markierten Code-Teil werden die Bilder entsprechend eingebunden und verlinkt. Der bekannte Anfang <a href="Link zur Seite/"> ist wieder die Seite, die angezeigt werden soll. Bei img src= steht eure Bildadresse (Rechtsklick auf Bild, "Grafikadresse kopieren"). Bei style habe ich noch einige wenige Sachen angepasst. margin-right gibt den Abstand nach rechts an, damit die Bilder nicht so aneinander kleben, mit height habe ich nachträglich nochmal die Bildhöhe angepasst, da ich das Bild ursprünglich etwas größer erstellt habe und dann doch kleiner haben wollte. Ist grundsätzlich ganz gut so, da nachträgliches Verkleinern immer gut funktioniert, vergrößern eher weniger, da das Bild dann verpixelt. Also lieber ein weniger größer erstellen und anschließend anpassen.



Schlussmeinung

Ist jetzt zwar insgesamt wieder ein wenig umfangreicher geworden, aber ich hoffe, ihr findet etwas, das euch vielleicht weiterhilft ;) Mit einem eigenen Code kann man wirklich vieles anpassen. Ihr könnt natürlich nicht nur die Blogger-Seiten verlinken, sondern auch direkt zu anderen Websites, z.B. eurem Profil auf lovelybooks etc. Ich helfe auch gerne bei der Erstellung von Buttons und wenn ihr Fragen habt zu bestimmten Befehlen oder wie man einzelne Sachen designen kann, fragt einfach. Da habe ich mir im Lauf der Zeit viele Code-Befehle angeeignet. Viel Spaß beim Ausprobieren. Über Feedback freue ich mich ;)

Kommentare:

  1. Wow, das ist mal sehr ausführlich und verständlich erklärt! Vielen Dank!

    momentan hab ich zwar erstmal genug vom Rumbasteln am Blog, aber gerade die Seitenleiste werd ich mir irgendwann auf jeden Fall näher anschauen, das möchte ich irgendwann auch mal individueller gestalten :)

    LG Aleshanee

    AntwortenLöschen
    Antworten
    1. Danke auch ;)

      Wenn man weiß wie, kann man da schon machen. Vielleicht hilft dir das Tutorial ja mal weiter

      Löschen
  2. Ich finde solche Hilfen immer sehr gut. Ich habe mich ganz gut mit Blogger arrangiert, das einzige, was ich mich noch sehnlichst wünsche ist ein ganz eigenes Design. Momentan benutze ich ein fertig erstelltes, dass vermutlich auch noch viiiiele andere Blogger haben. Leider weiß ich weder, wie man ein eignes Design erstellt, noch wen ich fragen könnte. Mich nervt es auch, dass meine Seite weiß wird, wenn die Anbieter-Seite down ist....
    Aber irgendwan....^^
    Finde die Blogger-Hilfen super!

    AntwortenLöschen
  3. Das war sehr hilfreich, auch wenn mich der HTML-Kram immer noch ziemlich abschreckt. Das war jetzt aber nur für die Navigationsleiste, oder? Ich suche immer noch nach einer Anleitung, wie man solche Instagram-, Tumblr- etc.- Icons einbindet, aber vielleicht finde ich ja etwas dazu auf deinem Blog, werde mich noch etwas durchklicken!

    AntwortenLöschen
    Antworten
    1. Ja, sowas gibts bei mir auch ;) http://www.wort-gewalt.blogspot.de/2013/12/blogger-hilfe-social-media-buttons.html
      Viel Spaß beim Ausprobieren

      Löschen
  4. Super Erklärung, wird bestimmt so einigen Bloggern viel Zeit und mühe ersparen (:

    AntwortenLöschen
  5. Dankeschön, ich liebe solche Tutorials.

    Liebst,
    Katja
    baglovin.de
    Lust auf eine Blogvorstellung?

    AntwortenLöschen
  6. Ah, wunderbar... wieder was zum basteln... Ich mag deine Tutorials, weil sie so leicht verständlich und wunderbar nachzumachen sind :)

    GLG Nadine

    AntwortenLöschen
    Antworten
    1. Juhu, ich habs gleich eingebaut... Vielen Dank hierfür :) Zwar nicht direkt als Menü, aber ich finde es so auch ganz cool :)

      Löschen
    2. super, das freut mich sehr :)

      Löschen
  7. Irgendwie hab ich grad n gedanklichen Fehler... Ich hab die Seiten erstellt bzw sie existieren schon, sofern es keine Label-Links sind, müssen sie Seiten ja erstellt werden, damit ich den Link einbinden kann. Aber wie bekomm ich es hin, dass das Gadget mit den "Seiten" nicht zu sehen ist, sondern nur die neue "Navileiste"?
    Oder hab ich was überlesen?
    *verwirrt*

    AntwortenLöschen
    Antworten
    1. Hallo, die "Seiten" sind ein eigenes Gadget. Du musst dazu die Kategorie "Layout" anklicken, da siehst du ja, wo sich welches Gadget befindet und kannst die verschieben etc.. die Seiten befinden sich normalerweise unter dem Header. Mit einem Klick auf "Bearbeiten" solltest du die Seitenleiste löschen können, dann hast du noch noch das eigene Gadget

      Löschen
  8. Ich habe lange nach einem gutem ''Tutorial'' gesucht und es endlich gefunden!
    Danke :)
    LG Elsa

    AntwortenLöschen

Kommentare sind erwünscht! :) aber bitte freundlich bleiben