About Tutorialübersicht Labels Header Goodies Tutorialwünsche

Einfache Social Media Buttons

Mittwoch, 13. Februar 2013

Hallo ihr Lieben. Als erstes habe ich eine minikleine Bitte an euch. Und zwar, würdet ihr bitte hier bei Lichtmalerin mich zum Blog of the Month machen? Ich nehme dort mit meinem eigenen Blog teil. aww, es wäre so cool, da zu gewinnen :o Hier seht ihr erstmal meinen Blog, und hier geht's direkt zur Abstimmung! Mein Blog ist der 4. (Photography is a way to live)
Ich liebe euch <3

So, dann lasst uns mal anfangen. Viele von euch haben sich gewünscht, dass ich mal erkläre, wie man sich eigene Social Media Buttons erstellt.
Dafür müsst ihr euch als erstes mal diese Schrift hier runterladen. Auf dieser Seite seht ihr übrigens eine Übersicht von allen Buchstaben, die in dem Paket sind. Als erstes solltet ihr die Schrift installieren.
Ich habe hier nocheinmal eine Buchstaben in einer Übersicht zusammengefasst!


Wie man eigene Buttons erstellt

Als erstes öffnet ihr GIMP und erstellt eine neue Datei. Am besten mit den Maßen 100x100px. Erstellt eine neues Textebene, wählt die Schrift Just Vector aus, wählt den Buchstaben eurer Wahl und passt Größe und Farbe nach euren Wünschen an.


falls ihr nun einen bunten oder mehrfarbigen Hintergrund habt, solltet ihr den nächsten Schritt auch noch beachten! Geht dazu auf den Ebenenpfad und wählt die weiße Hintergrundebene aus. Danach schaut ihr nach unten und da solltet ihr noch eine kleine Mülltonne und ein paar weitere Symbole entdecken. Klickt das Symbol an und fertig seid ihr schon mit dem eigentlichen Button.
Allerdings kommt jetzt noch ein kleiner, aber wichtiger Schritt. Exportiert die Datei und wählt als Dateiendung  .png aus. Nach diesem Schema erstellt ihr euch nun alle Buttons, die ihr benötigt und speichert sie auch genauso ab.
Jetzt kommt ein weiterer Schritt, den ihr zum einbinden unbedingt braucht. Ladet die Bilder bei blogger (ich mach das immer auf meinem Testblog), photobucket oder sonst wo hoch und merkt euch die Links!

Das war mein Teil und ab hier mach Patrizia weiter! :))

Die Buttons auf dem Blog einbinden

An sich ist das überhaupt nicht schwer. Ähnlich wie in diesem Tutorial hier.
So, wie Theresa schon gesagt hat - ihr braucht die Links. Beispielsweise ladet ihr es bei pic-upload hoch, und nehmt dann den Hotlink. Oder, wie Theresa gesagt hat, bei Blogger und dann auf Rechtsklick und 'Bild-URL kopieren' gehen.
Dann habt ihr das hier als 'Grundcode':
<a href='LINK ZU ETWAS'>
<img src='BILD URL' width='30px'>
</a>
Link zu etwas  - beispielsweise Facebook, Instagram, Tumblr, etc.
Bild URL           - Die Links die ihr schon hochgeladen habt.
50px                 - Diese Zahl könnt ihr beliebig verändern - aber nicht höher als 100px, wenn ihr die Buttons in dieser Größe erstellt habt.
Damit ihr einen Vergleich habt - das hier sind 50px, 40px und 30px.



Das wars auch schon!

10 Kommentare:

  1. Da schlägt mein Vierenscanner an :/ sehr schade

    AntwortenLöschen
  2. Neeh wenn ich die Schrift runterladen will. Das is irgendwie ganz komisch ...
    (abgestimmt hab ich aber auch)


    Abpropro nebenbei: hast du irgendwo ein Tut gemacht wie man dieses aufklappbare Faebook ding da macht?

    alles liebe Nyro

    AntwortenLöschen
  3. :D ich such mir das mal raus und wenn das klappt brauch ich das andere ja nich :D

    Hmmm .... sagmal hast du irgendwo header tipps?
    Mit den ganzen Codes und Farben komm ich in letzter Zeit ja klar aber dieser header nervt mich an :DDDD


    Im übrigen ich lieeebe deinen Blog.

    Nyro

    AntwortenLöschen
  4. Ohhh Dankee :D

    Ich fuchs mich da mal durch :D

    (ich bin an der Nähmaschine definitiv besser als im Bloggen :D)

    AntwortenLöschen
  5. Ich meine die Seitenlinks:

    Home
    About Nyro
    100 Dinge in 2013
    Weltenbummlerin
    AuPair 2013
    AuPair Diary


    die krieg ich nich verändert was das Aussehen angeht.

    Aso und irgendwie werden in meinen Kommentaren auch mal gar keine Avatare angezeigt. Hab ich da was falsches aus dem Code glöscht?

    lg

    AntwortenLöschen
  6. ich bekomme das einfach nicht hin diese schriftart zu installieren... sogar dazu bin ich zu blöd :(

    AntwortenLöschen
  7. ♥Ich könnte mal für dich voten, oder auch mehrfach - je nachdem wie oft ich das darf. Aber welchen Gefallen könntest du mir im Gegenzug tun?
    Viele liebe Grüße, Wieczora (◔‿◔)
    Wieczoranien
    mein Fotoblog

    AntwortenLöschen
  8. mein computer kann das nicht installieren. wenn ich das machen will, meckert der rum "es handelt sich um eine ungültige schriftart" :( och mensch :(

    AntwortenLöschen
  9. ich kann es leider auch nicht installieren (auch wegen Viren), habt ihr vllt. noch eine weiter Schriftart ? :)

    AntwortenLöschen