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:

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

31 Kommentare

  1. super idee und super tipp :)

    aber ja, für absolute anfänger ist es
    wirklich schwer zu verstehen...

    aber ich denke, mit ein bisschen
    übung ist alles zu schaffen!

    liebe grüße,
    xoxo,

    your-lifestylespot.blogspot.com

    AntwortenLöschen
  2. Hallo,
    ich bin nicht bei Formspring angemeldet, deswegen kann ich meinen Tutorialvorschlag leider nicht dort posten. Ich wollte Fragen, ob ihr ein Tutorial machen könntet, wie man Autorenkommentare auf dem eigenen Blog highlighten bzw. farbig unterlegen kann.

    Liebe Grüße und euer Blog ist super! :)

    AntwortenLöschen
  3. Wo ist eure navbar und wie kann ich euch regelmäßig lesen?

    Liebste Grüße ♥

    AntwortenLöschen
  4. Es funktioniert bei mir super aber man sieht den Button nur wenn ich mit der Maus drüber fahre. Wie geht es dass er immer sichtbar ist?

    AntwortenLöschen
  5. Danke für die Erklärung! Hat super geklappt :-)
    lg, http://kati-flyaway.blogspot.com

    AntwortenLöschen
  6. Hey, ich habe alles genauso gemacht, aber ich sehe keine Icons :-( was hab ich denn falsch gemacht?!

    AntwortenLöschen
  7. also bei mir klappt's gar nicht. erstmal bekomm ich absolut keine buttons und wenn ich den html-code wieder bearbeiten will, dann ist die hälfte einfach gelöscht. woran liegt das denn?

    AntwortenLöschen
  8. Vielen Dank für die Anleitung! Mit ein bisschen rumprobieren hat es hervorragend geklappt. ;)

    AntwortenLöschen
  9. Ich finde das Tutorail super erklärt und verstehe auch alles, aber trotzdem wird es bei mir nicht angezeit :/ menno

    AntwortenLöschen
  10. Habe übrigens das selbe Problem wie Jenny..

    AntwortenLöschen
  11. Ich denke, dass das Problem bei Jenny & Sandra daran liegen könnte, dass eventuell der Bilderlink im falschen Format eingefügt worden ist. Ging mir bei unserem Blog genauso. (Unter Photobucket z.B. muss man als Methode "Directlink" auswählen und nicht wie ich zuerst "HTML-Code".)

    AntwortenLöschen
    Antworten
    1. Ohhh... Wenn es bei mir daran auch liegt, dann vielen Dank! Ich bin nämlich gerade am Verzweifeln...

      Löschen
  12. wo muss ich diesen riesigen Code denn hinsetzen?!:D
    ich verstehe den Satz
    "Nachdem wir nun alle Bilder hochgeladen haben, erstellen wir ein neues Widget "Html/Java" und fangen an zu coden ;)" nicht.
    wie erstelle ich sowas und..HÄ?!:DD
    Vicky

    AntwortenLöschen
    Antworten
    1. Bei Blogspot/Blogger musst du im Dashboard auf Design gehen. Dort an einer freien Stelle (ich habe es unten eingefügt) auf "Gadget hinzufügen" klicken. Aus der Liste dann "HTML/JavaScript" auswählen und da dann den ganzen Code einfügen und speichern.

      Löschen
  13. Bei mir klappt das einfach nicht :O ;/ Also irgendwie lade ich das Bild hoch und gebe all die codes da in das Gadget ein, und danach ist da ncihts und wenn ich es neu öffne sind die ganzen Codes weg...

    AntwortenLöschen
    Antworten
    1. hab das gleiche problem guck: http://codexoffashion.blogspot.de/
      kann zwar theoretisch draufklicken aber die bilder erscheinen nicht?!

      Löschen
  14. Bei mir hat alles super geklappt außer das mein Icon jetzt ganz links ist und wenn ich scrolle das Zeichen mit geht o:

    AntwortenLöschen
  15. Ansich großartig, das HTML-Script funktioniert bei mir soweit.
    Aber was muss ich ändern, damit die Buttons nebeneinander mit ca.10px stehen und das sie sich in der navbar befinden und nicht mitscrollen?

    Schönen Blog, weiter so.
    Lg Enrico
    http://enricokahl.blogspot.de/

    AntwortenLöschen
  16. Funktioniert bei mir auch nicht wirklich, alles der Reihe nach gemacht, auf speichern geklickt u dann das Gadget wieder geöffnet - alles weg - HM? :/

    AntwortenLöschen
  17. Herzlichen Dank! Gerade umgesetzt. Das ist ein großartiges Tutorial - ganz vielen Dank!

    AntwortenLöschen
  18. dankeschön für das tutorial. Ich habe alles verstanden und habe alles auch richtig eingesetzt, die buttons sind auch da, aber ich kann sie nicht sehen.
    Kannst du mir vllt helfen?

    AntwortenLöschen
  19. Dankeschön für dieses tolle Tutorial - nach so was hab ich schon ewig gesucht! Hat richtig Spass gemacht, die Buttons zu kreieren :)

    AntwortenLöschen
  20. Ich habe es so versucht wie in der Anleitung, hat jedoch nicht geklappt. Bei mir werden nur die ganzen Codes angezeigt. Habe einen Blog bei wordpress. Kann mir vielleicht jemand weiterhelfen?

    Liebe Grüße
    Lia

    AntwortenLöschen
  21. Huhu Zusammen

    Entschuldigt bitte den späten Kommentar...weiss gar nicht ob diese noch gelesen werden? Jedenfalls habe ich vor Monaten meine Buttons nach dieser Anleitung hier eingerichtet. Hat super geklappt - hier seht ihr sie unten links in Action: www.rundumschoen.org. Nun habe ich aber beim Button zu meinem Instagram Account eine andere Instagram-Seite einzurichten,finde aber die dafür vorgesehenen Codes nicht in meiner HTML-Vorlage (obwohl ich das Häkchen bei "Widget-Vorlagen komplett anzeigen" gesetzt habe)...ich hab schon so einige Suchbegriffe in meinem HTML-Design-File eingegeben, darunter "Facebook" "Floatbubble "instagrid" und und und. Das kann doch nicht sein, dass dieser Abschnitt einfach so verschwunden ist, oder? So kann ich das Ganze ja nicht mal löschen und nochmals neu installieren, dann hätte ich die Buttons ja doppelt. Kann mir hier jemand weiterhelfen? Irgendwelche Tipps ?

    <3 Lily

    AntwortenLöschen
  22. bei mir ist es so:ich gebe den code ein,gestalte alles,speichere es,es erscheint nichts & wenn ich wieder auf das gadget gehe fehlt auf einmal die hälfte vom code.

    AntwortenLöschen
  23. Funktioniert absolut einwandfrei! Dankeschön!

    AntwortenLöschen
  24. wie verhält sich der code bei der dynamischen ansicht? mit einen einfachen html widgets geht es leider nicht :(

    AntwortenLöschen
  25. Hallo! Grundsätzlich funktioniert der Code bei mir gut, allerdings kann ich ihn nicht als inline darstellen. Gebe ich statt block inline ein, sieht man gar nichts mehr (habe width und height bereits angepasst). Was ist dabei das Problem?
    Liebe Grüße!

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!