Posts mit dem Label Tutorial werden angezeigt. Alle Posts anzeigen
Posts mit dem Label Tutorial werden angezeigt. Alle Posts anzeigen

[Webdesign | Tutorial] Seitenwechsel ♥


Hallo, heute geht es darum, wie ihr einen Seitenwechsel erstellen könnt. Ein Beispiel dafür seht ihr auf dieser Testseite in Aktion sehen könnt. Worum geht es dabei? Sinn der ganzen Sache ist es, auf einer Unterseite mehr Inhalt kompakt unterzubringen, indem man Tabs hat, zwischen denen man wechseln kann. So könnt ihr z.B. Rezensionen von Büchern, Serien und Filmen auf einer Seite unterbringen oder eure Wunschliste zusammen mit eurem SuB. Ich persönlich mag es nämlich nicht, wenn das Menü unübersichtlich ist und auf diese Weise habt ihr nur einen Menüpunkt und die Seite selbst enthält viel mehr Content. Damit ihr versteht, was ich meine, klickt einfach auf die Testseite.

1. Schritt

Klick im Menü auf Vorlage und dann HTML bearbeiten. Nutze für die folgenden Anweisungen die Suchfunktion. Falls du nicht weißt, wie du das machst, kannst du das alles in diesem Post nachlesen.

Suche nach der Codezeile

]]></b:skin>

Darüber (!), also vor dem "]]" fügst du nun folgenden Code ein:

/* Seitenwechsel von http://secrets-of-nobody.blogspot.de/ */
seitenwechsel {
 display: block;
 border-bottom: 1px dotted #ccc;
}

