Grafiken (zB. Social Icons) einbinden

Hallo Ihr Lieben,

heute kommt mal wieder ein längeres Tutorial von mir, indem ich euch zeige, wie man allgemein Grafiken, die man irgendwo heruntergeladen hat, auf seinem Blog einbinden kann.
Viele haben sich von mir gewünscht, dass ich ein Tutorial über das Einbinden von Social Media Icons schreiben soll. Ich dachte mir aber, ich schreibe es etwas allgemeiner, denn egal, was für Bilder oder Grafiken man einbindet, die Vorgehensweise ist teilweise immer gleich. Ich hoffe, ihr seid nicht von der Länge erschlagen :)

Wenn ihr eigene Grafiken einbinden wollt, die ihr nirgendwo heruntergeladen habt oder keine .zip oder .rar-Datei habt, die ihr entpacken müsst, könnt ihr Punkt 1 überspringen.

1. Programme zum Entpacken

Stellt euch vor, dass das Pakete sind, die die gewünschten Grafiken enthalten. Um diese Pakete "auszupacken" braucht ihr ein Programm zum Entpacken. Ich selbst benutze WinRAR - je nach dem welcher Systemtyp euer Windows-PC ist, braucht ihr die 32 Bit oder 64 Bit Version (Welchen Systemtyp benutze ich? - Mac User können die MacOS-Version herunterladen). Nach 30 Tagen kommt zwar dann beim jeden Öffnen eine Meldung, die man aber schnell wegklicken kann. Alternativ gibt es auch noch WinZip (32 Bit/64 Bit/MacOS) & 7-Zip (32 Bit/64 Bit).

Zum Entpacken geht ihr dann einfach zur Datei und öffnet sie. Im Fenster, dass sich dann öffnet, könnt ihr dann den Inhalt entpacken. Alternativ könnt ihr auch per Rechtsklick entpacken, dass ist aber bei jedem Programm anders. So sieht es jedenfalls bei WinRar aus:

2. Grafiken hochladen & die Bild-URL herausfinden

Jetzt braucht ihr die Bilder im Netz. Zum Hochladen habt ihr unendliche Möglichkeiten - ich zeige euch hier aber mal drei Anbieter, die ich für fähig halte und ich auch selber kenne und benutzt habe.

Wenn es euch egal ist, wo die Bilder landen, könnt ihr TinyPic benutzen. Direkt auf der Startseite könnt ihr eure Bilder einzeln hochladen. Nachteil ist leider, dass eine Sicherheitsabfrage kommt, aber danach habt ihr euren Bildlink rechts unter "Direct Link for Layouts" bzw. gleich den fertigen Code, den ihr direkt benutzen könnt (unter "HTML for Websites"). Wem nicht egal ist, wo seine Bilder landen, kann auch Photobucket benutzen - dort ist die Oberfläche ähnlich aufgebaut wie bei TinyPic, jedoch gibt es noch Alben, in die man seine Bilder ordnen kann. Dafür muss man sich nur anmelden.

Wenn ihr eure Bilder lieber bei Picasa Webalben, die ja mit eurem Blog und nun auch mit Google+ verbunden ist, dann könnt ihr das hier tun. Rechts oben könnt ihr eure Bilder hochladen. Ist das getan, könnt ihr die Bilder im Album direkt oben finden und öffnen. Keine Sorge, falls die Vorschau übel aussieht. Nach einem Klick auf die Vorschaubilder sieht alles wieder normal aus. Links müsste eure Grafik auf schwarzem Hintergrund sein. Macht auf das Bild einen Rechtsklick und kopiert die Bild-Adresse.

3. In den Blog einbinden

Nun öffnet ihr unter Layout einen neuen HTML/Javascript-Widget an der Stelle eurer Wahl. Dort kommt pro Grafik dieser Codeschnipsel mit euren Bild-URLs rein:

<img src="http://www.bilderhostername.de/.../bild.jpg" />

Soll die Grafik kleiner dargestellt werden? [Wer später das ganze noch im nächsten Schritt stylen möchte, kann das hier überspringen.] Ihr könnt die Atribute width und height oder auch nur eins von beiden verwenden, wenn das zweite Attribut automatisch angepasst werden soll. Statt Pixel (px) könnt ihr auch Prozente (%) benutzen. Bei width="100%" zB. passt sich die Breite der Grafik an die Breite des Elements, in dem es sich befindet (zB. Sidebar) zu 100% an. Beispiele:

<img src="http://www.bilderhostername.de/.../bild.jpg" width="30px" height="30px" />

<img src="http://www.bilderhostername.de/.../bild.jpg" width="30px" />

<img src="http://www.bilderhostername.de/.../bild.jpg" width="100%"/>

Soll das Bild verlinkt werden? Dann fügt folgendes um euren Codeschnipsel herum ein.

<a href="http://www.euerlink.de/"><img src="http://www.bilderhostername.de/.../bild.jpg" width="30px" /></a>

