Free Blogbuttons mit Anleitung

5 Kommentare


Blogbuttons für die Sidebar inkl. Anleitung 

| Heute gibt es wieder ein Blog-Tutorial mit Freebies dazu. Die Buttons kommen in 2 verschiedenen Stilen und 4 verschiedenen Farben. Set 1 bis 3 sind die Watercolor Button-Sets. Jeder Button hat einen Wasserfarben-Banner als Hintergrund und es gibt die Sets in grau, pink & petrol.




Set 4 bis 7 kommt mit unifarbenen Hintergrundbannern in pink, schwarz, petrol & grau. Pro Set sind jeweils die folgenden 16 Labels enthalten: Über mich, Facebook, Instagram, Pinterest, Twitter, Sponsoren, Impressum, Kontakt, Blogroll, Galerie, Mein Shop (Shoppen), DIY, Nähen, Plotten, Sticken und Stricken.


Ihr könnt immer das komplette Farbset als Zip Datei runterladen und Euch dann die Buttons aussuchen, die Ihr braucht.

Download Watercolorbuttons pink
Download Watercolorbuttons petrol
Download Blogbutton uni pink
Download Blogbutton uni schwarz
Download Blogbuttons uni petrol
Download Blogbuttons uni grau

So bindest du die Buttons in die Sidebar ein:



Ganz wichtig

Bevor Ihr mit Änderungen beginnt, macht bitte ein Backup Eures aktuellen Layouts:
Dashboard > Backup/Wiederherstellung > Vollständige Vorlage herunterladen

So etwa sehen die Buttons dann in deiner Seidebar aus:

Nach dem Runterladen:

Lege einen neuen Post an ohne ihn zu speichern. Einen Titel gibst du ihm auch nicht, denn er wird sowieso am Ende wieder gelöscht. Er dient lediglich dem Bilder (Button)-Upload.

Klicke in den Post und lade die Buttons genauso hoch, wie du sonst auch Bilder in deine Posts hochlädst.



Nach dem Hochladen:

Du benötigst diesen geöffneten Post mit den Buttons und zusatzlich noch das Layout (gleichzeitig), um das Gadget in der Sidebar hinzuzufügen und bearbeiten zu können.

Klicke hierfür mit der rechten Maustaste auf deinen orangen Blogger Button --> Link in neuem Tab öffnen. Nun ist der Post geöffnet und gleichzeitig in einem neuen Fenster das Dashboard.




Sidebar-Gadget anlegen und bearbeiten:

Gehe auf Layout und klicke im Sidebarbereich auf Gadget hinzufügen --> HTML/JavaScript.

Kopiere den folgenden Text und gib ihn dort ein:

<!-- START Misses Cherry Blogbuttons -->
<div style="text-align:center;">
<a href="LINK1"  alt="BUTTONNAME1"><img src="BILDADRESSE1" /></a>
<br />
<a href="LINK2"  alt="BUTTONNAME2"><img src="BILDADRESSE2" /></a>
<br />
<a href="LINK3"  alt="BUTTONNAME3"><img src="BILDADRESSE3" /></a>
<br />
<a href="LINK4"  alt="BUTTONNAME4"><img src="BILDADRESSE4" /></a>
<br />
</div>
<!-- END Misses Cherry Blogbuttons -->


Jetzt musst du dem Code noch seine benötigten Daten geben wie zB die Links, zu denen die Buttons führen sollen, Namen der Buttons und wie die Adresse der Buttons lautet.

Das Ziel, zu dem der Link führen soll, muss natürlich schon vorhanden sein, zB. als Blogseite, Post, Label oder externer Link zur FB-Seite, Instagram etc.


Bearbeiten:

Wechsle zum Post, in den du die Buttons hochgeladen hast. Suche dir den 1. Button aus, rechte Maustaste darauf --> Bildadresse kopieren:



Button einfügen:

Wechsle wieder zum HTML-Gadget und ersetze "BILDADRESSE1" mit der grade kopierten Adresse. Achte darauf, dass die Gänsefüßchen davor und danach stehen bleiben (ohne Leerzeichen vor oder nach der Bildadresse).

Link (Ziel) einfügen:

Gehe nun zu der Seite oder dem Label, zu dem der Klick auf den Button führen soll und kopiere die Adresse aus der Adresszeile. Ersetze "LINK1" mit der grade kopierten Adresse (Achtung: Gänsefüßchen).

Name einfügen:

Ersetze nun "BUTTONNAME" mit dem Name deines Buttons, zB. Über mich, Nähen, Facebook etc. Der Name ist wichtig, weil dieser angezeigt wird, wenn das Bild mal nicht geladen werden kann. So hat man dann immernoch die Möglichkeit den Link anzuklicken, auch ohne Button.


Speichere das Gadget und das Layout und schau im Blog nach, ob der Button da ist und der Link richtig funktioniert.

Wenn Alles genau richtig ist, dann verfährst du mit den anderen Buttons genauso:
1. Bildadresse aus dem Post, 2. Linkadresse des Zieles, 3. Name des Buttons.

Wenn nach dem ersten Button schon etwas nicht stimmt, dann checke nochmal genau den Code, schau nach, ob die Gänsefüßchen noch da sind und der Code stimmt (lang ist er ja nicht ;)

Möchtest du mehr als nur 4 Buttons (wie im kopierten HTML-Code) haben, dann klicke an der gewünschten Stelle hinter <br /> , dann mit Enter in eine neue (leere) Zeile und füge dort für jeden weiteren Button jeweils nochmal den einzelnen Button-Code ein:

<a href="LINK1"  alt="BUTTONNAME1"><img src="BILDADRESSE1" /></a>
<br />


Wenn du fertig und zufrieden bist, schließt du den Post mit den Bildern einfach. Da du ihn ja nur zum Hochladen der Buttons verwendet hast und diese ja nun auf dem Server liegen, brauchst du den Post nicht mehr.


Viel Spaß mit den Buttons!



5 Kommentare

  1. Oh, super! Vielen Dank :-)
    Das werde ich in den nächsten Tagen mal versuchen.
    Liebe Grüße
    Anette

    AntwortenLöschen
  2. Super, vielen Dank für die Freebies und die gute Anleitung !
    Viele Grüße, Synnöve

    AntwortenLöschen
  3. Vielen Dank für das Freebie ❤
    Das kommt mir sehr gelegen, da ich gern meine Social Media Buttons einheitlich haben wollte.
    LG Jasmin

    AntwortenLöschen
  4. Hey ich finde es echt toll, dass du immer so gute Tutorials machst aber ich hab eine Frage: Bei mir stehen immer noch die Namen von dir auf den buttons obwohl ich meine in den Code geschrieben habe. Falls du weißt woran das liegt würde ich mich über eine Antwort freuen <3 (Mail: everything.seems.so.rosy@gmail.com)

    LG. Theresa

    AntwortenLöschen
    Antworten
    1. Hi Theresa,
      das liegt daran, dass es Grafiken sind und die Beschriftung bereits enthalten ist. Du kannst die nicht im Code ändern ;)

      LG Daniela

      Lö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