Social Icons im Menü

35 Kommentare

Heute zeige ich Euch, wie Ihr die kleinen Social Icons in Euer Fixiertes Top-Menü integrieren könnt. Die Anleitung kommt natürlich wieder mit dem passenden Code und diesmal auch gleich mit den Icons dazu - zur freien Nutzung.

 



Die Social Icons habe ich in 4 Stilen für Euch erstellt. Das Set enthält jeweils die Icons für Facebook, Instagram, Pinterest, Bloglovin', Google+, Twitter und E-Mail in den Stilen: Schwarz, Rosa, Hellblau & "Chalk". Hier seht Ihr die verschiedenen Stile, von denen Ihr Euch nun schon einen aussuchen solltet, denn jeder Stil hat seinen eigenen Code:






Für diese Blogger-Anleitung müsst Ihr natürlich das Fixierte Top-Menü schon angelegt haben, meine aktuellste Version findet Ihr hier: Fixiertes Top-Menü.



Bevor Ihr beginnt, solltet Ihr wieder ein Backup machen:

Dashboard > Backup/Wiederherstellung > Vollständige Vorlage herunterladen


***Ich habe die Codes grade nochmal aktualisiert, damit die Links sich beim Klick auf die Icons in einem neuen Fenster öffnen und Euer Blog trotzdem geöffnet bleibt ;) ***


1. Passenden Code kopieren
Suche dir einen Stil aus und kopiere den kompletten Code, der unter dem Set im Textfeld angezeigt wird. Das Textfeld kannst du am rechten unteren Rand größerziehen, um den gesamten Code angezeigt zu bekommen.



Icon Code Chalk






Icon Code Rosa






Icon Code Hellblau






Icon Code Schwarz






2. Code ins Top-Menü einfügen
Gehe in deinem > Dashboard auf > Layout und öffne das > HTML-Gadget, welches bereits den Code für dein Fixiertes Top-Menü enthält. Scrolle im Gadget ganz herunter, bis du in der letzten Zeile den letzten </div>-Tag siehst. Über dem letzten </div>-Tag fügst du den eben kopierten Code ein:

Nachdem du das Gadget gespeichert hast sollte es im Blog oben im Menü neben deinen Links sichtbar sein, wenn du alles richtig gemacht hast.


3. Bearbeiten der Social Icon Links
Gehe wieder in dein > Layout und öffne das< HTML Gadget. Scolle bis ganz unten und du siehst die einzelnen Zeilen deiner Icons, im unteren Bild mit dem roten Pfeil markiert.


Du siehtst die Codes nun von oben nach unten in der Reihenfolge, in der sie im Blog von links nach rechts angezeigt werden. EIN Icon geht immer von <td width="32"> bis </td>. Solltest du eines der Icons nicht brauchen, so kannst du es einfach entfernen, indem du also den kompletten Icon-Code jeweils von <td width="32"> bis </td> (beides inklusive, nicht nur den Code dazwischen!) markierst und löschst.

Sollte Dir ein Icon fehlen, dann gib mir Bescheid und ich reiche es bei Gelegenheit nach ;)

Beim Einfügen der Links ist nun zu beachten, dass wirklich nur der Linktext ersetzt werden darf - alle :// oder Anführungszeichen müssen stehenbleiben!

Ersetzte nun YOURFACBOOK-Page mit deiner FB-Id, YOURINSTA-ID mit deiner Instagram-ID und so weiter. Bei E-Mail ersetzt du einfach YOUREMAIL mit deiner normalen E-Mail-Adresse.

Anschließend speichern und fertig sind deine Social Icons.


Bearbeitet immer nur ein Icon, speichert dann und schaut im Blog, ob alles stimmt. Wenn ihr irgendwo einen kleinen Fehler habt und habt aber schon 2 oder 3 Links bearbeitet, dann ärgert ihr euch hinterher, wenn ihr von vorne anfangen müsst.

