Mittwoch, 21. September 2011

[Tutorial] Social Media Icons einfügen mit "Blogger im Entwurf"

Edit: Achtung Achtung, ab sofort mit optimiertem Code und mit schöner, übersichtlicher Nummerierung :D
Danke an Bene für Tipps und Tricks für ein Newbie wie mich :)

Hello, ich hoffe ihr hattet alle ein schönes Bergfest! Was das sein soll? Bergfest? Heute is doch Mitwoch...Nun denn...;b


Vor einer Eeeeeewigkeit hat  Bettina gefragt, wie ich das mit den Buttons in der Seitenleiste gemacht habe, die dann beim Anklicken direkt zu meinem Twitter-Acount, der sunshine4life Facebook-Seite oder ähnlichen Drittseiten führen.



Dazu muss ich im Vorfeld sagen, dass ich mich eigentlich eher ungenügend mit sowas auskenne. Ich google mich durchs www, suche mir Sachen und Codes, die mir für mein Vorhaben passend erscheinen, und gucke was beim Einsetzen passiert. 
Da kommt auch oft genug Mist bei raus. Aber wenn das der Fall ist, frage ich kurz  bei der lieben Angi. Die konnte mir bis jetzt immer supi weiterhelfen. Danke Honey, ich liebe deine Mails mit entwirrenden Screenshoots für mich ;D 
Dank dir weiß ich ja inzwischen auch die Bezeichnung für die Objekte dieses Tutorials ;)


Wie auch immer, nun soll es endlich soweit sein.
Die Schrittfolge, die ich euch heute zeige gilt, wenn ihr "Blogger im Entwurf" verwendet. Es unterscheidet sich zu der Schrittfolge bei dem "normalen" Blogger nur ein wenig in den Bezeichnungen, aber ich werde das trotzdem → nochmal separat posten :)


Den Code, den ich hier verwende, hab ich mir übrigens vom "Follow me on Bloglovin'-Button" abgeleitet. Ich weiß nicht, ob er optimal ist, aber er funktioniert prächtig ;D


Also, los gehts, ich versuche mich hiermit in meinem ersten Tutorial! Weeeeeee!


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 "Vorlage" und dann oben rechts in der Ecke auf "Backup/Wiederherstellung" und dann 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 "Layout" und dann "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 facebook" 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 vor allem fehlerfrei...;)
Ich nehme gerne Rückmeldungen dazu an (und editiere auch zur Not), schließlich bin ich noch nicht soo geübt.


Falls ihr das Verfahren erfolgreich auf eurem Blog angewandt habt, postet mir doch hier den Link als Kommentar, dann statte ich euch gern einen Besuch ab und freu mich, wenn ich helfen konnte :)



16 comments

22. September 2011 um 11:41

Passt. Nummeriert fände ich allerding noch etwas übersichtlicher :-)
Noch ein Tipp:
Dem Image-Tag ('img .../') noch ein title- und ein alt-Attribut hinzufügen. Z.B.:
'img title="sunshine4life bei facebook" alt="sunshine4life bei facebook" "src="http://icons.iconarchive.com/icons/jankoatwarpspeed/handycons-2/32/facebook-icon.png" /'
Der "title"-Text erscheint wenn du mit der Maus über das Bild fährst.
Der "alt"-Text erscheint falls das Bild mal nicht (oder noch nicht) geladen werden kann.

p.s. eckige Klammern darf man leider nicht in Kommentaren posten, ich hoffe es geht auch ohne :-)

22. September 2011 um 19:09

Aaaaah! Ja danke, das werde ich doch direkt mal editieren bzw. optimieren :D
Merci beaucoup!

23. September 2011 um 10:05

Supi, direkt ausprobiert und hat auf Anhieb geklappt.

Vielen Dank nochmal *freu*

11. Januar 2013 um 14:30

Eine super Hilfe :)
Weißt du zufällig auch wie man einen verschollenen Blog wiederfindet?
Musste gestern erschrocken feststellen das mein Original verschwunden ist :)

15. Januar 2013 um 15:33

Bestes Tutorial ever!!!!!! Vielen vielen lieben Dank!!!

16. Januar 2013 um 22:20

@Patricia E. Danke :) Was genau meinst du mit "Original verschollen"?

16. Januar 2013 um 22:21

@Bettina Ui, danke :D Freut mich, wenn ich helfen konnte!

10. Februar 2013 um 21:31

Hallo ... damit habe ich mich auch gerade längere Zeit beschäftigt. Und als nun endlich alles klappte, merkte ich, dass die ICONS mobil nicht angezeigt werden. Kannst du (oder jemand deiner Leser/innen) mit dabei vielleicht helfen? :)

14. Februar 2013 um 22:13

@Something Pearly Hi, ich fürchte, dass ich dir da leider nicht wirklich helfen kann :(

13. April 2013 um 13:55

Hallo, dein Post ist wirklich sehr hilfreich. Meine Frage wäre, ob das auch mit Bilder/ Icons klappt die man selbst bei Photoshop erstellt hat und dann nur auf dem PC speichert ohne sie irgendwo anders zu laden!?

23. April 2013 um 00:23

@Freulein Dietmar Hi Freulein Dietmar, danke, das freut mich zu hören :)
Soweit ich mich erinnern kann (dass ich mir das alles mit den Icons zusammengesucht und ausprobiert habe, ist schon ein wenig her;)) kann man auf jeden Fall eigene Icons verwenden, muss sie aber tatsächlich leider "irgendwo anders" hochladen.
Wo genau, müsste ich auch erst noch rausfinden :)

Liebe Grüße

27. Dezember 2013 um 17:05

Super Klassse. Ich habe lange gesucht und die Erklärung ist Top! Danke

Liebe Grüße


12. Februar 2014 um 17:38

vielen lieben Dank , für dieses Tutorium! Es war sehr hilfreich =) Liebe Grüße

15. Februar 2014 um 21:58

@Julius C Danke, ich freu mich echt über jeden einzelnen, dem ich weiterhelfen konnte :D

Liebe Grüße zurück :)

15. Februar 2014 um 22:00

@ni4ka-klubni4ka Danke, das freut mich :)
Liebe Grüße zurück

4. März 2014 um 14:59

hey danke für das ausführliche tutorial!
ein problem hab ich allderings nach wie vor. wenn ich alle codes in einem gadgetfeld einfüge, passiert es jedes mal das 2 meiner 4 icons ein paar millimeter höher stehen als die anderen und leider nicht genau in einer reihe :/ weisst du wie ich das ändern könnte?
liebe grüße, charlotte
queen-of-gugelhupf.blogspot.co.at

Kommentar veröffentlichen

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