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.

Wechselseiten

Auch dieses Tutorial stammt wieder von fruehlingshaft.

In diesem Tutorial erkläre ich, wie die sogenannten Wechselseiten funktionieren. Live anschauen könnt ihr das bei "care about what?" - ein Blog, den ich übrigens allen empfehlen würde.

So soll das ganze am Ende aussehen:





Und so geht's:

Um ersteinmal das Aussehen der Wechselseiten festzulegen müssen wir erstmal entsprechende CSS schreiben. Dafür benutzen wir folgenden Code und fügen ihn im Vorlagendesigner unter 'Benutzer definierte CSS' hinzu.


Jetzt wisst ihr zwar, wo der Code hinsoll, aber welchen Code ihr dort einfügen müsst habe ich euch noch nicht gesagt. Der kommt jetzt.
Diesen Code könnt/müsst ihr entsprechend anpassen. Wie es letztlich aussieht ist jedem selbst überlassen.

/* Wechselseiten
----------------------------------------------- */
ultab {
display: block;
border-bottom: 1px dotted #ccc;
}
tab {
background: #FARBE;
padding: 2px 7px 1px 7px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
a.tab:link, a.tab:visited {
background: none;
font: normal 11px georgia;
}
a.tab:hover {
background: none;
}

Wenn ihr damit fertig seid erstellt ihr ein neues HTML/Java Script Gadget und fügt folgenden Code ein:
<script type="text/javascript">
function wechselDich(nummer) {
 // Hier die Anzahl aller Unterseiten eintragen:
 var anzahl = 3;
 // Ab hier nichts mehr ändern!
 for(i = 1; i <= anzahl; i++) document.getElementById('kasten' + i).style.display = "none";
 document.getElementById('kasten' + nummer).style.display = "block";
}
</script>
<ultab>
<tab><a class="tab" href="javascript:wechselDich('1')">NAME1</tab>
<tab><a class="tab" href="javascript:wechselDich('2')">NAME2</a></tab>
<tab><a class="tab" href="javascript:wechselDich('3')">NAME3</a></tab>
</ultab>
<div id="kasten1" style="display: block;">
DEIN TEXT
</div>
<div id="kasten2" style="display: none;">
DEIN TEXT
</div>
<div id="kasten3" style="display: none;">
DEIN TEXT
</div>

Das fett geschriebene verändert ihr, ich denke, das was da rein muss ist selbst erklärend.

Sollte es noch fragen geben, könnt ihr sie uns entweder auf Formspring stellen oder in die Kommentarbox.

Liebste Grüße,
Paula

Kommentare:

  1. Und wie kriegt man Widgets rein, so wie CPL das mal hatte? :3 und beween sich die seiten auch nach links oder rechts beim wechseln?

    AntwortenLöschen
    Antworten
    1. Ich kann mich leider nicht mehr genau daran erinnern, wie CPL das hatte. Tut mir leid.

      Das mit dem 'bewegen' müsstest du nochmal extra einstellen.

      Löschen
    2. also nein die Seiten wechseln nicht durch also wenn du die 'karten' meinst und du bekommst andere widgets rein indem du einfach den code für html/java script statt dein Link einsetzt und da dann alles wie sonst auch einsetzt als wäre es ein eigener java script widget machst eben das ganze tutorial z.b. navigation in der sidebar und setzt es hier einfach ein was ins widget kommt (; oder auch die bloglovin oder blog connect widget codes kannst du hier einsetzten (;
      Liebe grüße hoffe konnte dir helfen (;

      Löschen
  2. Ich hab auf den einzelnen Wechselseiten verschiedene auch Links zu diversen Seiten des Blogs. Wie kann ich diese designen, z.B. farblich hinterlegen?

    AntwortenLöschen
    Antworten
    1. Bea meinst du wenn man drüber fährt? dann müsstest du color: die farbe einfügen bei hover soweit ich weiß.Und bei deinem link selbst du kannst natürlich die gesamte linkfarbe für dein ganzes design ändern, in dem du einfach im html bei <Variable name="linkcolor" description="Link Color" in der nächsten zeile die farben tauschst und das in der zeile unter visited link color (weiter unten) auch machst. Wäre zumindest eine Alternative (;

      Löschen
  3. Das padding unter "tab {..." sorgt bei mir übrigens dafür, dass der obere Strich nicht angezeigt wird. <:
    Vielleicht wäre es wichtig, das zu erwähnen, falls andere das selbe Problem haben.

    AntwortenLöschen
  4. Hey hey, oben im Code wurde ein "< /a >" vergessen beim ersten Tab ;)

    AntwortenLöschen
  5. wie kann ich auf einer wechselseite einen link einfügen? :/

    AntwortenLöschen
    Antworten
    1. also ich miene jetzt ich schreibe einen kleinen text bspw. hallo mein name ist bla ich bin bla jahre alt und komme aus bla und darunter hätte ich gerne einen link zu meiner 'about' seite also so das sie erst weiter lesen können wenn sie auf den link zu der 'about' seite klicken

      Löschen
  6. Kann es sein dass das bei Minima nicht geht?

    AntwortenLöschen
  7. bei mir werden oben die strichel nicht angezeigt

    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.