Social Media Buttons Erstellen Und Anordnen

  • Avatar von Unbekannt
    anya4foodfash · Mitglied ·

    Hallo. Ich bin neu hier und ein absoluter Anfänger wenn es um CSS geht. Ich würde gerne Social Media Buttons auf meine Website stellen. Sie sollten alle gleich groß, (wenn möglich in der gleichen Farbe) und in einem bestimmten Abstand zueinander sein. Außerdem würde ich gerne unter dem jeweiligen Button noch eine Beschriftung einfügen (z.B. unter dem bekannten Facebook „F“ Facebook schreiben). Ich würde es denk ich gerade noch hingekommen, einen fertigen code in ein text widget zu kopieren und die Bild Adresse, die Beschriftung etc. auszutauschen :-) Würde mich sehr über Unterstützung von Euch freuen. Grüße

    Der Blog bei dem ich Hilfe benötige heißt (nur für angemeldete Benutzer sichtbar).

  • Avatar von Unbekannt
    iqatrophie · Moderator ·

    Was genau meinst du mit Socia Media Buttons? Falls du die unter den Beiträgen meinst, kannst du diese in deinem Dashboard unter Einstellungen → Sharing im Abschnitt „Teilen Schaltflächen“ konfigurieren. Näheres dazu findest du auf der dazugehörigen Supportseite.

    Oder sprichst du eher von Schaltflächen in deiner Seitenleiste, die auf deine diversen Konten bei Social-Media Diensten verlinken? Falls ja, hast du diese Buttons schon erstellt? Ansonsten gibt es ein Vielzahl an frei verfügbaren, die du über eine Google-Suche findest.
    Wie groß sollten die Buttons in dem Fall sein? Wie sollen diese angeordnet ein? Alle nebeneinander oder z.B. zwei pro Zeile? Gibt es eventuell ein Beispiel, an dem du dich orientierst?

    Gruß
    Martin(IQ)

  • Avatar von Unbekannt
    anya4foodfash · Mitglied ·

    Hi Martin,
    vielen Dank für deine Antwort!! Ich meine die Icons / Schaltflächen in meiner Seitenleiste, die auf meine anderen Social-Media Konten verlinken. Die Buttons habe ich bereits erstellt. Das klappt soweit auch. Was ich nicht weiß, wie das geht ist folgendes:
    Ich hätte gerne unter den Buttons noch jeweils eine Bezeichnung sprich unter dem Facebook „F“ Icon ein kleines „Facebook“ drunter, unter dem Twitter „T“ soll „Twitter“ stehen etc. dazu müssen dann auch die Abstände zwischen den Schaltflächen anlassbar sein. Ich müsste also wissen a) wie kann ich Text unter die Schaltflächen machen b) wie kann ich die Abstände zwischen den Schaltflächen bestimmen c) wie mache ich einen Zeilenumbruch (ich denke für die Anzahl der Schaltflächen, die ich habe, würden zwei Zeilen reichen).
    Ist das irgendwie machbar?
    Vielen Dank im voraus. Gruß

  • Avatar von Unbekannt
    iqatrophie · Moderator ·

    Mein Vorschlag wäre ein Versuch mit float. Ich weiß allerdings nicht, ob der Code von WordPress ausgefiltert wird.

    <ul style="text-align:center;padding-left: 15px;">
  <li style="float:left;margin: 0px 5px;">
    <p><a href="http://pinterest.com/anya4foodfash/"><img title="Pinterest" src="http://divasmobilesolutions.com/wp-content/uploads/2012/02/pinterestbutton-e1330438214802.png" alt="Pinterest" width="35" height="35"></a></p>
    <p><a href="http://pinterest.com/anya4foodfash/">Pinterest</a></p>
  </li>
  <li style="float:left;margin: 0px 5px;">
    <p><a href="https://www.facebook.com/foodiesandfashionistas"><img title="Facebook" src="http://divasmobilesolutions.com/wp-content/uploads/2012/02/fbicon-e1329880206895.png" alt="Facebook" width="35" height="35"></a></p>
    <p><a href="https://www.facebook.com/foodiesandfashionistas">Facebook</a></p>
  </li>
  <li style="float:left;margin: 0px 5px;">
    <p><a href="http://instagram.com/foodiesandfashionistas"><img title="Instagram" src="http://divasmobilesolutions.com/wp-content/uploads/2012/09/Instagram-icon-e1348060340904.png" alt="Instagram" width="35" height="35"></a></p>
    <p><a href="http://instagram.com/foodiesandfashionistas">Instagram</a></p>
  </li>
  <li style="float:left;margin: 0px 5px;">
    <p><a href="mailto:(E-Mail nur für Moderatoren und Mitarbeiter sichtbar)"><img title="Email" src="https://cdn4.iconfinder.com/data/icons/social-icons-6/40/mail-128.png" alt="Email" width="35" height="35"></a></p>
    <p><a href="mailto:(E-Mail nur für Moderatoren und Mitarbeiter sichtbar)">GMail</a></p>
  </li>
</ul>
<p style="clear:both;"></p>
  • Avatar von Unbekannt
    anya4foodfash · Mitglied ·

    oh wow :-) tausend dank und ein ganz ganz dickes Kompliment. ich bin total happy und überrascht über, dass sich hier jemand so viel zeit und mühe nimmt, um mir zu helfen!! Werde es gleich probieren, sobald ich Zeit hab! Ganz lieben Dank.

  • Das Thema ‘Social Media Buttons Erstellen Und Anordnen’ ist für neue Antworten geschlossen.