[Tutorial] Social Media Icons

Hallo!

Dadurch, dass nun ja die "Teilen" und "Like" Buttons von Facebook endgültig nicht mehr datenschutzkonform sind und jedem der sie benutzt Abmahnungen drohen stellt sich bei vielen die Frage "Und was nun?".

Exhibit A: Bei mir gibt es rechts in der Seitenleiste formschöne, datenschutzkonforme Icons zu meinen Social Media Seiten sowie Bloglovin und Blog Connect. Font Awesome sei dank


Und wie man das macht möchte ich dir heute gerne mal zeigen. Allerdings nur für Blogspot. Für Wordpress ist das natürlich auch anwendbar, aber da ich selbst nicht damit arbeite ist es etwas schwierig das Schritt für Schritt zu erklären. Grundsätzlich ist es gleich.

Als erstes brauchst du die Links zu deinen Profilen auf den Seiten, die du verlinken möchtest. Exemplarisch werde ich das hier für Facebook machen.

So sieht das bei mir aus

Und nun geht es auf in den Code. Aber keine Angst, du musst nur etwas Copy+Paste betreiben.

Ziemlich am Anfang steht irgendwo <head> und direkt darunter kopierst du folgenden Code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

Jetzt nur noch auf "Vorlage speichern" gehen und alle 605 Icons von Font Awesome stehen dir zur Verfügung. Aber erst einmal brauchen wir nur eins davon. Ich ziehe das Facebook-F vor, aber es gibt außerdem auch noch zwei andere Varianten:
fa-facebook, fa-facebook-official und fa-facebook-square
Um den Icon einzufügen braucht man erstmal im Layout ein neues Gadget und zwar das "html/JavaScript"-Gadget. Füge das einfach dort ein wo du am Ende die Icons haben möchtest, bei mir ist es in der rechten Seitenleiste. Und jetzt kommt der wichtige Schritt.

mit

<i class="fa ICON NAME"></i>

 fügst du das Bild ein. Noch ist es aber kein Link zur Social Media Seite. Dafür muss man "einfach" einen Textlink setzen. Insgesamt sollte das also so aussehen:

<a href="LINK ZUR SEITE"><i class="fa ICON NAME"></i></a>

Mein Facebook-Icon hat folgenden Code:

<a href="http://facebook.de/buechernestblog"><i class="fa fa-facebook fa-3x" style="margin:8px"></i></a>

und sieht so aus:

Aber, warte: Da ist ja noch was anderes!

Ja, mit fa-3x (bzw. fa-2x; fa-1x etc) kann man die Größe des Icons verändern. Es gibt auch die Möglichkeit das Icon zu drehen, sich dauernd drehen zu lassen, einen Rahmen zu verpassen, eine feste Breite oder Icons als Aufzählungszeichen zu benutzen oder mehrere davon "aufeinander zu stapeln". Die Codes dafür findet man unter "Examples" auf der Font Awesome-Seite.

Und das style="margin:8px" ist dafür da, damit die Icons einen gewissen Abstand zu einander halten. Das kann man aber auch alles weglassen, wenn man so zufrieden ist wie es ohne diese "Schöhnheitskorrekturen" aussieht.

Und wie kann ich die Farbe ändern?

Das Icon ist ein normaler Textlink, das heißt die Farben sind die gleichen wie bei einem normalen Link. Du kannst sie normalerweise einfach unter "Vorlage bearbeiten" ändern. Oder die Farbe direkt im Code für das jeweilige Icon ändern:

<a href="http://facebook.de/buechernestblog"><i class="fa fa-facebook fa-3x" style="color:blue"></i></a>

ist jetzt ein besonders hässliches blau, aber ich hatte keine Lust einen hexadezimal-Code rauszusuchen ;)


Sonst noch Fragen? Anmerkungen? Ideen ?

4

How to design

Hallo allerseits,

heute gibt es ein kleines Tutorial von mir. Und zwar zum Thema nahtlose Hintergründe. Also Hintergründe, die man kacheln kann ohne Ränder zu sehen. Grade für einen Bloghintergrund ist das ja immer schön.

Also los geht's. Ich arbeite mit GIMP (kostenlos und open-source ^^) und habe einfach mal eine Datei mit weißen Hintergrund und 500x500 Pixeln geöffnet.

Als nächstes brauche ich natürlich ein Bild, das ich nahtlos machen kann. Und weil gleichmäßige Bilder ja zu einfach sind habe ich einfach mal rumgepunktet.

Etwas rot...		und noch etwas blau dazu...

So, das wäre geschafft. Nur würde man jetzt ja sehen, dass es einzelne Bilder sind, wenn man sie aneinander setzen würde. Für einen netten gepunkteten Hintergrund ist das ja aber nicht so schön.
Glücklicherweise hat GIMP sogar eine Funktion namens "Nahtlos machen". Zu finden unter "Filter" -> "Abbilden" -> "Nahtlos machen"

Und jetzt rechnet GIMP ein bisschen und versucht aus den wirren Punktemuster ein gleichmäßiges, nahtloses Muster zu machen. Das sieht dann so aus:

Nun ja, nahtlos ist es. Und diese halbtransparenten Punkte haben auch irgendwie was. Aber so wirklich ist es nicht das, was ich mir vorgestellt hatte. Und grade, wenn man ein ganz bestimmtes Muster im Kopf hat wohl auch nicht die beste Methode. Auch bei komplizierteren Mustern als Punkten eher unschön.
Also Methode 2:
Man klicke auf "Ebene" -> "Transformation" und dann auf "Versatz":

Und dann geht folgendes Fenster auf:

Hier kann man jetzt auswählen was für eine Art von Versatz man gerne hätte. Wichtig: "Falten" angeben, nur dann funktioniert diese Methode. Die Werte für X und Y geben an um wieviel das Bild jeweils verschoben wird. Mit der Schaltfläche "Versatz um (x/2),(y/2)" kann man eigentlich nichts falsch machen.

Jetzt auf "Versetzen" drücken und voilà:

	Irgendwie sieht das jetzt recht leer aus in der Mitte oder? Das liegt daran, dass vorher direkt am Rand keine Punkte waren. Dieser "Rand" befindet sich jetzt in der Mitte des Bildes, dort wo Platz ist. Aber das mit den zu wenigen Punkten ist schnell geändert.
und hier einmal das Endergebnis:

Sicherlich kein Meisterwerk, aber ich hoffe ihr habt das Prinzip verstanden. Wenn man nur um eine Achse verschiebt, kann man das Bild nur an zwei Kanten nahtlos machen z.B. oben und unten. Das Hintergrundbild meines Blogs ist so entstanden.

Fragen dürfen gerne gestellt werden.


Was haltet ihr von diesem Tutorial? Soll ich öfter mal so etwas in der Art schreiben? Ein wirklicher Experte bin ich zwar nicht, aber einiges habe ich mir schon beigebracht in vielen, vielen Jahren Sims-Kleider färben und Hintergründe für diverse Seiten erstellen.

5