Soll der Link in einem neuen Tab geöffnet werden, müsst ihr folgendes Attribut einfügen:

<a href="http://www.euerlink.de/" target="_blank">[...]

4. Feinschliff (mit CSS)

Ihr wollt die Abstände der Grafiken verändern oder bestimmte Hover-Effekt hinzufügen? Dann seit ihr hier genau richtig!

Ihr habt euren Code zusammen und der sieht ungefähr so aus wie bei diesem Beispiel? Achtet darauf, dass ihr außerhalb der eckigen Klammern keine Leerzeichen eingebt, sonst entsteht ein Abstand. Dann kann es ja weiter gehen. :)

<a href="http://www.euerlink1.de/"><img src="http://www.bilderhostername.de/.../bild1.jpg" /></a>
<a href="http://www.euerlink2.de/"><img src="http://www.bilderhostername.de/.../bild2.jpg" /></a>
<a href="http://www.euerlink3.de/"><img src="http://www.bilderhostername.de/.../bild.jpg3" /></a>

Bevor es zum CSS geht, müssen wir der ganzen Sache noch eine ID geben. Am besten eins, dass ihr wieder erkennt. Bei Social Icons benutze ich zB. "Socials":

<div id="Socials"><a href="http://www.euerlink1.de/"><img scr="http://www.bilderhostername.de/.../bild1.jpg" /></a>
<a href="http://www.euerlink2.de/"><img src="http://www.bilderhostername.de/.../bild2.jpg" /></a>
<a href="http://www.euerlink3.de/"><img src="http://www.bilderhostername.de/.../bild.jpg3" /></a>
</div>

Um es euch zu verdeutlichen, wie der HTML-Code aufgebaut ist, habe ich eine kleine Grafik erstellt:

Nun kommen wir zum CSS. Das könnt ihr direkt unter eurem Code im Widget einfügen. Es gibt auch andere Möglichkeiten, aber ich bevorzuge diese Variante, da ich sie für diesen Gebrauch als praktischer empfinde.

Dieser Code kommt direkt unter den HTML-Code:

<style>
#Socials {
width:100%;
}
#Socials img {
width:30px;
}
#Socials img:hover{
}
</style>

Nun kommt nochmal fast die gleiche Grafik von oben, diesmal mit den CSS-Selektoren und wie sie zugeordnet sind:

Wer sich etwas mit CSS auskennt, kann hier für die einzelnen Selektoren Eigenschaften eingeben. Für die, die nicht ganz durchblicken, habe ich aber noch etwas vorbereitet:

<style>
#Socials {
width:100%; /*Breite des Kastens, wo die Grafiken sind*/
margin-top:10px; /*Abstand zu oben*/
}
#Socials img {
width:30px; /*Breite des Bildes*/
margin: 0 5px 0 5px; /*Abstand oben, rechts, unten, links vom Bild*/
opacity: 1; /*Transparenz, 1 bedeutet keine Transparenz & 0 bedeutet komplette Transparenz*/
}
#Socials img:hover{
opacity: 0.6; /*Transparenz, siehe oben*/
}
</style>

Da sind so ziemlich die wichtigsten Eigenschaften drin, die ihr brauchen werdet. Falls noch etwas fehlt oder ihr nach einer bestimmten sucht, dann fragt ruhig nach! :) Achso, und so wie hier in der Sidebar sieht das ganze am Ende aus.

Ich hoffe, dass war nicht zu viel auf einmal. Wer Probleme mit diesem Tutorial hat, kann es ja mal mit diesen Tutorials versuchen:

• Schwebende Social-Media Buttons
• Social Media Buttons
• Bilder verlinken

FAQ

Wo finde ich Social Media Icons kostenlos zum herunterladen?

Bei Deviantart, Icon Archive, hier auf CopyPasteLove und im WWW, wenn man sucht ;)

Wenn man auf mein Email-Button klickt, soll sich ein Email-Fenster öffnen. Wie mache ich das?

Beim verlinken schreibst du dann anstatt der URL folgendes: mailto:meinemailadresse@web.de. Dann sieht es folgendermaßen aus: <a href="mailto:mira@cplove.de">[...]

Wie kriege ich die Social Media Icons untereinander und fixiert?
Dafür musst du die Breite von #Socials verkleinern. Sind die Icons zum Beispiel 30px breit, änderst du die Breite von #Socials auf width:30px;. Achte darauf, dass dann links und rechts von der Grafik kein Abstand besteht. Zum fixieren fügst du unter #Socials noch position:fixed; hinzu.

Wenn man mit der Maus über der Icons fährt, sollte eine kleine Box mit dem Titel auftauchen. Wie kriege ich das hin?
Dafür musst du einfach nur title="..." zu den Links hinzufügen. Dann sieht der Code so aus:
<a href="http://bloglovin.com/meinblog" title="folge mir auf Bloglovin"><img src="..."></a>

Und so sieht es dann aus: