Schwebendes Facebook, Twitter, Google+ Widget auf der rechten Seite

Nun haben wir schon etwas länger keine neuen Artikel mehr erstellt, da jedoch mehrere Anfragen bezüglich unseres "Facebook, Twitter, Google+ Widget" auf der rechten Seite der Page kamen, wollen wir euch hier diesem Widget näher bringen.

Im Grunde haben wir dieses Widget nur aus einem Artikel unseres Partnerblogs Visualbasix entnommen, welcher bereits ein Tutorial im Artikel "Social Media Widget Generator" dazu geschrieben hat. Das Widget funktioniert nach dem Schubladensystem, fährt man mit der Maus über einen der Icons fährt die zugehörige Social Media Seite raus, einfach mal bei uns rechts ausprobieren.

Tutorial:
1. Bei Blogger einloggen

2. Dashboard -> Vorlage -> HTML bearbeiten -> Fortfahren ->  Widget-Vorlagen komplett anzeigen

3. Dort nach </head> suchen (Strg+F)

4. Nun trägst du diesen Code vor </head> ein und klickst auf  "Vorlage speichern".

<link href='https://blognpctricks.googlecode.com/svn/css/4in1widgetv2.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://apis.google.com/js/plusone.js&apos; type=&apos;text/javascript' type='text/javascript'/>
<script src='http://makingdifferent.googlecode.com/files/fanbox_init.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery(&quot;#facebook_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -200}, 500); });    jQuery(&quot;#twitter_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#twitter_right&quot;).stop(true,false).animate({right: -250}, 500); });     jQuery(&quot;#google_plus_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#google_plus_right&quot;).stop(true,false).animate({right: -154}, 500); });    jQuery(&quot;#feedburner_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery(&quot;#feedburner_right&quot;).stop(true,false).animate({right: -303}, 500); });    });
</script>

5. Nun musst du nur noch deine Daten in den Generator ein.
Deine Facebook Seiten URL | Dein Twitter Nutzername | Deine Feedburner ID



6. Generieren -> Auf Blogger Laden -> Deinen Blog aussuchen -> Speichern und fertig!

Hier noch ein Video Tutorial von Visualbasix: