Fixierte Followerbuttons ♥♥♥

Auf meinem Blog gibt es fixierte Follower-Buttons, also Buttons, welche "mitschweben", auch wenn der Besucher scrollt.
Das kann sehr praktisch sein, denn in meinem Fall stören sie dort nicht, sind aber für den Blogleser immer im Sichtfeld.

Die Buttons habe ich selbst gestaltet, doch es gibt auch jede Menge Seiten, die Social-Media Buttons anbieten. In diesem Tutorial soll es jedoch nicht um die Buttons an sich, sondern darum gehen, wie man diese auf dem Blog einbinden kann.



Zunächst einmal benötigt ihr einen HTML-Code.

right bedeutet, dass wir den Container rechts positionieren. Möchtest Du ihn links, gib einfach "left" ein. Die Zahlen stehen für den Abstand vom Rand.
top steht für "oben". Möchtest Du ihn unten, gib "bottom" ein. Auch hier steht die Zahl wieder für den Abstand.

<style>
#floatlink {
position:fixed;
right: 10px;
top: 10px;
z-index:10;
}
</style>
<div id="floatlink">
<a href="http://www.facebook.com/DEINESEITE" target="_blank"><img src="DEIN_BILDLINK" width="50"/></a>
<br />
<a href="DEIN_TWITTERFOLLOWLINK" target="_blank"><img src="DEIN_BILDLINK" width="50"/></a>
<br />
<a href="http://www.blogger.com/follow-blog.g?blogID=DEINE_BLOG_ID" target="_blank"><img src="DEIN_BILDLINK" width="50"/></a>
<br />
<a href="http://blog-connect.com/a?id=DEINE_BLOG-CONNECT-ID" target="_blank"><img src="DEIN_BILDLINK" width="50"/></a>
<br />
<a href="http://www.bloglovin.com/en/blog/DEINE_NUMMER" target="_blank"><img src="DEIN_BILDLINK" width="50"/></a>
</div>

Möchtet ihr einen der Followerdienste nicht benutzen, so entfernt einfach den Code von <a href bis </a>.
50 steht hier für die Größe der Bilder. Wollt ihr sie größer/kleiner haben, ändert einfach diese Zahl bei jedem Link ab.

Falls ihr nicht weißt, wie ihr an die benötigten Links kommt, hier eine kleine Zusammenfassung:


Facebookseite
Öffne Deine Facebook-Seite und kopiere den Link in der Leiste.

Twitterfollowerlink

Öffnet eure Twitter-Account-Seite.

Links in der Spalte findet ihr diesen Kasten. Klicke auf "Unternehmen"

-> Resources and Widgets

-> See all Follow buttons






-> Folgen






-> Rechtsklick auf den Followerbutton und "Link kopieren"

Diesen Link fügt ihr unter "DEIN_TWITTERFOLLOWERLINK" ein.

Blog-ID
Öffnet eure Blog-Übersicht. Oben in der Leiste findet ihr eure Blog-ID.
Fügt sie ein.

Blog-Connect ID
Öffnet Blog-Connect.
Klickt unter eurem Namen den entsprechenden Blog an.



Die ID findet ihr nun in der Browser-Leiste:






Bloglovin-Nummer

Drückt unter Account auf "Follow Buttons"

Wählt einen beliebigen aus und klicke "Get this icon!"

"Add Widget" 

Klickt auf "Inhalt bearbeiten", damit sich dieses Fenster öffnet. Eure Bloglovin Nummer findet ihr hier.

Habt ihr alle Links eingefügt (Bild-Links nicht vergessen! Habt ihr eigene Icons gestaltet, so ladet sie auf einer Seite wie z.B. Directupload.net hoch. Wichtig bei Directupload: "Weitere Verlinkungsmöglichkeiten"->"Direkten Bildlink" (Letzte Option)), müsst ihr "nur noch" das Gadget hinzufügen.
Geht hierfür auf "Layout"-"Gadget hinzufügen"->"HTML-Gadget"

Fügt dort den Code ein. Fertig!

Wenn die Icons nebeneinander sein sollen, müsst ihr nur das <br /> zwischen den einzelnen Codes entfernen.

Bei Fragen zu diesem Tutorial könnt ihr euch jederzeit an Jennie@cplove.de wenden.