Samstag, 5. April 2014

Social Media Icons in die Sidebar einbinden

Erstmal benötigt ihr die Grafiken für die Social Media Icons. Diese könnt ihr euch entweder selbst gestalten oder ihr sucht euch kostenlose Icons aus dem Internet.

Achtet darauf, dass die Icons auch wirklich für den Gebrauch auf kommerziellen Webseiten erlaubt sind, damit es keine rechtlichen Probleme gibt. Eure Webseite bzw euer Blog ist kommerziell, wenn ihr einen Shop darauf eingebunden habt oder anderweitig konkrete Angebote / Dienstleistungen über den Blog anbietet.

Kostenlose Icon-Sets findet ihr z.b. hier:

40 Sets of Free Social Media Icons
125+ Best Free Social Media Icons Buttons
20 Free Social Media Icon Sets to Use on Your Website

Ladet euch die Icons herunter und entpackt den Ordner. Ihr braucht JPG, GIF oder PNG-Dateien für den Upload.

In diesem Icon Pack habt ihr Icons in verschiedenen Größen enthalten. Somit können die Icons gleich in den Blog eingebunden werden und müssen nicht mit einem Grafikprogramm bearbeitet werden. Die Icons werde ich jetzt hier im Workshop-Blog einbinden (Achtung: dieses IconSet kostet für den kommerziellen Gebrauch 3$! Wenn ihr es bei euch verwenden wollt, solltet ihr es vorher kaufen, um auf der sicheren Seite zu sein). Es gibt sicherlich auch kostenlose Iconsets mit vorgefertigten Grafiken, aber ich gehe bei sowas lieber auf Nummer sicher.

Nach dem Download entpackt ihr den .zip Ordner und habt dann die Icons in verschiedenen Größen vorliegen:


Für den Blog werde ich die Icons in Größe "48" verwenden.


 

Icons in den Blog hochladen


Um die Icons verwenden zu können, müssen sie hochgeladen werden - entweder direkt in euren Blog oder bei einer Plattform wie z.B. Picasa.

Am Einfachsten ist es, wenn ihr einfach eine neue Seite in eurem Blog erstellt, die ihr aber nur als Entwurf speichert und nicht veröffentlicht.

Um ein Bild in eine Seite hochzuladen, klicke auf der neu angelegten Seite oben auf das Icon "Bild einfügen". Dann öffnet sich ein Popup, in welchem du "Datei auswählen" klickst. Wähle das Icon von deiner Festplatte aus und klicke auf "Öffnen".


Das Icon wird dann in deine Seite hochgeladen. Genauso verfährst du für die anderen gewünschten Icons.


Klicke dann auf "Speichern" (NICHT "Veröffentlichen"!).


Icons in die Sidebar einbinden


Nun kannst du in deiner Seitenansicht in den HTML-Modus wechseln, indem du oben links auf den Button "HTML" klickst. Du erhältst dann die Ansicht mit dem HTML-Code.


Pro Icon benötigst du nur den Code, der im <img>-Tag eingebettet ist, hier in blau markiert ist der Code für das Facebook-Icon:


Diesen Code kopierst du dir pro Icon heraus:



Gehe in deinem Blogger-Dashboard auf "Layout". Klicke dann in der Sidebar auf "Gadget hinzufügen".


Wähle das Gadget "HTML / JavaScript".


Im Popup fügst du dann den Code in das Feld "Content" ein und klickst auf "Speichern".


Das gleiche wiederholst du für deine anderen Icons.

Nun sind alle Icon-Grafiken einbunden - aber noch nicht verlinkt. Darum kümmern wir uns im nächsten Schritt

Icon-Grafiken verlinken


Um einen Link zu setzen, gibt es in HTML den <a>-Tag. Ein Link hat immer folgende Struktur:


<a href="http://www.meinlink.de"> ... </a>


Dort wo die Punkte ... eingefügt sind, wird entweder ein Linktext oder ein Bild eingefügt. Für unsere Icons fügen wir dort also den <img>-Code ein. Der Link sieht dann so aus:


Das blau hinterlegte ist der Bild-Code, den du bereits im vorigen Schritt in dein HTML-Gadget eingefügt hast.

Jetzt muss nur noch die richtige URL zwischen die Anführungszeichen im <a>-Tag eingefügt werden. Das blau hinterlegte sind die jeweiligen URLs, in diesem Beispiel für meine Social Media Seiten, immer mit http:// davor. Diese Links ersetzt du mit deinen eigenen URLs.

Hier kannst du dir den Beispiel-Code herauskopieren. Dort musst du nur noch den Link durch deine URL und das Bild mit deinem hochgeladenen Bild ersetzen.

