Mittwoch, 16. Januar 2013

Ein kleines Tutorial: Horizontale Social Media und Follow Buttons im Header

So, da ich gefragt wurde, wie ich die Buttons da oben in den Header bekommen habe, mache ich mal ein kleines (mein erstes) Tutorial. Ich bin in Sachen HTML echt kein Profi - es kann also durchaus sein, dass es eine elegantere Lösung gibt - aber wie ihr in meinem Header seht: Es ist eine Variante, die funktioniert ;-)



Ausgegangen bin ich von einem Tutorial für "schwebende" Buttons bei Copy Paste Love. Da gibt es zwei grundlegende Dinge, die ich geändert habe.

1. Meine Buttons sollten nicht "schweben" (das heißt, sich beim Scrollen des Blogs nicht mitbewegen), sondern dauerhaft an einer Stelle im Blog bleiben - bei mir: Im Header-Bereich

2. Im CPL-Tutorial sind die Buttons senkrecht untereinander angeordnet - ich wollte sie waagerecht nebeneinander haben.

Also, fangen wir an: 

SCHRITT 1: Zuerst braucht ihr natürlich die Buttons. Da gibt es schon ganz viele Vorlagen im Internet (zum Beispiel hier). Ihr könnt die Buttons natürlich auch selbst erstellen, zum Beispiel mit Gimp. 
 
Wenn ihr wollt, dass die Buttons, wie bei mir, die Farbe wechseln, wenn jemand mit der Mouse darauf zeigt, braucht ihr für jeden Button zwei Bilder - eins für den "Normalzustand" und eins fürs Mouse-over. Überlegt euch auch vorher, wie groß die Buttons sein sollen. Meine oben im Header sind zum Beispiel Quadrate mit einer Seitenlänge von 46 Pixeln.


Die ladet ihr jetzt irgendwo hoch, sodass ihr eine Bild-URL bekommt. Ich habe zum Beispiel directupload benutzt.
Wichtig ist, dass ihr einen Direkt-Link zum Bild bekommt, den ihr auch an der Endung erkennt. Sie entspricht dem Format, in dem ihr das Bild erstellt/hochgeladen habt.


SCHRITT 2: Habt ihr die Buttons, braucht ihr noch die Links zu den Seiten, auf die eure Buttons die Leser schicken soll. Die meisten davon findet man ganz einfach - wenn ihr zum Beispiel schon einen Widget im Blog habt, könnt ihr da bei "Blog-Connect" und "Bloglovin" einfach mit rechts draufklicken und "Linkadresse kopieren" wählen - schon habt ihr sie. 

Der Link zu eurem Blogger/Google-Friend-Connect lautet zum Beispiel 

"http://www.blogger.com/follow-blog.g?blogID=DEINE ID-NUMMER"

Die ID-NUMMER findet ihr, wenn ihr auf eurer Blogger-Oberfläche seid, in der Adresszeile.

SCHRITT 3: Jetzt öffnet ihr ein HTML/JavaScript-Widget. Bei Blogger findet ihr das unter "Layout" --> "Gadget hinzufügen".

Der Code, den ihr da jetzt reinschreiben müsst, besteht aus zwei Teilen: Einem "style"-Teil, in dem ihr quasi festlegt, wie das alles aussehen soll, und einem "div"-Teil, in dem ihr euren "Container" definiert. 

DER CODE

<style>
#floatbubble {position:absolute; right: 0px; bottom: 40px; width:300px; z-index:999;}
#floatbubble a {display:inline-block; margin-right: 5px; width:46px; height:46px; background-position: center; background-repeat: no-repeat; white-space: nowrap;}

#facebook a:link {background-image:url(DEINE BILD URL); }
#blogconnect a:link {background-image:url(DEINE BILD URL); }
#blogger a:link {background-image:url(DEINE BILD URL); }
#bloglovin a:link {background-image:url(DEINE BILD URL); }
#feed a:link {background-image:url(DEINE BILD URL); }

#facebook a:hover {background-image:url(DEINE BUNTES_BILD URL); }
#blogconnect a:hover {background-image:url(DEINE BUNTES_BILD URL); }
#blogger a:hover {background-image:url(DEINE BUNTES_BILD URL); }
#bloglovin a:hover {background-image:url(DEINE BUNTES_BILD URL); }
#feed a:hover {background-image:url(DEINE BUNTES_BILD URL); }
</style>

<div id='floatbubble'>
<div id='facebook' style='float:left'><a href='DEIN LINK' target='_blank'/></a></div>
<div id='blogconnect' style='float:left'><a href='DEIN LINK' target='_blank'/></a></div>
<div id='blogger' style='float:left'><a href='DEIN LINK' target='_blank'/></a></div>
<div id='bloglovin' style='float:left'><a href='DEIN LINK' target='_blank'/></a></div>
<div id='feed' style='float:left'><a href='DEIN LINK' target='_blank'/></a></div>
</div>

CODE ENDE

ERKLÄRUNGEN:
  • "floatbubble" ist der Name des Containers. Den habe ich aus dem Tutorial von CPL übernommen - im Prinzip ist es aber egal, wie ihr den nennt, solange ihr darauf achtet, dass die Definition im <div>-Teil mit dem Namen im <style>-Teil übereinstimmt. Am Beispiel der id "blogger" habe ich im Code grün markiert, was zusammen gehört. Wichtig: Mit id='...' definiert ihr den "Namen", mit #... ruft ihr die id dann wieder auf. 
  • In der ersten Zeile in den geschweiften Klammern nach "floatbubble" steht jetzt, wie und wo ihr den Container positionieren wollt - eingegeben sind da jetzt meine Werte, die müsst/könnt ihr dann variieren. "position" sagt, wie ihr etwas positionieren wollt. Ich habe "absolute" zugewiesen. Das bedeutet, dass mein Container an einer festen Stelle - abhängig von den übergeordneten Elementen - angeordnet ist. Er scrollt mit!  Mit "fixed", wie im CPL-Tutorial, schweben die Buttons dagegen.
  • Danach folgen die Werte für die Position, hier mit "right" und "bottom" - genauso gibt es auch "left" und "top". Sie gehen vom jeweiligen Rand des Bezugssystems, des übergeordneten Elements aus - erhöht ihr also den Wert von "bottom" bewegen sich eure Buttons wohin? Richtig: Nach oben! Weil ihr den Abstand vom unteren Rand erhöht. Beachtet bitte, dass das übergeordnete Element davon abhängt, wo ihr euer Gadget im Layout bei Blogger anordnet. Im Prinzip sollte es egal sein (ich habe zumindest verschiedene getestet), nur wenn es einmal irgendwo ist und ihr die Werte zugewiesen habt, lasst es da. Meins ist zwischen "Header" und "Seiten" in der Kopfzeile. Um die richtige Position für eure Buttons zu finden, ändert ihr jetzt einfach die Werte...
  • "width" legt jetzt die Breite des Containers fest. Wären die Buttons untereinander, würde hier die Breite eines Buttons reichen (bei mir 46px) - da sie nebeneinander liegen, muss es groß genug sein, um alle unterzubringen...plus Abstand.
  • In der zweiten Zeile erfahren wir jetzt durch"display", wie die Elemente angezeigt werden sollen. "inline-block" sorgt dafür, dass sie in einer horizontalen Reihe angeordnet werden ("block" erzeugt eine vertikale Anordnung). Über "margin-right" habe ich einen Abstand zugewiesen, den ein Button zum nächsten haben soll. Bei "width" und "height" müsst ihr jetzt die Maße eurer Buttons eintragen - wie schon gesagt: 46px mal 46px sind meine. Haben eure andere Abmessungen, bitte ändern!!!
  • Anschließend ruft ihr jetzt mit # eure im <div> mit einer id zugewiesenen Elemente auf. Das sind jetzt meine fünf Buttons - wenn ihr mehr habt oder andere, könnt ihr hier beliebig ergänzen. Im ersten Abschnitt kommen nach a:link die Bild-URLs rein, wie eure Buttons im "Ruhezustand" angezeigt werden sollen.
  • Bei a:hover kommen dann die URLs hinein, die eure Buttons zeigen, wie sie aussehen sollen, wenn jemand mit der Mouse darüber fährt. Wollt ihr keine farblichen wechselnden Buttons? Dann lasst diesen Absatz einfach weg.
  • Im <div> fügt ihr jetzt einfach noch eure Links ein, auf welche die Buttons verweisen sollen. float:left sorgt dafür, dass die Buttons nebeneinander liegen.
So, ich hoffe man versteht das ein bisschen. Ich habe versucht es ein wenig ausführlicher zu beschreiben, damit ihr nachvollziehen könnt, was ich womit angestrebt habe und was ihr eventuell ändern müsst, damit es euren Vorstellungen entspricht. 

Wie schon gesagt, bin ich auch eher Laie und habe mir das - ausgehend von dem wirklich guten CPL-Tutorial - selbst zusammengebastelt. Wenn jemand Anmerkungen hat, wie man manche Sachen vielleicht noch besser lösen kann, freue ich mich über jede "Korrektur".

Natürlich könnt ihr auch alles Fragen, wenn ihr etwas nicht versteht. Ich werde mein (und falls nötig auch Googles ;-) ) Bestes geben, um sie zu beantworten.

Viel Spaß mit euren Buttons!

Kommentare:

  1. Wow, cool! Aber ich verzweifel immer an diesen Sachen :( bin wohl ein HTML - Doofi :)

    AntwortenLöschen
  2. Finde ich super, dass du es hier erklärst.....werde mich am Wochenende mal ran setzten und gucken/rum testen :)

    AntwortenLöschen
  3. ich konnte ihn soweit verändern, dass ich das bekommen habe, was ich schon seit Tagen gesucht habe!!!

    Bin dir immer noch sowas von dankbar <3

    lg
    Steffi

    AntwortenLöschen
  4. Das ist ja großartig! Vielen Dank fürs Erklären! Du hast dir viel Mühe gemacht, toll! Ich werde am WE gleich mal ein bisschen basteln und mich daran versuchen!
    Liebe Freitagsgrüße
    Anka

    AntwortenLöschen
  5. Tolle Erklärung! Danke dir.

    Grüsse
    Adi

    http://schicksalssucher.blogspot.ch/

    AntwortenLöschen
  6. Hei :-)
    Ich hab es zwar nicht hinbekommen :( aber trotzdem ist es ein toller Post :)
    Liebe Grüße Sarah ♥

    dreamof758km.blogspot.de

    AntwortenLöschen
  7. Genau danach habe ich ganz lange gesucht.
    Ganz vielen lieben Dank an dich für diese echt tolle Anleitung.
    Wie es bei mir aussieht kannst du dir gerne auf meinem Blog
    www.Jonas-Lifestyle.com
    anschauen.

    Liebe Grüße :)
    Jonas

    AntwortenLöschen