09 November 2012

Tutorial Gastbeitrag: Buttons mit Hover-Effekt


Hallöchen liebe Leser!                                                                                                                           

Heute gibt es eine Premiere auf Books & Senses, nämlich einen Gastbeitrag. Einige von euch hatten mich gefagt, wie ich meine Navigationsleiste denn so hinbekommen habe, dass die Farben sich ändern, wenn man über die einzelnen Navigationspunkte fährt. Ich habe damals Stunden daran gebastelt und konnte leider nicht mehr alle Schritte rekonstruieren, sodass ich keine einfache Erklärung dazu geben konne.

Dann wurde ich von Janna angeschrieben, die mir angeboten hat, einen Gastbeitrag zu machen, in dem sie euch eure Frage beantwortet.Und hier ist er :) Sie hat es etwas anders gemacht als ich, aber ich denke, ihr Weg ist einfacher.

Vielen Dank an Janna an dieser Stelle! Ich hoffe, das Tutorial hilft euch weiter. Feedback ist gern gesehen :)

Liebe Grüße, Lisa

          Buttons mit Hover-Effekt          


 

Hallo, liebe Leser von Books & Senses
Mein Name ist Janna, ich blogge bei „Zu Klug Um wahr Zu Sein“ und ich darf euch heute ein tolles Tutorial zeigen! Vorab will ich nochmal Lisa ein großes Dankeschön sagen, dass sie mir diese Gelegenheit gegeben hat, euch dieses Tutorial vorzustellen.

Damit ihr alle wisst, was ich mit Buttons mit Hover-Effekt meine ist hier eine kleine Animation, die das verdeutlichen soll! :)

Animation

Es geht hier also um Buttons für die Sidebar mit einem Hover-Effekt ♥ - das sieht immer total beeindruckend aus, wenn man drüber geht! ;) Im oberen Bild seht ihr ja, wie das ist - und live gibt es das rechts unter KLUGE KATEGORIEN (auf dem Blog) zu betrachten und auszuprobieren! ;) Und wenn ihr auch solche Buttons haben wollt, dann lest euch dieses leichte Tutorial durch und macht euch ran! :D

Viel Spaß! 

Schritt 1 - Quellcode anpassen! 

Ihr müsst in eurem Quellcode (Übersicht->Vorlage->HTML bearbeiten-> Fortfahren)...


… ein kleinen Abschnitt einfügen, der die Tabs beschreibt. Das heißt, der festlegt, wie sie aussehen sollen (Farbe, Größe, Schrift etc.).

Ihr sucht mit STRG+F oder CMD+F nach dem Code:
/* Header


D A V O R  fügt ihr ein: 

/* Navigation
----------------------------------------------- */
a.navi {
letter-spacing: 1px;
margin-bottom: 2px;
display: block;
border-bottom: 0px solid #ddd;
font-family: Cherry Cream Soda;
font-size: 14px;
color: #660000;
background-color: FFA8A8;
text-align: center;
text-transform: uppercase;
line-height: 21px;
}
a.navi:hover {
letter-spacing: 2px;
margin-bottom: 2px;
display: block;
border-bottom: 0px solid #ddd;
font-family: Cherry Cream Soda;
font-size: 13px;
color: #330000;
background-color: #fff2f2;
text-align: center;
text-transform: uppercase;
line-height: 21px;
}

Das ist eure Vorlage für die Buttons! Hier könnt ihr das Layout verändern. Ich habe gleich mal farbig markiert, wo man was verändern kann/muss! :) Das zweite mal ist immer der Hover-Effekt gemeint - wie sich das verändern wird, wenn man mit der Maus drüber fährt! Also probiert ruhig ein wenig aus! ;)

ROT: Abstand zwischen den Buchstaben
ORANGE: Trennstrich, solid ist durchgezogen, es geht auch dottet (gepunktet) etc., # ist die Farbe (hier eine Palette)
GELB: Schrifttyp (Georgia, Arial etc.)
HELLGRÜN: Schriftgröße
DUNKELGRÜN: Schriftfarbe
HELLBLAU: Hintergrundfarbe (hier eine Palette)
DUNKELBLAU: Textausrichtung - center ist zentriert, left ist links, right ist rechts
VIOLETT: uppercase sorgt dafür, dass alles in Gr0ßbuchstaben ist (könnt ihr leer lassen)

Die anderen Parameter sind weniger wichtig, aber ihr könnt gerne mit ihnen spielen! ;) 

Und jetzt kommt das erstellen der Tabs/Buttons! *-* 

Neues Gadget dazu öffnen - HTML/Java Script:


Und jetzt folgenden Text einfügen:

<div align="center"><div id="navi" style="font-style: normal; "><a href="http://www.blogger.com/rearrange?blogID=7440535377859228301&action=editWidget&sectionId=sidebar-right-1&widgetType=null&widgetId=HTML13" class="navi">Aktuell</a>
<a href="http://www.blogger.com/rearrange?blogID=7440535377859228301&action=editWidget&sectionId=sidebar-right-1&widgetType=null&widgetId=HTML13" class="navi">Gedankenstrom</a>
</div>
</div>

Das ganze müsst ihr natürlich anpassen, was ich mit den Farben zeige:
GELB: Name des Buttons
VIOLETT: Link zu der jeweiligen Seite

FERTIG!!! :) Ganz easy, nicht war? :D :D :D 

Viel Spaß damit und ich würde mich natürlich über Feedback von euch freuen! :) 

Küsse,
Janna

Kommentare:

  1. Muss ich mal ausprobieren, ist jedenfalls ein klasse tut :D LG Anna

    AntwortenLöschen
  2. Super Tutorial!
    Ich liebe Tutorials sehr. Nehm mir dann immer vor, sie dann auch anzuwenden, aber dann bin ich doch wieder zu faul dazu :D
    Hab deshalb auch total viele hier gespeichert rumliegen, die darauf warten umgesetzt zu werden ^^

    AntwortenLöschen
  3. Das Tutorial ist toll gemacht, aber mir persönlich gefällt es nicht so, das Menü so zu gestalten. Was mich besonders interessieren würde, wie Lisa den Jumpbreak mit einem Bild macht. Ich kriege es nur mit Schrift hin...

    AntwortenLöschen

Hallöchen :)

Schön, dass du einen Kommentar hinterlassen willst! Ich freue mich immer über Feedback! Meine Antwort zu deinem Kommentar findest du, wenn ich sie geschrieben habe, immer direkt unter deinem :)

Liebe Grüße :)