Dienstag, 13. September 2011

Blog-Tricks: Social Media Icons mit Links zu Twitter, Facebook und Co

Vor kurzem habe ich eine Anfrage bekommen, wie ich in meiner Seitenleiste die Social Media Icons, also die Buttons oder Bilder mit den Verknüpfungen zu sozialen Netzwerken wie Twitter oder zu den RSS-Feeds meines Blogs gemacht habe. Das möchte ich euch heute zeigen:


Mit diesen Buttons könnt ihr eure Blogbesucher z.B. zu eure Profilen auf sozialen Netzwerken leiten, mit einem Klick die RSS-Feeds oder Posts oder Kommentare abonnieren lassen oder aber auch z.B. ganz einfach auf euer Gästebuch verlinken oder auf weitere Blogs von euch. Oder, oder, oder.


Die Grundlage dieser Buttons sind ganz einfach nur Bilder, die dann mit einem HTML-Code versehen werden und dadurch als anklickbare Verknüpfung fungieren. Optional könnt ihr das Bild dann auch noch mit einem Tooltip ("Tooltip" heißt der Fachausdruck dafür, wenn beim "Mouseover" (Berühren des Bildes mit dem Mauscursor) ein Text über dem Bild erscheint.) versehen:




Zu den Bildern (Icons):


  • Die könnt ihr selbst herstellen und dadurch 100 % an euer Blogdesign (Größe, Farben, Form, etc.)  anpassen - so werden eure Buttons unverwechselbar.
  • Ihr könnt aber auch auf schon fertige, kostenfreie Icons zurückgreifen. Sucht einfach mal im Internet nach "social media icons", und achtet darauf dass die Bilder kostenlos sind und keine Rechte verletzt werden! Ein paar besonders schöne findet ihr z.B. unter den folgenden Links: 


  • Oder ihr verbindet beide Varianten, so wie ich das getan habe: Ich habe mir ein paar hübsche Icons heruntergeladen und mit einem Bildbearbeitungsprogramm (z.B. GIMP) auf meinen Blog passend "zugeschnitten". Im konkreten Beispiel mit dem Twitter-Button habe ich drei Bildebenen verwendet: eine Ebene mit dem Twittervogel, eine Ebene mit dem Text ("Verfolgt mich!") und eine Ebene mit dem grün-weißen-Farbverlauf. Dazu habe ich noch einen Bildrahmen gemacht und fertig war das Social Media Icon für meinen Blog!


Wie ihr mittels HTML ganz einfach die Verknüpfung zur Webseite eurer Wahl und einen Tooltip erstellen könnt, habe ich euch hier schon mal ausführlich beschrieben:


http://lea27784.blogspot.com/2010/02/blog-tricks-bild-mit-tooltip-und-link.html




Ich hoffe ich konnte euch weiterhelfen?


6 Kommentare:

  1. Vielen dank für deine Tipps.
    Liebe Grüße Miriam

    AntwortenLöschen
  2. Liebe Kathrin,
    Der Artikel ist ja nun schon ein paar Jährchen alt, aber ich hab ihn eben erst entdeckt.
    Kennst du dich auch aus, wie man diese Buttons zum Weiterteilen auf der mobilen Ansicht hinbekommt? Am PC sieht alles so aus, wie ich das will, aber in der mobilen Ansicht erscheien meine Gadgets nicht.

    Liebe Grüße!
    Barbara

    AntwortenLöschen
    Antworten
    1. Hallo Barbara, ich bin mir nicht sicher ob ich verstehe was du genau meinst...?

      Löschen
    2. Ich meinte die Sharing-Buttons.... entschuldige. Allerdings habe ich mich nun doch entschlossen, nach Wordpress umzuziehen, und da ist das mit den mobilen Ansichten eh besser. Aber danke für deine Antwort, Liebe Grüße, Barbara

      Löschen
    3. Ah, ok ;) Hm, den Umzug zu wordpress schiebe ich auch schon ewig vor mir her... Das istw as für die langen, kalten Wintertage :)

      Löschen

Ich freue mich immer über eure Kommentare :-)

...und erspare euch die nervige Spambot-Abfrage, indem ich jede Anfrage manuell freischalte. Ach und noch etwas: Kommentare mit Werbelinks und Verstößen gegen die Netikette behalte ich mir vor kommentarlos zu löschen.

Related Posts with Thumbnails