Freitag, 23. September 2011

[Tutorial] Social Media Icons einfügen mit "dem alten Blogger"

→ Nachdem ich euch gezeigt habe, wie man im neuen Blogger aka "Blogger im Entwurf" diese niedlichen und überaus nützlichen Buttons im Blog einfügt, die den Besucher weiter zur eigenen Twitter-, Facebook- oder was-auch-immer-Seite leiten, gibt es heute die Version für das "alte Blogger". 
Und ja, ich war so frei, den Text vom ersten Tutorial teilweise 1:1 zu übernehmen, da einige Stellen ja identisch sind ;)




1. Bevor ihr startet, speichert ihr am besten erstmal eure Vorlage ab (das ist nie verkehrt, falls doch mal was schief gehen sollte).Dazu klickt ihr im Dashboard auf "Design" und dann bei "HTML bearbeiten" auf "vollständige Vorlage herunterladen".

2. Sucht euch nun als Nächstes geeignete Icons, je nachdem, zu welcher Seite euer Button führen soll. 
Meine sind von  Iconarchive.com. Aber es gibt natürlich auch noch andere Seiten dafür. Wichtig ist die Lizenz, darauf müsst ihr achten. Meine Icons sind Freeware, da geht man auf jeden Fall auf Nummer sicher.
Für das Tutorial benutze ich die Facebook-Seite von sunshine4life als Beispiel.

3. 
Wählt in eurem Blog Dashboard "Design" geht auf "Seitenelemente" und wählt "Gadget hinzufügen". Am besten in eurer Sidebar ganz oben. Je nachdem, wo die Icons auftauchen sollen. Aber das könnt ihr ja auch im Nachhinein noch wie ihr wollt verschieben.

4. In dem nun erscheinenden PopUp-Fenster wählt ihr "HTML/JAVA SCRIPT" aus. Das befindet sich direkt bei "Grundlagen".

5. Als Titel würde ich nichts eintragen (es sei denn, ihr wollt eine Überschrift über euren Buttons)
in das Feld darunter kopiert ihr folgenden Code:

<a href="https://www.facebook.com/mrssunshine4life"><img src="http://icons.iconarchive.com/icons/jankoatwarpspeed/handycons-2/32/facebook-icon.pngtitle="sunshine4life bei facebook"  alt="sunshine4life bei facebook" /></a>

Jetzt muss der Code noch für euer Blog angepasst werden!

6. Das im Code grün markierte ersetzt ihr durch die URL der Seite, zu der euer Link führen soll, also die Facebook-Präsenz eures Blogs oder was auch immer.
Also einfach die jeweilige Seite, zu der ihr Verlinken wollt, aufrufen, alles in der Adressleiste eures Browsers kopieren und das dann an Stelle des Grünen einfügen.

7. Das Gelbe bezeichnet das von euch gewählte Icon. Macht auf der "Iconseite" einen Rechtsklick auf das Icon eurer Wahl und wählt "Adresse des Links kopieren". Meine Icons sind 32 Pixel groß.
Jetzt ersetzt ihr den gelben Bereich durch den gerade kopierten Link.

8. Das Hellblaue wird angezeigt, sobald ihr mit eurem Cursor über das Icon fahrt. Also gebt dort ein, welcher (kurze) Text dann als Erklärung erscheinen soll. 
In meinem Fall ist es, wie ihr seht, "sunshine4life bei facebook". Das sagt alles aus, was der Leser wissen muss. Er wüsste dann also auch ohne das Symbol zu erkennen, wohin in das Icon führen wird :)

9. Und für den Fall, dass ein Icon mal nicht angezeigt werden sollte, gibt es das orange markierte. Damit wird einem beim Überfahren mit dem Cursor trotzdem angezeigt, was es mit dem Symbol auf sich hat, auch wenn man es (also das Symbol) in dem Moment nicht zu sehen bekommt. 
Da ich ja auch beim nicht-Anzeigen des Icons mitteilen will, dass man darüber zu meiner Facebook-Präsenz gelangt, habe ich auch hier, wie schon beim Hellblauen "sunshine4life bei bacebook" eingesetzt.

Das wars eigentlich auch schon.

Wenn ihr mehrere Buttons nebeneinander haben wollt, kopiert ihr einfach euren eben erstellten Code und fügt ihn nochmals in das selbe Feld ein. 
Ersetzt wieder das hier grün und gelb dargestellte durch die passenden Links und das Hellblaue und Orange durch die passenden kurzen Texte. Das wiederholt ihr, bis ihr alle Buttons, die ihr einsetzen wollt, nacheinander eingefügt habt.
Das Icon, was ihr als erstes eingefügt habt, taucht ganz links auf, das zweite Icon ist dann das zweite von links usw...

10. Geht auf "Speichern" und dann am besten direkt auf "Vorschau". Da könnt ihr schon mal sehen, ob die Buttons auf dem Blog auftauchen. Wenn ja, habt ihr diesen Teil schon mal richtig gemacht :)
Wenn euch das jeweilige Bild in diesem Moment nicht angezeigt wird, stimmt etwas mit eurem Code nicht. Vergleicht ihn dann nochmal mit meinem Code aus Schritt 5 und führt ggf. die Schritte 5 - 10 nochmal durch.

11. Wählt jetzt "Layout speichern" und "Blog anzeigen"
Nun seid ihr stolze Besitzer von Social Media Icons auf eurem Blog und könnt die Links direkt selbst überprüfen :D


Ich hoffe es war alles verständlich und übersichtlich?

Postet doch nen Link zu eurem Blog hier als Kommi, falls ihr dieses Tutorial verwendet habt. Ich freu mich und komm euch gern besuchen :D


1 comment

12. Mai 2014 um 20:08

Vielen Dank! Hast du vielleicht Lust auf gegenseitiges Folgen? Würde mich freuen!

Hello Bubzi

Kommentar veröffentlichen

Hey ho :) Teil mir deine Gedanken mit, ich freu mich!
Auch bei alten Posts! :D