Tutorial: Wie füge ich eigene Social Media Icons bei Blogger ein? + Give-Away Social Media Icon Set

Heute geht es mal nicht um die Wurscht, Nudeln, Kuchen oder andere Lebensmittel.
Heute geht es mal um den Blog an sich, Blogdesign und wie man den Blog nach seinen eigenen Vorstellungen gestaltet.

Ich hatte bereits vor diesem Blog schon einmal einen bei blog.de und da davor ein Onlinetagebuch (bereits vor über 10 Jahren - OMG bin ich schon alt).
Naja, auf jeden Fall, was ich damit sagen will; am Anfang ist nicht immer alles perfekt und man sollte sich davon nicht entmutigen lassen. Man wächst mit der Aufgabe. Mit der Zeit werden die Fotos besser, der Blog wird individuelller und auch Texte verfassen fällt leichter.

Ich habe am Anfang auch viel Zeit gebraucht. Ich habe viel über Kameraeinstellungen gelernt, ich habe neue Programme entdeckt und ich habe mich etwas zum Thema HTML schlau gemacht. Das alles war ein Prozess und ich bin noch mitten drin. Man lernt immer etwas Neues dazu. So etwas geht nicht von heute auf morgen. Deswegen verzweifelt nicht gleich, wenn etwas mal nicht funktioniert.

Am Anfang habe ich mich auch genau an solchen Tutorials wie diesem rangehangelt und mit der Zeit wurde ich immer selbstsicherer.

Wie füge ich eigene Social Media Icons ein?

Zuerst einmal benötigt ihr ein paar Social Media Icons entweder in jpg-Format oder besser im png-Format.

Rechts die Social Media Icons auf meinem Blog habe ich selbst erstellt. Ich mag diese Wasserfarben Icons und ich habe die Farbe an meinen Blog angepasst.

Da sind der Phantasie natürlich keine Grenzen gesetzt. Egal ob rund oder eckig; bunt, einfarbig oder schwarz-weiß; ihr könnt entscheiden welche Icons ihr benutzen wollt. Ich stelle euch zweierlei Varianten gratis zur Verfügung oder ihr gestaltet selber welche.

Gratis Social Media Icons zur freien Verwendung

Diese Sets dürft ihr gerne für euren eigenen Blog verwenden:

bitte hier klicken

bitte hier klicken

Klickt einfach auf den Link unter dem Bild und ihr könnt es euch herunterladen.

Vorbereitung ist alles

Zuerst einmal benötigt ihr jedes Symbol einzeln. D. h. ihr könnt nicht alle Icons mit einmal hochladen sondern müsst jedes Bild für sich abspeichern. Ihr könnt die Bilder einfach mit der Windows Fotoanzeige oder einem anderen Bildbearbeitungsprogramm zuschneiden und jedes Symbol für sich abspeichern.
Damit habt ihr schon mal alles vorbereitet und könnt dann direkt die Social Media Icons auf euren Blog einbetten.

Social Media Icons auf dem Blog einbetten

1. Nachdem ihr euch bei blogger.com eingeloggt habt, geht ihr links ins Menü und klickt auf Seiten.

2. Klickt jetzt oben im grauen Feld auf Neue Seite. Diese könnt ihr z. Bsp. Social Media Icon nennen. Wichtig: Veröffentlicht diese Seite nicht, sie bleibt ein Entwurf. Hintergrund dafür ist, dass ihr die Bilder erst einmal hochladen müsst, damit ihr sie einfügen könnt.

3. Nachdem ihr das gemacht habt, geht ihr auf Bild einfügen (kleines Foto in der Bearbeitungszeile) und ladet jedes einzelne Icon von eurem PC hoch. Geht nun links oben auf den grauen Button HTML (neben Verfassen). Dort müsste so etwas erscheinen (eure Bildadresse):

Kopiert den im Bild rot gekennzeichneten HTML-Code für jedes Bild; also von <img border ... bis ...jpg" />; und fügt es zwischenzeitlich in ein Worddokument ein. Das braucht ihr später nochmal.

4. Damit wäre der erste Schritt schon getan. Speichert die Seite ab, aber veröffentlicht sie nicht. Nun geht ihr links in der Menüzeile auf Layout. Nun seht ihr, wie der Name schon sagt, das Layout eures Blogges. Überlegt euch, wo die Social Media Icons zu finden sein sollen. Oben, unten oder in der Seitenleiste?

5. Klickt dann auf die Sidebar (header für oben oder footer für unten) und Gadget hinzufügen. Wählt das HTML/JavaScript-Gadget aus. Betitelt es z. Bsp. mit Social Media oder wie ihr mögt.

6. Jetzt wird es etwas knifflig, aber machbar, denn nun arbeiten wir mit HTML.

 

 Zum Schluß muss es so aussehen!

Ihr habt folgenden Code:

<a href="Link zu euer Facebookseite" target="_blank">HTML-Code aus Schritt 3/HTML-Code zu eurem Facebook-Icon</a>

Zum Beispiel:<a href="https://www.facebook.com/Juli-und-die-Welt-1696453003986793/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBmis9WDb8uRleDKTquS7Yof4cZXNvI1NAMVpDKjnHSFhX24yc6J1ecyguit1jMKRu3iwj0hQtDeoQwexf6lsCLVzum6zPaaP5G4kwraZjEmR9No1-NXCIMCF2392TeySDJnkHYfL4Aqk/s1600/lila-f.jpg" /></a>

Kopiert euch einfach den HTML-Code. Anstelle des ersten roten Textes kopiert ihr den Link eurer z. Bsp. Facebookseite oder Instagram-Profil oder Twitteraccounts aus der Adresszeile eures Browers und fügt ihn stattdessen für den roten Text ein.

Für den zweiten roten Text kommt wieder Schritt 3 ins Spiel. Ihr habt euch ja die HTML-Codes eurer Icon-Bilder in Word kopiert. Fügt diese nun an stelle des zweiten roten Textes ein.

Ihr müsst nur aufpassen, dass ihr das richtige Bild zur richtigen Homepage zuordnet.

Wiederholt das nun für jedes einzelne Social Media Icon welches ihr benutzen wollt.

7. Fast fertig! Speichert das Gadget ab und klickt nun oben rechts auf Layout speichern und voilá, wenn ihr nun auf euren Blog schaut, müssten die Social Media Icons eingebettet sein. 

Gewinnspiel: Euer eigenes Blogdesign

 

Wie ihr sicherlich schon gesehen habt, habe ich auch meinen eigenen Blog-Header entworfen passend zu meinem Blognamen.

Heute könnt ihr euer eigenes Blogdesign in Wasserfarben-Optik gewinnen.

 

Hier ist ein Beispiel.

Ich würde für euch ein Banner/Blog-Header mit eurem Blognamen erstellen + die farblich passenden Social Media Icons in Wasserfarben-Optik.

Anschließend bekommt ihr die Dateien von mir zugeschickt und könnt diese auf euren Blog hochladen. Ihr habt freie Farbwahl.

Schreibt mir einfach unten auf dem Blog einen Kommentar, welche Farbe ihr bevorzugt und welche Social Media Icons ihr benötigt. Bitte schreibt mir auch eure E-Mail Adresse dazu damit ich euch im Falle eines Gewinnes kontaktieren kann. Ich komme dann auf die Gewinnerin/den Gewinnern zu um die genauen Vorstellungen zu erfragen.

Das Gewinnspiel läuft bis 09.04. um 24:00 Uhr, bis dahin könnt ihr dran teilnehmen.

Ich freue mich auf eure Teilnahme und hoffe, dass Tutorial gefällt euch.

Eure