Tutorial: Social Media Buttons + Hover (Rollover)

Ich habe wirklich lange nach einer guten und einfachen Anleitung gesucht, aber keine gefunden. Daher dache ich mir, mache ich selbst eine, damit euch das erspart bleibt. Mein Tutorial ist für diejenigen unter euch, die einen Blogger-Blog besitzen. Ich werde erklären, wie ihr euch einen Button baut, der beim berühren die Farbe ändert und wie ihr diesen auf eurem Blog verlinkt.

1. Erst einmal brauchen wir Logos für die Buttons. Eine gute Seite ist diese hier. Einfach Rechtsklick auf die Bilder und dann "Speichern unter". Instagramm und Google+ Bilder findet ihr hier.

2. Jetzt geht's weiter zu picmonkey.com. Hier ladet ihr ein weißes Blatt hoch. Meines hatte die Maße 910x400px und war im JPG-Format. Wird später eh zurecht geschnitten.

3. Klickt auf "Overlays" und sucht euch eine Form für eure Buttons aus. Ich habe mich für einen Kreis entschieden, den ihr unter "Geometric" findet.

4. Im nächsten Schritt wählt ihr die Farbe aus. Dazu einfach den Kreis anklicken und es erscheint das Farbfenster.

5. Für den Randstreifen habe ich zwei weitere Kreise erstellt, jeweils etwas kleiner. Den mittleren habe ich weiß eingefärbt. Im Bild ist er rosa, da man ihn sonst nicht sehen würde.

6. Die Kreise werden übereinander gelegt und fertig ist der Streifen.

7. Jetzt werden die Logos hochgeladen. "Your Own" anklicken und Logo auswählen. 

8. Das Logo dann auf dem Button platzieren und einfärben.

9. Unter "Basic Edits" > "Crop" schneiden wir unseren Button zurecht. 

10. Jetzt passen wir noch die Größe unter "Resize" an. Wichtig ist, dass hier das Häckchen in "Keep proportions" gesetzt ist. Meine Buttons haben alle die Größe 40x39px. So bekomme ich in der Sidebar genau 5 nebeneinander. 

11. Zum Abspeichern gehen wir auf "Save".

12. Das Dateiformat PNG auswählen und abspeichern.

13. Wollt ihr kein Rollover, dann ist euer Button jetzt fertig. Für den Rollovereffekt fehlt uns aber noch ein Bild. Also geht's weiter.

14. Damit wir den Button besser bearbeiten können, vergrößern wir ihn wieder. Dazu unter "Resize" die Größe z.b. auf 100px setzen. 

15. Bei meinen Buttons soll sich die Logofarbe ändern, sobald man den Button berührt. Also wird das Logo rosa eingefärbt. Das macht ihr natürlich wieder unter "Overlays".

16. Unter "Basic Edits" nun wieder die Größe auf 40x39px ändern.

17. Abspeichern und fertig.

18. Die Buttons müsst ihr nun hochladen, z.B. bei photobucket.com.

19. Dann gehts zu Blogger.com. Unter "Layout" > "Gadget hinzufügen" > "HTML/JavaScript konfigurieren", verlinken wir jetzt unsere Buttons. Dazu brauchen wir diesen Code:

<a href="LINK" ><img src="URL_BILD1"onmouseover="this.src='URL_BILD2'"onmouseout="this.src='URL_BILD1'" /></a>

LINK: z.B. eure Facebookfanpage URL_BILD1: bei mir facebook1.png, also der erste erstellte Button (Directlink aus Photobucket) URL_BILD2: bei mir facebook2.png also der erste Button mit veränderter Logofarbe (Directlink aus Photobucket)

Hier mal ein Beispiel mit meinen Links:

<a href="https://www.facebook.com/MissSweetpetite" ><img src="http://i15.photobucket.com/albums/a390/ziiraa/facebook1-1.png" onmouseover="this.src='http://i15.photobucket.com/albums/a390/ziiraa/facebook2-1.jpg'" onmouseout="this.src='http://i15.photobucket.com/albums/a390/ziiraa/facebook1-1.png'" /></a>

Bei mehreren Buttons sieht's so aus: (einfach ein Leerzeichen zwischen die beiden Codes setzen)

Viel Spaß beim Buttons basteln ;)