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.

Navigation in der Sidebar


Dieses Tutorial stammt ursprünglich von fruehlingshaft. Wir haben die Erlaubnis es zu benutzen.

Oft gefragt, nie wirklich beantwortet...
Wie funktioniert jetzt eigentlich diese Navigation in der Sidebar die ihr habt?
Endlich mal ein Tutorial dazu...



Um eine solche Navigation zu erstellen sind zwei Schritte nötig.
Im ersten Schritt definieren wir im CSS Teil, wie die Navigation aussehen soll, im zweiten Teil erstellen wir ein Gadget, damit die Navigation überhaupt angezeigt wird.

Zuerst öffnest du den HTML Teil deines Blogs und suchst mit STRG+F bzw. APFEL+F nach

/* Headings
Direkt darüber fügst du folgenden Code ein:
/* Navigation
----------------------------------------------- */
a.navi {
 letter-spacing: 2px;
 margin-bottom: 2px;
 display: block;
 border-bottom: 1px solid #ddd;
 font-family: Georgia;
 font-size: 11px;
 color: #999;
 background-color: #eee;
 text-align: center;
 text-transform: uppercase;
 line-height: 21px;
}
a.navi:hover {
 letter-spacing: 2px;
 margin-bottom: 2px;
 display: block;
 border-bottom: 1px solid #ddd;
 font-family: Georgia;
 font-size: 11px;
 color: #999;
 background-color: #ccc;
 text-align: center;
 text-transform: uppercase;
 line-height: 21px;
}

Der erste Teil des Codes bestimmt das Aussehen des Linkbuttons,
der zweite Teil (a.navi:hover) ist eigentlich nicht nötig, er bestimmt nur, wie der Linkbutton aussieht, wenn ihr mit der Maus drüber fahrt.
Ihr könnt diesen Code nach Belieben verändern.

Nachdem ihr abgespeichert habt erstellt ihr ein neues HTML/Java Script Widget und fügt dort folgenden Code ein:

 <div id="navi">
<a href="http://deinlink.de/" class="navi">Link1</a>
<a href="http://deinlink.de/" class="navi">Link2</a>
<a href="http://deinlink.de/" class="navi">Link3</a>
<a href="http://deinlink.de/" class="navi">Link4</a>
</div>
deinlink.de ersetzt ihr durch die URL der Seite, die beim Klick erscheinen soll und statt Link1, Link2 etc. fügt ihr den Text ein, der im Button stehen soll.
Ihr könnt beliebig viele Links hinzufügen oder entfernen.


Ich hoffe das Tutorial war verständlich.

Liebste Grüße,
Paula

Kommentare:

  1. Super Tutorial, hab ich schon ewig gesucht :)

    Aber ich habe eine ewig lange Liste und möchte daher, dass es eine Tabelle mit zwei Spalten wird, nur leider sind die einzelnen Buttons einfach untereinander, obwohl ich "width: 100px" (das ist die Hälfte meiner Sidebarbreite) angegeben hab... Könnt ihr mir da vllt weiterhelfen?

    Auf meinem Blog könnt ihr euch mein Problem anschaun, einfach runterscrollen.

    AntwortenLöschen
    Antworten
    1. Vielen vielen Dank! Ich habe es zwar so wie du es erklärt hast nicht hinbekommen, aber ich habe Tabellen immer anders gemacht: "tr" für neue Zeilen und "td" für neue Spalten und so hat es geklappt. Dann war zwar der Abstand zwischen den einzelnen Buttons etwas zu groß, aber wenn man bei eurem Code dann bei "margin-bottom: 2px;" ein Minuszeichern vor die Zahl macht, klappt es super :)

      Danke :)

      Löschen
  2. dankeschön für die meinung:3 ♥

    AntwortenLöschen
  3. Ich hab alles bei mir eingefügt und es funktioniert prima, nur wieso ist bei mir der graue Bereich so kurz und hier bei euch so lang? Bzw die grauen Balken?

    AntwortenLöschen
  4. Hey ihr süßen,

    leider habe ich ein problem, ich will die Balken dicker haben nur das geht nicht, das sört mich total. Könntet ihr mir nicht vllt helfen, wäre echt nett

    http://leserherz.blogspot.de/2012/11/rezension-legend-fallender-himmer-marie.html

    ihr könnt ja das Kommi auf meinem Blog oder als E.mail an diese Adresse schicken : buercherjunki@gmail.com

    Ally

    AntwortenLöschen
  5. Bei mir geht das nicht, da sind nur 4 Striche in der Sidebar dann :/
    Was genau is da schiefgelaufen??

    AntwortenLöschen
    Antworten
    1. Hey du! Kommt drauf an was du verändert hast (; Wenn du willst, kannst dus mir mal schicken (falls dus noch hast) :D und ich schaus mir mal an (;

      Löschen
  6. Hallo :) das passt jetzt garnicht zum Thema , aber ich wollte euch was fragen.
    Also ich wollte meine sidebar fixieren aber das funktioniert nicht mehr? Ich hab meine sidebar links, hab denn code eingefügt, nichts ist passiert dann hab ich das auf rechts versucht und das klappte, nur das blöde ist das es dann durch alle meine Bilder ging. Ich hoffe ihr habt verstaden was ich meine, vllt. wisst ihr ja was für ein Problem das ist :)
    würde mich freuen wenn ihr mir zurückschreibt :)

    AntwortenLöschen
  7. total toll, ihr habt mich gerettet, vielen 1000 dank ♥

    AntwortenLöschen
  8. Hey :)
    Bin gerade dabei, mein Design zu ändern und hab dabei dieses Tutorial benutzt... Es hat auch alles super geklappt, vielen Dank!
    Jetzt hab ich noch eine Frage dazu und zwar: wie kann ich denn wohl den Abstand zwischen den einzelnen Balken verändern? Im Moment sieht es so aus: http://voislavieenrose.blogspot.de/ und ich find den Abstand zu groß...
    Wäre super, wenn ihr mir helfen könntet, vielen Dank schonmal!! :) ♥

    AntwortenLöschen
  9. HILFE! Bei mir im HTML Bereich gibt es kein /*headings :((((((

    AntwortenLöschen
  10. Endlich ein Tutorial dazu! Danke! :)

    AntwortenLöschen
  11. bei mir gibt es kein headings im html bereich was soll ich machen? lg

    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.