Sollte etwas nicht geklappt haben:
1. aktualisiert mal den Browser (F5). Wenn dann die Änderung immer noch nicht angezeigt wird, dann...
2. kontrolliert nochmal mit dem Originalcode hier im Tutorial, ob euch nicht doch vielleicht eine Klammer oder ein Gänsefüßchen o.Ä. flöten gegangen ist. Wurde der Code an der richtigen Stelle eingefügt? Stimmt eure FB-, Insta, oder Pinterest-Id?

Meist sind es nur solche Kleinigkeiten, die es nicht ganz funktionieren lassen.
Wenn es trotz allem nicht klappt , hat dein Blog mit Sicherheit schon Formatierungen, die diesen Code einfach blockieren. Zur Not kannst du hier nachfragen oder aber im Layout das Gadget einfach wieder löschen, wenn es wirklich nicht funktionieren will.

Bei Fragen schreibt bitte hier ein Kommentar - so haben dann später alle was von meiner Antwort ;)


Viel Spaß!!


35 Kommentare

  1. COOL, danke dass Du immer Dein Wissen und Deine Kenntnisse mit uns teilst <3 <3 <3
    und Dir die Mühe machst, das alles so gut zu erklären !
    Liebe Grüße
    Nane

    AntwortenLöschen
    Antworten
    1. Mach ich doch gerne, wurde ja oft nach gefragt. Ich hoffe nur, dass es auch diesmal verständlich war ;)

      Drück dich ♥

      Löschen
    2. ....ich frage mich nur gerade wo die Kommentare ( und DANKESCHÖNS ) der anderen sind, die sich auch über solche nützlichen und tollen Erklärungen freuen ??????????????
      :-(

      Löschen
  2. So, da war ich ausnahmsweise mal richtig "schnell" in der Umsetzung. Vielen lieben Dank für das Tutorial. Ich hatte mein fixiertes Top-Menu mal nach irgendeiner anderen Anleitung erstellt und musste nun erst einmal schauen, wie ich das jetzt hinbekomme, die Social Medias noch einzubinden. Wollte schon fast aufgeben *lach* und hab dann so als letztes Mal noch versucht, deinen Code einfach alleine in ein Gadget zu packen und *schwup* schon habe ich ich meine Icons auch noch oben im Menu fixiert. Finde ich richtig richtig klasse so, und passt farblich bei mir auch zu 100%. Danke schön, ich drück Dich ganz lieb und freu mich über diese kleine aber feine Veränderung in meinem Blogdesign. Schönen Abend noch und viele liebe Grüße, Tini

    AntwortenLöschen
    Antworten
    1. Ja, manchmal geht's auch ganz unkompliziert, je nachdem, welche Codes der Blog so hat. Freut mich, dass es so für dich geklappt hat.

      Ganz herzliche Grüße
      Daniela

      Löschen
  3. Danke Danke Danke!!
    Das ist sowas von kuhl, Dani!! <3 :-D

    Ganz liebe Grüße!
    Sanni (c:

    AntwortenLöschen
    Antworten
    1. Bitteschööön :D

      Herzliche Grüße zurück ♥

      Löschen
  4. Wow, vielen vielen Dank! Genau das Richtige für Honks wie mich! ;-)
    Lieb von dir, dass du das mit uns teilst!
    Viele Grüße,
    Catharina

    AntwortenLöschen
    Antworten
    1. Gern geschehen, Catharina ;)

      Herzliche Grüße
      Daniela

      Löschen
  5. Vielen Dank für das tolle Blog-Tutorial... leider klappt es bei mir mit der Hinterlegung der Linkadressen nicht obwohl ich alle Zeichen stehen lassen habe. Ich habe meine z. B. Google+ Seite aufgerufen, den Link kopiert, an entsprechender Stelle eingesetzt und beim "Test" heißt es dann, Seite nicht gefunden... *help* - woran könnte das liegen? Vielen Dank schon mal und herzallgäuerliebste Grüße *Saskia*

    AntwortenLöschen
    Antworten
    1. Hallo Saskia,


      Euer Menü ist sehr in die Länge gezogen, weil ihr so viele Links habt. Vielleicht solltet ihr WORD-SPACING oder die Schriftgröße etwas verringern (aber das hat nicht mit dem Funktionieren der Icons zu tun).

      Ich bleibe mal bei Deinem Beispiel von G+. Du musst dies kopieren: plus.google.com/110040435296295889422/posts und damit YOURG+ID ersetzen.

      Waren die Icons überhaupt zu sehen, bevor du mit der Linkbearbeitung begonnen hast?


      GLG Daniela

      Löschen
    2. bei mir ging es auch erst nicht... das lag aber daran, dass man erst auf "speichern", dann auf "Layout speichern" gehen muss und dann auf "Blog anzeigen". Dann ging es bei mir.

      Löschen
  6. hallo daniela ;)
    ♥lichen dank für die tollen icons ... wurden gleich eingebaut !!!
    deine erklärung dazu war super - merciiiiiiiiiiiiiii
    viele liebe grüsse isi

    AntwortenLöschen
  7. Ohhhh wie toll.... find ich super das du dir die Mühe machst ;D.... bin froh das ich bei deinem Blog gelandet bin... danke!!!

    AntwortenLöschen
  8. Ohhhh, das Tutorial kommt gerade zur rechten Zeit. Vielen, vielen Dank! Werde mich am Wochenende mal ransetzen. :-)
    Liebe Grüße, Kerstin M.

    AntwortenLöschen
  9. WOW! Ganz lieben Dank für dieses tolle Tutorial und die guten Erklärungen! Ich tue mir oft schwer mit der HTML Sprache, aber du hast alles soooo verständlich erklärt! Richtig toll!! ♥

    Liebe Grüße, Jessica :)

    AntwortenLöschen
  10. Danke!! Einfach nur DANKE! <3

    AntwortenLöschen
  11. Ich würde am liebsten zu Dir springen und Dich in den Arm nehmen! Vielen Dank dass Du deine ganzen Sachen mit uns teilst. DANKE!!!
    Liebe Grüße,
    Marié

    AntwortenLöschen
  12. DANKE DANKE DANKE! Hab es gerade entdeckt und direkt umgesetzt! Perfekt!

    AntwortenLöschen
    Antworten
    1. Ich stehe gerade etwas auf dem Schlauch... die Icons erscheinen, die Links klappen und ich hab mir die Icons etwas kleiner gemacht. Allerdings hätte ich die Icons gerne zusammen mit den Überschriften im Menü zentriert. Momentan ist das Menü zentriert und die Icons nebendran gequetscht. An welchem Code muss ich wo basteln, damit beides im Menü zentriert ist (und links und rechts vom Seitenrand gleich viel Abstand ist) so wie bei dir?

      Liebste Grüße
      Katharina

      Löschen
    2. Hi Katharina,

      mein aktuelles Menü ist ein ganz anderes, das nicht auf die gleiche Weise gemacht ist, sondern im Blogcode verschachtelt ist. Das hier zu erklären würde den Rahmen sprengen und ist für Nicht-Programmierer unter keinen Umständen zu empfehlen ;)

      Liebe Grüße
      Daniela

      Löschen
  13. Danke für die ausführliche Erklärung. Muss es später mal in Ruhe nacharbeiten. Ich habe bisher nur Instagram drin. Der Rest hat nie funktioniert.
    Lg, Birgit

    AntwortenLöschen
  14. Hey Katharina,
    ich wollte mich nur für diese tolle und vor allem ausführliche Erklärung bedanken!! Hat echt super geklappt, obwohl ich sowas noch nie vorher gemacht habe!!
    Ganz liebe Grüße

    Lisa
    von lisasbeautyglamour.blogspot.de

    PS: Vielleicht hast du ja noch ein paar Tipps ❤︎

    AntwortenLöschen
  15. Super Tutorial! Du hast mir als absoluten Neuling wirklich enorm weitergeholfen! Vielen Dank dafür!!!! <3

    Nun hab ich aber noch eine Frage: neben den Social Icons hast du noch eine Lupe für die Suchfunktion - hast du das auch irgendwo schon erklärt, wie das geht?

    Viele liebe Grüße :)

    AntwortenLöschen
    Antworten
    1. Hi Anna Bella,


      leider nein. Mein aktuelles Menü ist mittlerweile ein anderes, das im Template schon so vorgegeben war.

      Liebe Grüße
      Daniela

      Löschen
  16. Vielen Dank für das super Tutorial.
    Das war ja wirklich einfach und die Icons sind großartig <3
    Jetzt noch eine Frage. Kannst du mir verraten, wie du die Suchfunktion oben in das Menü mit eingebunden hast?

    Liebe Grüße
    Franzi

    AntwortenLöschen
    Antworten
    1. Hi Franzi,

      leider nein. Mein aktuelles Menü ist mittlerweile ein anderes, das im Template schon so vorgegeben war.

      Liebe Grüße
      Daniela

      Löschen
  17. Danke auch für diese super Anleitung....auch geklappt. lg Bella

    AntwortenLöschen
  18. Ich habe noch eine Frage......bei mir erscheint am pc alles super, links funktionieren und es sieht alle so aus wie ich mag......aber leider überdecken die icons auf dem Tablet den Menüpunkt "Kontakt".......sicherlich weil ich einige icons dort oben habe, aber hast du eine Idee wie ich das ändern kann????

    Mein herzensüßer Blog

    lg Bella

    AntwortenLöschen
    Antworten
    1. Hi Bella,

      das liegt ganz einfach an der Kombination deiner Blogvorlage mit der Formatierung der Icons. Ich kann das aber jetzt nicht abändern, weil es ja tausende verschiedener Vorlagen und Formatierungen gibt - da würde ich ja nie fertig werden ;)


      Sorry & trotzdem ganz herzliche Grüße
      Daniela

      Löschen
  19. Vielen lieben Dank für das tolle Tutorial. kann man die Icons auch zusätzlich seitlich anlegen, sowie bei dir unter dem Bild?
    lieben Dank
    Maren

    AntwortenLöschen
  20. Anonym19.2.16

    Danke für die tollen Icons! Habe sie gut auf meinem Blog integriert bekommen.
    Hast Du evtl. auch ein Icon für Youtube?
    LG Kathrin
    http://www.addictedtofashionbykathrin.de

    AntwortenLöschen
  21. Hallo,
    erst einmal vielen Dank für dieses und die zahlreichen anderen, hilfreichen Tutorials...
    Ich habe die Icons erfolgreich eingebunden, jedoch erscheinen sie bei mir in der Zeile unter meinem Menü.
    Der /div kommt dahinter, sodass sie doch theoretisch in der Ausrichtung der kompletten Menüzeile inbegriffen sein müssten, aber irgendwie will das bei mir nicht.
    Ich kann in dem Code für die Buttons auch right durch center ersetzen, dann sind sie mittig (so wie aktuell). Bleibt right stehen, sind sie links (bei left auch).
    Hast du da noch einen Tipp für mich?

    Vielen Dank im Voraus.

    Lieben Gruß von
    Steffis Bloglife

    AntwortenLöschen
  22. Meine Frage hat sich soeben erledigt (manchmal sollte man sich einfach lange genug mit dem Problem auseinander setzen ;))
    Tausend Dank für die Icons, ich werde Deinen Beitrag noch teilen, der ist einfach Gold wert ♥

    AntwortenLöschen
  23. Vielen vielen Dank für die genaue Erklärung und Beschreibung! Nach so toll beschriebenen Tutorials habe ich schhon ewig gesucht. Einfach nur TOP und es hat alles geklappt :)

    Liebe Grüße

    Eileen

    AntwortenLöschen

Danke für deine Nachricht!

Das könnte dich auch interessieren

Copyright

Der Inhalt dieser Seiten ist mein Eigentum und unterliegt dem deutschen Urheberrecht. Die Kopie, Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen vorab meiner schriftlichen Zustimmung.
© www.misses-cherry.de 2009-2017

Kontakt

Name

E-Mail *

Nachricht *