Türchen 3: Schwebende Social Media Buttons

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 :)

<style> #floatbubble {position:fixed; left: 7px; bottom: 1px; width:50px; z-index:999;} #floatbubble a {display:block; width:50px; height:50px; background-position: center; background-repeat: no-repeat; white-space: nowrap;} #blogger a:link {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgchs-EFo4BT3gbRDgUNtVAYMtbRpFJSDPMYcUKYXNZXpmeFe7ZInH0zM4uLcdepHufrlPZRiqIGX7WlGERNGr32Qsxo7MyFDWDhE3CAUGU8ZebAvJdPPIBb3Zso7O02NuPmm7Myvz1cLRc/s45/blogger.png ); } #bloglovin a:link {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgki6YdBNHXtVTbxE5lQltrTIM3GKdy3z97fHtq7JnoXcPo8RLZOFLpF11k-YW5cYALPcvcoj9pNrPwKUwu2GRVvdNJ1vUnZtQgBfYaMoMKXI4TG1IaaUfeuMBCazzaHr61o6hyphenhyphenkaWPL8Og/s45/bloglovin.png ); } #facebook a:link {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5FpHm2Hz7dvHz6o3KIyUUzayqsS_TknnwFRTB1hFq0JaH-TdE8QcGbCyBQvM6jLJv_E4RlFDRf_-S3U3ysB6xj59tUd4jBMcIlpcOQD5iLO3-agUKER50IRgFmnR9Xj2sKas-Sk1iWxKw/s45/facebook.png ); } #flickr a:link {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMikPktTio2G8a3lm961ZyapTNhjyDGCy-wvRetBQZKxq-XCvFagIjtxu6KHpz5TneqtfiDmq9EVLbYm2yH7gNeTc7kyrD9U6m4pRBzihVn8K_L8hwbaRqs4p8AjezUu6uabO7u9mmA8oz/s45/flickr.png ); } #instagram a:link {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUEIpVbO6P-tRPQkojtnVN_IvSf4kcxw9oAjRR-keREbAymFpO5_n5dFlBe8DPwu8sxiVK8xjNa8HBzh5HRlYx9ZQC66SlXth8Yxq6Y-b_lO9Q1hpJ8Ny8PRUEfAtwmdMa8q3VOX961S6C/s45/instagram.png ); } #formspring a:link {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJaKO_dR3gRWauB-XXG16PokyV5iZtXvdMD_CTYKUR0w0qS_7c26vqDCgqnUwLtdaH_2HmxgIu-0F4ttvEQ1on2TAaNyekHR3DVcnGQRk42zwzrexcR8GN57qVOGYrMBrnDuO7TYhzLw_u/s45/formspring.png ); } #google a:link {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXI9h7ihyUVDHQC3zadGS3D6v4dPtdNuRJ2sftgMqu4spizBflc33kJQVVjEFKWb2wf-DFUO3BOLKMk-ZVikkeAFopxeh2CToRfeYm7cuCqLzCrvUQwPIvCKJB38GEKOlGU0bRMD7G2pxI/s45/google.png ); } #tumblr a:link {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhziDWNv0k7apZDmFVjusrif06aiRNEAit7elNMlKwGky-FYAYnfwBy7SGisYEm3pTqfAADgr4g3cD8A7IGbjc63DZ9i9OXfFzst6JeKRVjihdHeRD1-g3RKDcrDmIyzTp2CgcTLewZj-KG/s45/tumblr.png ); } #twitter a:link {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG_vj95KNWKfVp_ZKhlaMYEpF5Aa0qsb6dnt6etVwETIlxWH_r_szE2vsgomV_0GBlb2UT88J8jxyMipQUvMgIcSr4O28N7RWvtcZdXfbsK-L7OnYD40EEpNIRi3-aJvxssP-NHWe-dB5g/s45/twitter.png ); } #mail a:link {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnd-Zo_85iwk7FHWJdlPlk2SV1zEPdp-SuikS_Fw2iS4f2uslu3FFfBzj177Ir4zhb5z_t7_d4XzfRAt83jnKEyPOw9tD18vfeqKyDC5h_1p1rLQjD5r_x6qRjtZs8Pp5JIDdwRLMO92yA/s45/mailto.png ); } #blogger a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgot4vn5vIbOioT2qak63Ei4d1jUhbTicjBIxi1zxbB83wSv6Wav74oLAJ_IWtK_qbmCnPfelJ9wGSAbRfbkRnwpEKIlsOKzylOTQ3sC-0P174bgz20y40nmfN2z_ttlBy9-PjYFQvY_SUd/s45/blogger2.png ); } #bloglovin a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7cGQhJBJA8ew_EC3MSQmmGIJWxgnxXv1_ZHS-2dm2QAQeLdHE0HgCGD_N-MkuAXifPnErAd0nniAm-MZc3bTeynMVuQMZkG0RdsmksXW01l3wN6kf135vV9r_sok3xHhr6Yhu9bO60Jg3/s45/bloglovin2.png ); } #facebook a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1cn0TcmhkghAY6nc5Blvb1KXkzU-pCUG7mFxmDU5xVDSsiEq4aZlBNANwhkXtG7aIRUT8wH7665LfUzBHAJvC_xCBuc7D7misDgoDCEEF9-jby6p1NEfmBlchZu_M6bbKqCLIztwA0Ms/s45/facebook2.png ); } #flickr a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTfcaVeimGhLonbG5JWbPATtev_Sgk0DC9ZrOmkqH4eKSLzHO8vqq0TspDXJzHpGWBnppS5IQL_IFZ2tTDE40kFalqMdHH9zQLeHRtrdxND6l30T1MniW_slgYseR0Hjx6EeyejEIZ5cV/s45/flickr2.png ); } #instagram a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidos3Riap9bQw-bw4mUNYIFW6dNzID3G7cqxSy6VIqSHlsTE-JbVOgVh-L-6wSFW5xC9SWD5BKkKRTTreNJDu1H1xGYolBbqNXTAjwryMBcZB4pGYcDzrMGQuuwJigeCQmwgwgTkMtkm5b/s45/instagram2.png ); } #formspring a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPZWfB3Z0JN8W4uCOSxIKHi4XUfwWfU8XkkMOSIYdWmdn5Y5ICqckn1ToGEPu3znjB5Y3faKROUC_XoaCKa3XXjFIBkakeQoVJL8HEexZimsyMzPHnX_-q4eYhMuSFlISGoeDjmXNNIs9I/s45/formspring2.png ); } #google a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5w30ZlnsKo3LFwHcz8p-av1ssKCfd1Lz9xIYx1bojlzKejA1x4E_UW1CrFTYU2o0wiuMNCOKcoJtPNnxhc7RyY45lzEmE_54hHgY-T1KVlJ7wo485Aeerl7GuWpZvfbt5cBhNjqsOVQgq/s45/google2.png ); } #tumblr a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4zJdf4YzLoAxdaIdmGiQH8UByYWLlRJc4qMFqh1R7XtVvDfozDXRTIRM50Hoo7Flh2sEMRBjF1fPSON22IfMnFd8C1xMGb0I7u0e-ujBWQ8am2RNhGlK0vpsQTb7aDFgqO8HksjXYD6WD/s45/tumblr2.png ); } #twitter a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLBA1ufGmIb6_V6_wmHmDdc1ky4VbeY_zD7c2dYj586UWOauQOlsYnPJXrqLbANGCyKtEgsz51KmzEWkHveVJHnRoleZBb3OggfMp9dWP75tdR97J4gL5l6Ey54lX9w7oKpn9inOx97nqI/s45/twitter2.png ); } #mail a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfO5LmO3PiGvb4di67zpe5oQsP4DrFf7OyuEQk8rV-r6LtpfOJ4BUtrfr7d6LfEELgiKhZkk_eQEGmMDIuNgbJiVZo9r17KyzQWQ40nRaw8AZX2nV7ihXVu8kRuSQp4vSrZfw8KxD0kvIW/s45/mailto2.png ); } </style> <div id='floatbubble'> <div id='blogger'> <a href="BLOGGERLINK" target="_blank"></a></div> <div id='bloglovin'> <a href="BLOGLOVINLINK" target="_blank"></a></div> <div id='facebook'> <a href="FACEBOOKLINK" target="_blank"></a></div> <div id='flickr'> <a href="FLICKRLINK" target="_blank"></a></div> <div id='instagram'> <a href="INSTAGRAMLINK" target="_blank"></a></div> <div id='formspring'> <a href="FORMSPRINGLINK" target="_blank"></a></div> <div id='google'> <a href="GOOGLELINK" target="_blank"></a></div> <div id='tumblr'> <a href="TUMBLRLINK" target="_blank"></a></div> <div id='twitter'> <a href="TWITTERLINK" target="_blank"></a></div> <div id='mail'> <a href="mailto:EMAILADRESSE" target="_blank"></a></div> </div>


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 :*