Tutorial - Social Media Buttons einbinden

Hallo meine Lieben!

Heute möchte ich das erste "How to..." Tutorial auf meinem Blog veröffentlichen. In den letzten Tagen habe ich mich ein wenig mit Blogger und dessem Eigenheiten beschäftigt (bzw. ich lag krank im Bett und habe ein wenig am Layout etc. rumgefriemelt).
Eine Sache, die ich schon immer auf meinem Blog haben wollte, ist ein Gadget mit den Social Media Buttons. Ich finde sie unheimlich praktisch und der Blog wirkt dadurch etwas aufgeräumter. Lange Rede, kurzer Sinn: "Selbst ist die Frau" und heute zeige ich euch wie man diese in Blogger einbindet.

Als aller erstes braucht ihr Social Media Buttons. Es gibt unzählige Seiten im Internet wo ihr sie kostenlos downloaden könnt. Ich habe diese hier verwendet. Weitere schöne Buttons bekommt ihr hier, hier und hier.

Wenn ihr sie heruntergeladen habt entpackt ihr den Ordner. Nun könnt ihr auf jeden einzelnen Button zugreifen. Jetzt kommt ein Image-Hosting Service ins Spiel. Ich habe Photobucket dazu verwendet, dieser ist kostenlos und einfach zu bedienen. Dort ladet ihr jetzt jeden Button hoch, den ihr später auf euren Blog einbinden wollt. Wenn ihr alle hochgeladen habt, könnt ihr jeden einzelnen Button anklicken, damit ihr es im Einzelmodus seht. Dies sollte dann so aussehen:

Dies ist ganz wichtig, weil wir nachher die URL des Bildes/Buttons brauchen.

Nun öffnen wir Blogger. Über das Dashboard gelangen wir zu "Layout". Danach wählen wir "Gadget hinzufügen" aus.

Aus der Auflistung der verschiedenen Gadgets wählen wir "HTML/JavaScript".

Jetzt folgt der Text, den ihr dort eingebt:

<a href="URL des Links" target="_blank"><img src="URL des Bildes"></a>

So sieht dies dann im geöffneten Gadget Fenster aus:

Die "URL des Links" ist euer Ziellink. Sozusagen die Seite, zu der ihr verlinken wollt. In meinem Fall ist dies mein Twitter-Account.
Die "URL des Bildes" ist der direkte Link von der Photobucket Seite. Wie hier zu sehen ist, habe ich den Twitter Button ausgewählt.

So sieht es eingesetzt aus:

So macht ihr es mit allen Buttons, die ihr auf eurem Blog haben wollt. Dazu reiht ihr die augefüllten Links einfach aneinander. Das sollte dann ungefähr so aussehen:

Jetzt müsst ihr sie nur noch speichern und per "Drag & Drop" an die Stelle des Layouts ziehen, an der sie sein sollen und schon seid ihr fertig!

Ich hoffe dieses kleine Tutorial konnte ein wenig Klarheit stiften!

Habt noch einen schönen Abend!