<a href="https://www.facebook.com/KreativlaborBerlin" target="_blank"><img border="0" src="http://1.bp.blogspot.com/-iBodcVOTb7M/Uz-joIG17AI/AAAAAAAABCQ/e8gfdFralms/s1600/Facebook.png" /></a>




Dann klickst du im Gadget-Popup auf den Button "Speichern" und in der Layout-Ansicht ebenfalls nochmal auf "Layout speichern". Nun sind die Icons in deiner Sidebar eingebunden und verlinkt.


Die angelegte Seite mit den Icons kannst du nun wieder löschen.

Kommentare :

  1. Vielen Dank für die tollen Anleitungen. Habe eben schon etwas ausprobiert. Ist alles wirklich leicht verständlich und toll erklärt. Viele liebe Grüße Ramona

    AntwortenLöschen
  2. Hallo Julia,
    auch von mir ein dickes Dankeschön für diese super Seite! Genau nach solchen Anleitungen habe ich schon gesucht und nichts gescheites gefunden. Hat bisher alles prima funktioniert. Mach weiter so!
    Lieben Gruß

    AntwortenLöschen
  3. Super erklärt! Ich bin ja noch eher ein Neuling, was das Bloggen angeht, aber dank solcher tollen Erklärungen kommt man seinem Ziel immer näher. Ganz lieben Dank <3

    AntwortenLöschen
  4. Super Danke! Hat sofort geklappt. Jetzt muss ich nur noch schauen wie ich das mit chicisimo hinbekomme dann ist es perfekt :-)

    AntwortenLöschen
  5. Hey!
    Also ich finde das Tutorial auch echt gut erklärt und an sich verstehe ich auch alles nur gibt es bei mir ein Problem mit dem ich nicht ganz zurecht komme..
    Und zwar kann ich, wenn man den html Code kopieren und dann in das hmtl/javascript Feld einsetzen soll den code zwar kopiere, beim einsetzen wird es aber nicht angezeigt sondern nur ein leeres Feld..
    verstehst du mein problem und kannst mir helfen?
    Würde mich sehr freuen!

    Liebe Grüße,
    Julia

    daisyskirt.blogspot.com

    AntwortenLöschen
  6. Super Anleitung! Ich habe immer wieder Probleme mit den Icons, aber ich glaube, jetzt habe ich es gelöst. :)
    LG, Vivi

    This is my world!

    AntwortenLöschen
  7. Super Anleitung! :)
    Danke <3 hast du vielleicht einen Tipp wie man die Icons in die Mitte verschieben kann, weil ich nur drei habe und diese sammeln sich nun links :/
    Danke nochmal!
    Xo :*
    stillwaitingforamiracle.blogspot.de

    AntwortenLöschen
    Antworten
    1. Das ist auch genau mein Problem! Hast du eine Lösung gefunden?
      Liebe Grüße :)

      luslein.blogspot.de

      Löschen
    2. Das wüsste ich auch gerne :)
      Liebe Grüße
      Regina

      http://reginwi.blogspot.co.at

      Löschen
  8. Super super gute Anleitung :)
    Danke schonmal, hoffe deine Seite hilft mir bei noch so manchen Sachen :)

    Liebe Grüße

    AntwortenLöschen
  9. SUPER Anleitung!
    Vielen Dank!
    LG
    Agnes :)
    http://sachendiegluecklichmachen.blogspot.de/

    AntwortenLöschen
  10. Die Anleitung ist super, vielen Dank! Mir fehlt jetzt nur noch eins zu meinem Glück: Ich hätte gerne, dass sich verlinkten Seiten in einem neuen Fenster öffnen. Oder würdest du davon abraten?

    AntwortenLöschen
  11. Vielen lieben Dank für die gute Beschreibung.
    Ich hab zuerst eeeewig herum experimentiert und Dank deiner Hilfe hab ichs super hinbekommen :-)
    Hat zwar einige Zeit gedauert bis man den Dreh mit den HTML Codes raus hat, aber immerhin.. solang es funktioniert!

    Liebe Grüße,
    Petra

    AntwortenLöschen
  12. Viiiielen Dank für deine Anleitungen!!!! Da werde ich mich heute mittag doch gleich mal hinsetzen und das eine oder andere ausprobieren! Es klingt auf jeden Fall alles machbar :)

    Liebste Grüße,
    Melanie

    AntwortenLöschen
  13. Vielen, vielen Dank!!! Seit Ewigkeiten will ich meinen Blog aufpimpen, aber ich habe es nie richtig verstanden. Durch Zufall bin ich auf diese Anleitung hier gestoßen und es hat sofort geklappt. Ich könnt heulen, so sehr freu ich mich jetzt :-) Du bist meine Rettung <3

    AntwortenLöschen
  14. Hat super funktioniert! Vielen Dank für ausführliche Beschreibung!

    AntwortenLöschen
  15. Super Anleitung! Bin gerade dabei meinen Blog zu gestalten und da kommt dein Blog wie gerufen. Vielen Dank für die ausführlichen Beschreibungen. :)

    AntwortenLöschen
  16. Vielen Dank für die tolle Anleitung! Hat auf Anhieb geklappt und mir sehr geholfen!

    AntwortenLöschen
  17. Danke! Endlich eine kurze und verständliche Anleitung! Als Anfänger muss ich zwar noch ein bisschen rumprobieren wegen der Größe der Icons, aber endlich ist es mir klar geworden, wie überhaupt anfangen!

    AntwortenLöschen
  18. super, vielen Dank! habe gerade erst vor kurzem einen eigenen Block veröffentlicht, und suche schon die ganze Zeit nach einer guten Erklärungen. Hast mir mein Leben gerettet :D

    AntwortenLöschen
  19. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  20. Woooow vielen vielen Dank für die tolle und verständliche Anleitung!! ich war schon am Verzweifeln und dachte ich bekomm das niiiie hin. Du hast das wirklich sehr gut erklärt!!

    Liebe Grüße,
    Stephanie

    AntwortenLöschen
  21. Vielen Dank für die tolle Anleitung!
    Mein Dackel-Blog nimmt langsam Form an. Danke!

    www.krummebeine.de

    AntwortenLöschen
  22. danke danke ganz toll!! ich habe es endlich hinbekommen!!! :-) ich suche schon so lange, und ich habe es iwie nie hinbekommen!!!
    schau auf meiner Seite vorbei unter FAQ Blogger findest du deine Seite :-)
    www.kreativeszuhause.blogspot.de

    AntwortenLöschen
  23. Dankeschön. Hat endlich geklappt :)

    AntwortenLöschen
  24. Liebe Julia,
    hab vielen Dank für Deine step-by-step-Anleitung bzgl. der Social Media Icons. Puhhh, jetzt auch geschafft auf meiner Seite. Allerdings bekomme ich meine Google+ E-Mail Account nicht verbunden. Kannst Du mir hier einen beispielhaften Code für den aTag nennen?

    AntwortenLöschen
  25. Vielen Dank für die Erkärung:) Hab es jetzt geschafft, obwohl der Facebook Icon noch immer nicht so ganz funktioniert, aber da geh ich jetzt morgen noch mal ran. Ich habe es echt zum ersten mal gemacht und bin jetzt nach knapp 5 Stunden erst mal ferdisch :) Deine Blog ist toll und ich muss gestehen die Icons möchte ich schon so lange haben und bei anderen Blogs hatte es bei mir bisher vom Verständnis her , so gar nicht geklappt.
    Dir noch einen schönen Abend
    LG Sylke

    AntwortenLöschen
  26. Hi!
    Ganz lieben Dank für die klasse Erklärung. Dank Dir habe ich jetzt angefangen die ersten Buttons auf meinem Blog einzubauen.
    LG Claudia

    AntwortenLöschen
  27. Tausend Dank für die Anleitung. Die ist wirklich spitze!

    AntwortenLöschen
  28. Eine wirkliche tolle Erklärung zu dem (meiner Meinung nach komplizierten Thema),.. ich bin ein HTML-Neuling und durch dich habe ich mich endlich getraut etwas mit meinem BLOG (http://romisromane.blogspot.co.at/) design-technisch zu experimentieren. Bei einem jedoch stehe ich an .. ich habe auch einen Mail-Icon, doch wie binde ich meine Mailadresse da ein? LG

    AntwortenLöschen
  29. Vielen Vielen Vielen Dank!!!!! Keine Erklärung ist so gut wie deine! Schritt für Schritt und leicht nachvollziehbar! Tausend Dank! Ich habe es tatsächlich hinbekommen und es war wirklich leicht!
    Ganz liebe Grüße
    Isabella

    AntwortenLöschen
  30. toll danke hat geklappt. Andere Beschreibungen habe ich nicht wirklich verstanden.

    AntwortenLöschen
  31. hat (fast) alles super geklappt, allerdings will er bei mit facebook nicht anzeigen :-( sehr gut zu verstehen, aber wieso will facebook nicht bei mir drauf? :-(


    liebste grüße, moni.
    www.monis-paradise.blogspot.de

    AntwortenLöschen
  32. Danke Dir. Suchte eine Lösung für www.canariansea.com, da mir die Google+ und Facebookboxen echt zu groß waren. Werde ich gleich mal testen :)

    Besten Gruß
    Andi

    AntwortenLöschen
  33. Hallo :)
    Danke schön für die tolle Erklärung. Sie ist echt gut zu verstehen und umzusetzen.
    Hab es gerade eingebaut und es sieht super aus, genau nach meinen Wünschen.

    Viele Grüße
    Susanne

    AntwortenLöschen
  34. I am regular reader of your blog and no doubt it all stuff is awesome. The best thing about your sharing and posting is that you always provide content that is helpful for both the newbie and experts. Looking for more stuff and tutorials.

    Love from Bloggers Town

    AntwortenLöschen
  35. Ganz, ganz, ganz ... und noch viel mehr ganz ... tolle Anleitung! War schon kurz vorm Durchdrehen! Dankeeeeeeee und ein tolles Wochenende wünsche ich dir ;)

    AntwortenLöschen
  36. Hey,

    super Anleitung, aber wie bekomme ich die Icons denn kleiner ?
    Bei mir sind es Logos von verlagen und die sind etwas zu groß für meine Sidebar :(

    AntwortenLöschen
    Antworten
    1. auf Seiten, wie z.B. iconfinder.com gibt es verschiedene Größen :)
      LG Cella

      Löschen
  37. Vielen Dank für die Anleitung, hat mir echt weitergeholfen. Habe den ganzen Tag gerätselt, wie man das alles in ein HTML Code bekommt, und habs jetzt erst hingekriegt :D
    Viele Grüße von meinem Blog (:

    AntwortenLöschen
  38. Sehr sehr guter Beitrag! Das hilft einen blutigen Anfänger, wie ich es bin, sehr weiter! Danke!

    AntwortenLöschen
  39. Thanks a million. Followed your instructions and it worked! So proud of myself that I entered the HTML world, if ever so briefly ;)

    AntwortenLöschen
  40. Huhu! Vielen,vielen,vielen,vielen Dank für die super Anleitung!!! Das ist die beste, die ich je gesehen habe.

    Alles Liebe Alina ٩(●˙—˙●)۶

    AntwortenLöschen
  41. Tolle Anleitung :)

    ich habe für die grafische Oberfläche meines Blogs ein individuelles Webdesign erstellen lassen. Da ich grafisch nicht so betucht bin und da eine Agentur professionelle und kunden-orientierte Lösungen anbieten kann.

    AntwortenLöschen
  42. Die Anleitung ist super - wie auch die euphorischen Kommentare über die Jahre hinweg beweisen.
    Leider erscheinen meine Icons aber alle untereinander und ich kriege es nicht gebacken, dass sie hübsch nebeneinander erscheinen. Sie sind klein, Platz wäre genug. Hast du dazu auch nen Tipp?
    LG vonKarin

    AntwortenLöschen
    Antworten
    1. Ich glaub es nicht .... nun habe ich es doch alleine geschafft. Ich habe im HTLM einfach die ganzen Absatzmarken
      rausgelöscht ... und voilà .. schon geht's.
      Liebe Grüße
      vonKarin

      Löschen
  43. Super Anleitung,hat mir echt geholfen. :)
    Danke schön
    lg.

    AntwortenLöschen
  44. Danke für die tolle Anleitung. Leider sieht man bei mir die social media buttons nur in der Desktop Version aber nicht auf der mobilen. Hast du da einen Tipp? Danke!

    AntwortenLöschen
  45. Ich hab's geschafft, juhuuu! Vielen Dank!

    AntwortenLöschen
  46. Vielen Dank :) mit der Anleitung hat es super leicht geklappt :D Dankeschön :)

    AntwortenLöschen
  47. Hallo Julia,
    vielen lieben Dank. Durch deine super Schritt für Schritt Anleitung hab ich es auch geschafft. :D
    Liebe Grüße Tabea

    AntwortenLöschen
  48. Danke für diese super Anleitung :)

    AntwortenLöschen
  49. Corporate Webdesign Nürnberg.Wir realisieren Ihren Internetauftritt. Überzeugen Sie Ihre Kunden mit Webdesign und profitieren Sie vom Wiedererkennungswert.
    Webdesign Nürnberg für Ihren perfekten Internetauftritt.Überzeugen Sie Ihre Kunden mit einer Corporate Website und profitieren Sie vom hohen Wiedererkennungswert unseres Webdesigns.

    AntwortenLöschen
  50. toll erklärt, vielen lieben Dank :)

    AntwortenLöschen
  51. Huhu!

    Vielen Dank für die tolle und vor allem EINFACHEErklärung. Dank dir habe ich seit Monaten auch endlich Icons auf meinem Blog. DANKE DANKE DANKE

    AntwortenLöschen
  52. Vielen, vielen Dank, bin schon ewig auf der Suche nach sowas, und dank dir hab ichs jetzt! Mein Blog (https://julias-torten.blogspot.de/) sieht dank dir jetzt viiiiiel schöner aus! Diesen Tipp werd ich nicht für mich behalten! LG Julia

    AntwortenLöschen
  53. Does anyone know where to fine any good denver advertising agencies? I really want to find a good advertising database or advertising agency search firms to do this but I'm having trouble.

    AntwortenLöschen