tab {
 background: #FFF;
 padding: 13px 7px 1px 7px;
 border-top: 1px solid #ccc;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}

.aktiverTab{
        background: #ab395f;
}

.aktiverLink{
 color: white !important;
}


tab:hover{
  background: #f9f9f9;
}

a.tab:link, a.tab:visited {
        background: none;
        font-family: 'Lobster Two', cursive;
        font-size: 25px;
        font-weight: normal;
}


a.tab:hover {
 background: none;
        text-decoration: none;
}


2. Schritt

Gehe im Blogger-Menü auf Seiten und bearbeite dann die Seite, auf der du den Seitenwechsel einbauen möchtest. Klicke neben Verfassen auf HTML und füge folgenden Code ein:

<script type="text/javascript">
//copyright https://secrets-of-nobody.blogspot.com/
function wechsleSeite(number) {
 var anzahlSeiten = 3; //Anzahl Unterseiten
 for(i = 1; i <= anzahlSeiten; i++) {
    document.getElementById('seite' + i).style.display = "none";
    document.getElementById('tab' + i).className="";
    document.getElementById('tabLink' + i).className="tab";
  }
 document.getElementById('seite' + number).style.display = "block";
 document.getElementById('tab' + number).className="aktiverTab";
 document.getElementById('tabLink' + number).className="tab aktiverLink";
}
</script>

Nun müssen wir den Code noch anpassen:
  • var anzahlSeiten =
    ... dort geb ihr die Anzahl an Tabs an, die ihr haben möchtet. Bei mir sind das in dem Beispiel drei. 
  • Ansonsten nichts zwischen den script-Tags ändern!


3. Schritt

Nun müssen wir unter dem in Schritt 2 eingefügten Code noch mehr Code einfügen:

<tab id="tab1" class="aktiverTab"><a id="tabLink1" class="tab aktiverLink" href="javascript:wechsleSeite('1')">TABNAME1</a></tab>
<tab id="tab2"><a id="tabLink2" class="tab" href="javascript:wechsleSeite('2')">TABNAME2</a></tab>
<tab id="tab3"><a id="tabLink3" class="tab" href="javascript:wechsleSeite('3')">TABNAME3</a></tab>
</seitenwechsel>

<br />
<div id="seite1" style="display: block;">
HIER INHALT VON TAB 1
</div>
<div id="seite2" style="display: none;">
HIER INHALT VON TAB 2
</div>
<div id="seite3" style="display: none;">
HIER INHALT VON TAB 3
</div>

Möchtet ihr zusätzliche Tabs, benötigt ihr oben zusätzlich ein
<tab id="tab4"><a id="tabLink3" class="tab" href="javascript:wechsleSeite('4')">TABNAME4</a></tab>

  • bei wechsleSeite('NUMMER') muss genau die Nummer eures Tabs in einfachen Anführungszeichen stehen
  • TABNAME1 könnt ihr frei wählen, bei mir im Beispiel steht da einfach Bücher

und darunter fügt ihr für jeden Tab ein:
<div id="seite4" style="display: none;"> HIER INHALT VON TAB 4 </div>
  • in den div-Tags muss bei id=seiteNUMMER für NUMMER genau die Nummer dieses Tabs stehen, z.B. beim vierten Tab ist es seite4
  • zwischen den div-Tags, also wo HIER INHALT VON TAB4 steht, fügt ihr den Inhalt eures Tabs ein, bei mir war das die Bücherwand aus Covern, die ich euch im letzten Tutorial gezeigt habe
  • Wichtig: Nur bei einem Tab darf style = "dispylay: block" stehen, bei allen anderen Tabs muss style = "dispylay: none" stehen. Der Tab, bei dem display: block steht, wird angezeigt, wenn ihr die Unterseite aufruft. Würden mehrere als Sichtbarkeit block haben, würde es nicht funktionieren.


4. Schritt


Nun geht es an das anpassen des Codes für euren Blog. Dazu passen wir den Code aus Schritt 1 an. Ich empfehle euch, eure Vorlage Schritt für Schritt zu verändern und genau zu beobachten, welche Auswirkungen das auf das Design der Tabs hat.

/* Seitenwechsel von http://secrets-of-nobody.blogspot.de/ */
seitenwechsel {
     display: block;
     border-bottom: 1px dotted #ccc;
}
Mittels border-bottom könnt ihr die Linie direkt unter den Tabs anpassen. Der erste Wert gibt die Dicke an (1px), der zweite Wert gibt an, wie sie gestaltet ist (dottet - gepunktet, solid - durchgzogen uw.) und der dritte Wert gibt die Farbe an(#ccc).

Nun geht es an die Gestaltung der Tabs.
tab {
   background: white;
   padding: 13px 7px 1px 7px;
   border-top: 1px solid #ccc;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
}
Bei background gebt ihr an, wie der Hintergrund der Tabs gestaltet werden soll. In meinem Fall habe ich mich einfach für die Farbe weiß (white) entschieden. Hier könnte man aber auch ein Bild oder ein Muster wählen. Padding gibt den Innenabstand, also den Abstand zu den umrandenden Linien an. Die Werte bedeuten den jeweiligen Abstand nach oben, nach rechts, nach unten und nach links. Mehr dazu findet ihr hier auf CSS4you. Border erzeugt euch eine Linie. Border-Top macht eine Linie oben, entsprechend left und right für links und rechts. Die Gestaltung der Linien ist wie im ersten Absatz.
tab:hover{
  background: #f9f9f9;
}
Hier könnt ihr bei background noch entscheiden, ob euer Hintergrund in einer anderen Farbe erscheinen soll, wenn ihr mit der Maus darüber fahrt. Bei mir ist es ein Grauton (und auf meinem Blog verändert sich auch noch die Farbe der Links, wenn ich darüber fahre, das könntet ihr hier auch noch ändern, mittels color: ...).

a.tab:link, a.tab:visited {
   background: none;
   font-family: Arial;
   font-size: 25px;
   font-weight: normal;
}
Hier könnt ihr gestalten, in welcher Schriftart und in welcher Größe die Schrift der Tabs sein soll. Die Schriftart ist font-familiy und die Schriftgröße ist font-size.
a.tab:hover {
   background: none;
   text-decoration: none;
}
Als letztes gestalten wir, wie ein einzelner Tab aussehen soll, wenn er aktiv ist, also wenn diese Unterseite gerade geöffnet ist. Ich habe mich dazu entschieden, die Farben von Schrift und Hintergrund in diesem Fall umzukehren, also weinroter Hintergrund und weiße Schrift.

.aktiverTab{
   background: #ab395f;
}

In der Klasse aktiver Tab ändert ihr mit background den Hintergrund.
.aktiverLink{
    color: white !important;
}

In der Klasse aktiverLink ändert ihr mit color die Schriftfarbe. Wichtig ist allerdings das !important, da man an dieser Stelle zwangsweise die Schriftfarbe des Links überschreiben muss.


Das war's auch schon! Bei Fragen stehe ich gerne zur Verfügung und falls euch das Tutorial geholfen hat, würde ich mich über ein Kommentar freuen!

Ich habe den Seitenwechsel bisher noch nicht eingebaut, weil ich mich noch nicht so recht für eine Aufteilung entscheiden konnte und bisher noch eine recht überschaubare Zahl von Rezensionen habe. Falls ihr aber Platz- oder Übersichtlichkeitsprobleme habt, ist diese Möglichkeit definitiv etwas für euch!

Webdesign | Tutorial - Bücherwand aus Covern


Heute soll es darum gehen, wie ihr eine Bücherwand aus Covern erstellen könnt, auf denen ihr auch eure Rezensionen verlinken könnt. Beispiele dafür findet ihr auf meiner Unterseite Bücher & Filme oder rechts in der Seitenleiste.

1. Schritt


Klick im Menü auf Vorlage und dann HTML bearbeiten. Es öffnet sich ein Fenster mit viel Code.

2. Schritt

Falls du nicht weißt, wie man die Suchfunktion nutzt, kannst du das hier in einem meiner Posts unter der Überschrift Suchfuntkion nochmal nachlesen.

Suche nach der Codezeile
]]></b:skin>
Darüber (!), also vor dem "]]" fügst du nun folgenden Code ein:

/* Buchwand aus Covern von http://secrets-of-nobody.blogspot.de/ */
.containerBuch{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.containerBuch img {
  width: 132px;
  height: 210px;
  padding: 2px;
}
Nun könnt ihr den Code noch nach euren Wünschen anpassen. Was ihr dabei könnt ihr in .containerBuch img verändern:
  • width: die gewünschte Breite eurer Cover
  • height: die gewünschte Höhe eurer Cover
  • padding: der Abstand der Cover zueinander ist das doppelte davon
Vielleicht müsst ihr einfach ausprobieren, welche Größen am besten passen.

Klicke auf Vorlage speichern. Es sollte ungefähr so aussehen:



3. Schritt

Nun geht es an die eigentliche Seite, auf der ihr eure Buchwand haben wollt.
Dort fügt ihr folgenden Code ein:
<div class="containerBuch">

</div>
Zwischen die div-Klammern fügt ihr eure Bilder mithilfe von
<img src="LinkZumBild" />
ein, sodass es so aussieht:


Das könnt ihr mit so vielen Büchern machen wie ihr wollt. Die Bücher, die ihr am Anfang haben wollt, fügt ihr oben ein & die Bücher, die ihr am Ende haben wollt, unten. Ihr könnt aber auch mittendrin Bücher einfügen, was der riesige Vorteil gegenüber anderen Methoden ist. Die Bücherwand passt ihr Layout ganz einfach von selbst an und ihr könnt die neusten Rezensionen direkt oben einfügen und müsst nichts verschieben.

4. Schritt

Möchtet ihr nun auch noch eure Rezensionen verlinken, müsst ihr um euer Bild noch einen Link setzen. Das macht ihr wie folgt:
<a href="LinkZuMeinerRezension"><img src="LinkZumBild" /></a> 

Ergebnis

Das Ergebnis sollte dann ungefähr so aussehen:


Falls ihr noch weitere Fragen habt oder genauere Anleitungen für einzelne Schritte braucht, fragt einfach! Ich helfen gern :)

Ich hoffe, das Tutorial hilft euch. Falls ja, hinterlasst mir doch einfach ein Kommentar, ich würde mich freuen!