Hi ihr lieben,
schon lange wollte ich euch ein Tutorial zu meinen schwebenden Social Media Icons schreiben, heute komme ich endlich dazu.
Anleitung:
1. Entscheidet euch für Icons, eine große Auswahl findet ihr hier…
2. Sucht euch die Icons aus, die ihr auf eurem Blog haben möchtet. Ich habe mich für die 5 gängigsten entschieden
3. Ladet die Icons auf einer Seite hoch. (Ich verwende immer upload.de)
4. Nun kommen wir auch schon zu dem Code den ihr benötigt.
<style>
#floatbubble {position:fixed; left: 10px; bottom: 70px; width:70px; z-index:999;}
#floatbubble a {display:block; width:70px; height:70px; background-position: center; background-repeat: no-repeat; white-space: nowrap;}
#Facebook a:link {background-image:url(LINK ZUM BILD); }
#Bloglovin a:link {background-image:url(LINK ZUM BILD); }
#Blogconnect a:link {background-image:url(LINK ZUM BILD); }
#Google a:link {background-image:url(LINK ZUM BILD); }
#Instagram a:link {background-image:url(LINK ZUM BILD); }
</style>
<div id=’floatbubble’>
<div id=’Facebook’><a href=”LINK” target=”_blank”></a></div>
<div id=’Bloglovin’><a href=”LINK” target=”_blank”></a></div>
<div id=’Blogconnect’><a href=”LINK” target=”_blank”></a></div>
<div id=’Google’><a href=”LINK” target=”_blank”></a></div>
<div id=’Instagram’><a href=”LINK” target=”_blank”></a></div>
</div>
LINK ZUM BILD=Da
fügt ihr den Link ein, der zu eurem Bild führt. Ihr findet diesen Link
auf upload.de oder auf der anderen Seite für die ihr euch entschieden
habt.
LINK=hier fügt ihr euren Link ein der zu dem bestimmten Account führt.
Wenn ihr damit fertig seid, habt ihr es eigentlich schon geschafft.
Unter Layout-Gadget hinzufügen-HTML/Java Script fügt ihr einfach den oberen Code ein und schon erscheinen eure schwebenden Icons in der Sidebar.
Wenn ihr eure Seite nach unten scrollt, bleiben die Icons mit diesem Code immer an Ort und Stelle.
Ich hoffe ich konnte euch helfen 🙂
Übers Wochenende verabschiede ich mich nun nach Amsterdam. Man liest sich nächste Woche.
Rita Vuia
26 Juni
Ich grüße Dich und wünsche weiterhin alles erdenklich Gute!
Nina Pustenblumenzauber
27 Juni
Tolle Hilfe!
ich habe es direkt umgesetzt!
Larissa Schenten
27 Juni
Ich würde, wenn du magst, gerne am Sonntag eine gegenseitige Blogvorstellung machen, weil mir dein Blog gefällt und du eine nette Leserin bist :-).
Liebe Grüße, Lari
(Heute wird übrigens das Gewinnspiel um die Echthaarextensions auf meinem Blog veröffentlicht :-))
Alison Videoland
30 Mai
So etwas suche ich schon Ewigkeiten. Das ich das hier zufällig auf deinem Blog finde, hätte ich nicht gedacht : D Super, werde ich Morgen mal ausprobieren. Danke für die Anleitung.
Süße Grüße
Alison
natalieorlob
30 Mai
Das freut mich sehr, das dir mein Beitrag weiterhelfen kann 🙂
kleine Eurydike
22 Juli
Sieht prima aus. Tolles Tutorial
Susi
15 September
Liebe Natalie,
Danke für deinen detaillierte Anleitung! Du hast mir sehr geholfen. Ich werde es heute Abend direkt ausprobieren und melde mich dann zurück, ob es geklappt hat!
Ganz liebe und herzliche Grüße,
Susi
The inspiring life
15 September
Sehr gern!
Bei weiteren Fragen kannst du dich auch gern melden.