Schwebende Social-Media Buttons ♥♥♥♥

Hi zusammen :)

Ich habe jetzt schon mehrmals die Frage erhalten, wie ich denn die schwebenden Buttons auf meinem Blog gemacht habe.
Heute möchte ich euch das erklären :)

Man kann die fertigen Buttons runterladen oder selbstmachen, dafür habe ich die Schriftart JustVector runtergeladen und installiert. Hier eine Übersicht über alle Logos in dieser Schrift:



Fertige Buttons findet man überall im Web, hier ein netter Link:

• 60-social-media-icons-und-buttons

JustVector beinhaltet leider kein Symbol für 500px, aber da gibts auch Abhilfe: 500px - Icons for Social Media

Soweit so gut, als erstes erstelle ich die einzelnen Bilder in meinem Bildbearbeitungsprogramm in einer Größe von 40x40px. Natürlich ist es egal, welche Größe eure Buttons haben, aber ihr müsst die Größe wissen :)



Wer möchte, erstellt alle Buttons nochmal in einer anderen Farbe:



Die sind dazu da, dass sich die Farbe der Buttons verändert, wenn man mit der Maus darüber geht. Daraus resultiert aber auch mein langer komplizierter selbstgebastelter Code - Anfänger wollen sich also vielleicht erstmal an der einfachen, einfarbigen Variante probieren ;)

Zuerst müssen alle einzelnen Buttons irgendwo hochgeladen werden, damit wir sie verlinken können. Am besten erstellt man dort auch einen Account, damit man immer auf die Bilder zugreifen kann. Ich kenne da tinypic und photobucket, aber ihr kennt bestimmt noch mehr :)
Nachdem wir nun alle Bilder hochgeladen haben, erstellen wir ein neues Widget "Html/Java" und fangen an zu coden ;)

Variante I : einfarbige Buttons

Unser Code besteht aus 2 Teilen: Dem css / style - Abschnitt und dem html - Abschnitt. Komplett sieht der Code für 7 Buttons wie folgt aus:

<style>
#floatbubble {position:fixed; left: 10px; bottom: 30px; width:40px; z-index:999;}
#floatbubble a {display:block; width:40px; height:40px; background-position: center; background-repeat: no-repeat; white-space: nowrap;}

#facebook a:link {background-image:url(LINK ZUM BILD); }
#px a:link {background-image:url(LINK ZUM BILD); }
#flickr a:link {background-image:url(LINK ZUM BILD); }
#da a:link {background-image:url(LINK ZUM BILD); }
#vimeo a:link {background-image:url(LINK ZUM BILD); }
#formspring a:link {background-image:url(LINK ZUM BILD); }
#rss a:link {background-image:url(LINK ZUM BILD); }
</style>

<div id='floatbubble'>
<div id='facebook'><a href="LINK" target="_blank"></a></div>
<div id='px'><a href="LINK" target="_blank"></a></div>
<div id='flickr'><a href="LINK" target="_blank"></a></div>
<div id='da'><a href="LINK" target="_blank"></a></div>
<div id='vimeo'><a href="LINK" target="_blank"></a></div>
<div id='formspring'><a href="LINK" target="_blank"></a></div>
<div id='rss'><a href="LINK" target="_blank"></a></div>
</div>

Wer jetzt absolut keine Ahnung von html/css hat, wird kaum etwas verstehen. Ich kann leider auch nicht auf alles eingehen. In den oberen beiden Absätzen, die durch <style> und </style> abgesetzt werden, wird das Design des ganzen definiert.
#floatbubble ist der "Container", der die ganzen Buttons beinhaltet und ist an der linken Seite fixiert, mit einem Abstand von 10px nach links und 40px nach unten. Das könnt ihr natürlich nach Belieben ändern. width richtet sich nach der Breite eurer Buttons.
#floatbubble a beschreibt die Links, die im Container floatbubble sind. Hierbei muss die Breite und Höhe der Buttons angegeben werden, damit dieser Platz für sie "reserviert" wird.
An den Stellen LINK ZUM BILD müsst ihr nun die Links einsetzen, die ihr von eurem Bildhoster bekommt. Anstatt dem blauen LINK kommt hier euer "Ziel" hin, also z.B. eure Homepage, euer Flickr-Account, etc. pp :)
target="_blank" ist übrigens sehr praktisch: Somit werden die Links in einem neuen Tab geöffnet, und euer Blog bleibt immernoch zu sehen :)

Variante II : farbwechselnde Buttons

Soo, dann widmen wir uns nun dem etwas komplizierterem und mehr zusammengebasteltem Teil zu :)
Wir erweitern den Code um folgende Zeilen:

Innerhalb von <style> und </style>:

#facebook a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#px a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#flickr a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#da a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#vimeo a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#formspring a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#rss a:hover {background-image:url(LINK ZUM ANDEREN BILD); }

Anstatt von LINK ZUM ANDEREN BILD fügen wir hier nun eben die Bilderlinks mit den anderen Farben ein :)

Probiert man das ganze nun aus, kann es sein, dass es ziemlich lange dauert, bis das Hover-Bild erscheint und in der Zwischenzeit kein Button zu sehen ist. Das ist natürlich nicht toll, und hier kommt meine Bastellösung. Ganz am Ende fügen wir (nicht im style-Bereich) folgenden Abschnitt ein:

<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />

Auf diese Weise werden alle Bilder schonmal "vorgeladen", aber durch visibility:hidden komplett unsichtbar gehalten.

Dann wünsche ich euch mal viel Spaß beim nachbasteln :)

Grüße,
Jennifer