Gerade erst hatte ich euch geschrieben, dass ich im Moment nicht zum bloggen komme weil das Leben gerade etwas schneller ist als ich, schon erreicht mich ein Gastpost von der lieben Sandra. Ich finde es einfach toll, dass meine Leser mir auf diese Art etwas Zeit schenken. Danke liebe Sandra!Nun aber zu ihrem Post:
Guten Morgen alle miteinander!Ich habe heute die Ehre hier einen Gastpost veröffentlich zu dürfen, und zwar zu schwebenden Social Media Buttons mit Mouseover. Falls ihr euch unter dem Begriff nichts vorstellen könnt, könnt ihr euch das Ganze live auf meinem Blog ansehen und ausprobieren. Bevor ich noch ganz vergesse, mich vorzustellen - ich bin Sandra von Pusteblume?, manche kennen mich vielleicht von meinem chaotischen Blog, wo ich hauptsächlich über Bücher schreibe, aber auch über das Bloggen oder das Dasein von Staubflusen philosophiere. Nee, tu ich natürlich nicht, aber ich schreibe sehr gerne auch Laberposts, in denen ich mich über die verschiedensten Dinge auslasse.
Anke hat ja selbst in ihrer Sidebar ihre Social Media Buttons eingebettet. Bei den schwebenden Social Media Buttons ist es so, dass sie nicht an die Sidebar gebunden sind, sondern ihnen sozusagen ein fixer Platz am Bildschirm zugeteilt worden ist, heißt: sie scrollen mit.Der Mouseover-Effekt oder auch Bildhover macht auch immer wieder was her. Das bedeutet einfach, dass die Buttons, wenn man mit der Maus drüberfährt, die Farbe ändern. (Eigentlich beschreibt es den Übergang zwei verschiedener Bilder ineinander, aber da wir zwei Bilder nehmen, die sich nur aufgrund der Farbe unterscheiden, kann man ganz ohne schlechtes Gewissen sagen: sie ändern einfach ihre Farbe.)
Schritt 1: Einfügen des Codes
Den unten stehenden Code fügen wir in einem HTML/Javascript-Gadget ein (Layout → Gadget hinzufügen → HTML/JavaScript). Macht euch noch keine Gedanken, die wichtigsten Begriffe erkläre ich gleich unten.<style>#floatbubble {position:fixed; right: 5px; bottom: 10px; 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(LINK ZUM NORMALEN BILD EINFÜGEN); } #bloglovin a:link {background-image:url(LINK ZUM NORMALEN BILD EINFÜGEN); } #facebook a:link {background-image:url(LINK ZUM NORMALEN BILD EINFÜGEN); } #mail a:link {background-image:url(LINK ZUM NORMALEN BILD EINFÜGEN); } #rss a:link {background-image:url(LINK ZUM NORMALEN BILD EINFÜGEN); } #google a:link {background-image:url(LINK ZUM NORMALEN BILD EINFÜGEN); } #twitter a:link {background-image:url(LINK ZUM NORMALEN BILD EINFÜGEN); } #instagram a:link {background-image:url(LINK ZUM NORMALEN BILD EINFÜGEN); } #formspring a:link {background-image:url(LINK ZUM NORMALEN BILD EINFÜGEN); } #blogger a:hover {background-image:url(LINK ZUM HOVERBILD EINFÜGEN); } #bloglovin a:hover {background-image:url(LINK ZUM HOVERBILD EINFÜGEN); } #facebook a:hover {background-image:url(LINK ZUM HOVERBILD EINFÜGEN); } #mail a:hover {background-image:url(LINK ZUM HOVERBILD EINFÜGEN); } #rss a:hover {background-image:url(LINK ZUM HOVERBILD EINFÜGEN); } #google a:hover {background-image:url(LINK ZUM HOVERBILD EINFÜGEN); } #twitter a:hover {background-image:url(LINK ZUM HOVERBILD EINFÜGEN); } #mail a:hover {background-image:url(LINK ZUM HOVERBILD EINFÜGEN); } #instagram a:hover {background-image:url(LINK ZUM HOVERBILD EINFÜGEN); } #formspring a:hover {background-image:url(LINK ZUM HOVERBILD EINFÜGEN); } </style> <div id="floatbubble"><div id="blogger"><a href="http://kleine-blogger-hilfe.blogspot.de/feeds/posts/LINK ZU BLOGGER" target="_blank"></a></div><div id="bloglovin"><a href="http://kleine-blogger-hilfe.blogspot.de/feeds/posts/LINK ZU BLOGLOVIN" target="_blank"></a></div><div id="facebook"><a href="http://kleine-blogger-hilfe.blogspot.de/feeds/posts/LINK ZU FACEBOOK" target="_blank"></a></div><div id="mail"><a href="mailto:DEINE EMAILADRESSE" target="_blank"></a></div><div id="rss"><a href="http://kleine-blogger-hilfe.blogspot.de/feeds/posts/LINK ZU RSS" target="_blank"></a></div><div id="google"><a href="http://kleine-blogger-hilfe.blogspot.de/feeds/posts/LINK ZU GOOGLE" target="_blank"></a></div><div id="twitter"><a href="http://kleine-blogger-hilfe.blogspot.de/feeds/posts/LINK ZU TWITTER" target="_blank"></a></div><div id="instagram"><a href="http://kleine-blogger-hilfe.blogspot.de/feeds/posts/LINK ZU INSTAGRAM" target="_blank"></a></div><div id="formspring"><a href="http://kleine-blogger-hilfe.blogspot.de/feeds/posts/LINK ZU FORMSPRING" target="_blank"></a></div></div>
Grundsätzlich könnt ihr den Code für alle beliebigen Social Media Buttons verwenden. Ich selbst verwende die Buttons von care about what? und finde diese auch sehr praktisch, weil gleich beide Bilder (Normalzustand und Hoverzustand) vorhanden sind. Heißt weniger Arbeit für euch.
Wollt ihr allerdings andere Buttons verwenden - die hier zum Beispiel - dabei aber den Hovereffekt beibehalten, ist das auch kein Problem. Dazu müsst ihr eine Schwarz-weiß-Kopie des Bildes erstellen und abspeichern, das könnt ihr mit so ziemlich jedem Bildbearbeitungsprogramm machen (ich nutze Picmonkey).
Begriffserklärungen
#floatbubble {position:fixed; right:5px; bottom: 10px; width:50px; z-index:999;}#floatbubble a {display:block; width:50px; height:50px; background-position: center; background-repeat: no-repeat; white-space: nowrap;}left oder right: Position der Buttons am linken oder rechten Bildschirmrand5px: Abstand der Buttons zum seitlichen Bildschirmrand; größere Zahl = größerer Abstandbottom: 10px: Abstand der Buttons zum unteren Bildschirmrand; größere Zahl = größerer Abstandheight: 50px: Abstand der einzelnen Buttons zueinander
________________________________________________________________________________________________________________
<div id='...'><a href="LINK ZU ..." target="_blank"></a></div>
a:link: alles, was a:link beinhaltet, kennzeichnet den Normalzustand (wenn mannicht mit der Maus drüberfährt)a:hover: alles, was a:hover beinhaltet, kennzeichnet den Hoverzustand (wenn man mit der Maus drüberfährt)LINK ZU DEN BILDERN EINFÜGEN: genau genommen ist hier die URL gefragt; bei care about what? kann man die URLs ganz einfach rauslesen, (z.B. https://lh4.googleusercontent.com/-4SPqMPRTM-I/UMybVXmuUwI/AAAAAAAAFUo/AI6vj-VfMEc/s45/bloglovin.png), ansonsten: Rechtsklick → Bild-URL kopieren...: stehen für den individuellen Namen (blogger, facebook, twitter, etc)
LINK ZU ...: endgültiger Link, wohin der Button führen soll (z.B. http://www.bloglovin.com/blog/4068488)
target="_blank": bewirkt, dass sich der Link in einem neuen Tab öffnet, euer Blog also nicht geschlossen wird
2. Schritt: Anpassen und optimieren
Jetzt wisst ihr ungefähr, welche Sache wofür gut ist, oder? Nun ist es wahrscheinlich so, dass ihr nicht alle sozialen Netzwerke nutzt, für die Buttons vorhanden sind, also kann man sie logischerweise löschen.Wollt ihr beispielsweise Instagram rausnehmen, löscht ihr alle drei betreffende Abschnitte des Posts:- den Bildlink (#instagram a:link {background-image:url(LINK ZUM NORMALEN BILD EINFÜGEN); })
- den Hoverlink (#instagram a:hover {background-image:url(LINK ZUM HOVERBILD EINFÜGEN); })
- den endgültigen Link (<div id='instagram'><a href="LINK ZU INSTAGRAM" target="_blank"></a></div>)
