About Tutorialübersicht Labels Header Goodies Tutorialwünsche

Türchen 3: Schwebende Social Media Buttons

Sonntag, 16. Dezember 2012

Ihr lieben Leserchen, als wir (das Care about what-Team) uns die Adventsaktion überlegt haben, habe ich mir gedacht (weil ich ja sonst nichts kann :D) dass ich euch ein paar Social Media Buttons mache, aber nicht so langweilig wie hier. NEIN! Diesmal mit ganz vielen Extras.
Erstens: Sie schweben am Rand eures Blogs.
Zweitens: Sie haben ein Mouseover (heißt sie verändern sich wenn man mit der Maus drüber fährt)
Drittens: Es ist für jeden was dabei, 10 Buttons zum aussuchen!
Da es schwer ist, sie hier in den Post einzubinden, schaut sie euch HIER LIVE AN! oder auch hier auf meinem blog mit wenigeren. Wollt ihr diese Buttons? Weiterlesen!

Hier könnt ihr den Code bekommen :)



Um ihn einzufügen, geht ihr auf Layout > Gadget hinzufügen > HTML/JavaScript konfigurieren. 
Ich erklär euch jetzt noch kurz, wie der Code funktioniert, und wie ihr ihn an euren Geschmack anpassen könnt.  

Im ersten Teil, seht ihr die Information zu der Position eurer Buttons. Ihr könnt also left mit right austauschen, wenn ihr sie lieber rechts haben wollt. Außerdem könnt ihr das erste width:50px verändern, wenn ihr die Buttons weiter weg oder näher dran an den Rand des Bildschirms haben wollt (größere Zahl heißt weiter weg). (Edit von Theresa: bei width:50px wird der Platz zwischen den Buttons größer. left: 7px gibt den Abstand zum linken Rand an und bottom: 1px den Abstand zum "Boden". Ihr könnt daraus mehr machen, indem ihr die Zahl vergrößert!)
Wenn ihr einen oder mehrer Buttons entfernen wollt (wenn ihr zum Beispiel kein tumblr oder flickr oder sonst was habt.) dann müsst ihr überall wo der name von dem Social Media steht enfernen, also im 2-4ten teil.  Beispiel: Ich möchte kein tumblr haben.



Dann lösch diese drei Teile:
#tumblr a:link {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhziDWNv0k7apZDmFVjusrif06aiRNEAit7elNMlKwGky-FYAYnfwBy7SGisYEm3pTqfAADgr4g3cD8A7IGbjc63DZ9i9OXfFzst6JeKRVjihdHeRD1-g3RKDcrDmIyzTp2CgcTLewZj-KG/s45/tumblr.png ); }
#tumblr a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4zJdf4YzLoAxdaIdmGiQH8UByYWLlRJc4qMFqh1R7XtVvDfozDXRTIRM50Hoo7Flh2sEMRBjF1fPSON22IfMnFd8C1xMGb0I7u0e-ujBWQ8am2RNhGlK0vpsQTb7aDFgqO8HksjXYD6WD/s45/tumblr2.png ); }
<div id='tumblr'> <a href="TUMBLRLINK" target="_blank"></a></div>

Ihr müsst bei allen <a href="...LINK" target="blank" .. und so weiter den Link zu eurem tumblr, facebook, blogger etc. einfügen

Wenn ihr Fragen habt, sagt doch einfach Bescheid, ich werde euch gerne helfen. Ich hoffe sie gefallen euch! :) Frohen Dritten Advent, Martha :*


18 Kommentare:

  1. Endlich ich habs nämlich nie verstanden wie man das macht DANKE !!<3

    AntwortenLöschen
  2. wie cool *-*
    Danke ich werde es mal ausprobieren :))
    LG <3

    AntwortenLöschen
  3. Danke für diese Buttons <3 dank euch habe ich ein paar echt coole Goodies für meinen Blog ♥ vielen lieben Dank - auch für so viel Hilfe mit HTML & co. :)


    Liebste Grüße,
    Flo

    AntwortenLöschen
  4. SUPER - ich habe mich nie getraut, etwas auszuprobieren!
    Mit dieser einfach Anleitung habe ich es versucht .. und es hat funktioniert!

    Vielen Dank und vorweihnachtliche Grüße,

    Isabella mit Damon und Laika

    AntwortenLöschen
  5. Die Buttons sind echt schön! Wir benutzen sie nun auch :) Gibt es auch einen Button für blog-connect?
    Liebe grüße!

    AntwortenLöschen
  6. Oh, die sind super! Genau das habe ich gesucht! :D
    Das einzige was mir fehlt ist ein YouTube-Button, ist aber nicht so schlimm, die Dinger sind trotzdem genial. Danke :)

    xoxo Jana.
    [Dosen't Stop]

    AntwortenLöschen
  7. Ich habe es genau so gemacht wie in der Anleitung. Bei mir kommen jedoch nur die ganzen Codes rechts hinstehen anstelle von den Buttons. Kann mir irgendjemand helfen bitte? Einfach via Mail schreiben: mademoisellediy@yahoo.de

    Vielen Dank
    Lia

    AntwortenLöschen
  8. Funktioniert super und sieht schick aus. Aber man sieht das Gadget, wo ich den Code eingefügt habe, als schmales weißes Feld in meiner Sidebar. Kann man das irgendwie lösen, oder muss man damit leben?

    AntwortenLöschen
    Antworten
    1. Ok, habs erstmal so gelöst, dass ich den Code in ein bereits existierendes Gadget mit eingefügt habe. Icons sind da und das "leere" gadget ist weg.

      Löschen
  9. ich habs ausprobiert, den code bearbeitet usw. und es passiert nichts :( auf meinem Testblog ist nichts zu sehen... kann mir jemand behilflich sein?

    AntwortenLöschen
  10. Tolles Tutorial! Du hast mir komplett geholfen! Danke!

    AntwortenLöschen
  11. Bei mir hat es auch geklaptt ,nur wenn ich auf die Buttons klicke, dann komme ich natürlich auf die gewünschte Seite ,aber dann sind die Buttons weg bzw. unsichtbar . Das ist doof :/

    www.wondering-ann.blogspot.com

    AntwortenLöschen
  12. Die Buttons sind superschön! Danke!! :)

    AntwortenLöschen
  13. Die Buttons sind echt schön und endlich habe ich das auch mal hinbekommen.Danke!

    Liebe Grüße

    AntwortenLöschen
  14. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  15. Ich habe es für meinen Blog genutzt und es sieht klasse aus! :) danke

    AntwortenLöschen
  16. Viele Dank für das "Tool". ;)
    Hast du auch noch einen Pinterest-Button in dem gleichen Stil? Das wäre klasse!

    Liebe Grüße
    Anja

    AntwortenLöschen
  17. Vielen Dank für das super Tutorial! Hab es gleich angewendet :) Schade, dass es keine Pinterest und Lovelybooks oder Amazon Buttons in diesem Stil gibt. Dennoch klasse <3

    AntwortenLöschen