26.11.2010

Floating Buttons - schwebende Schaltflächen

Wer eine Anleitung für ein Blogger-Gadget für Floating buttons bzw. schwebende Schaltflächen auf deutsch sucht, der hat jetzt Glück.
Man braucht nicht in das HTML der Vorlage eingreifen.
Es wird "nur" ein Gadget hinzugefügt.
Vorteilhaft zur einfachen Installation!
Ein Beispiel findest du hier unter Buttons. (siehe oben, neben Disclaimer)

Hat mich etwa 1 Stunde suchen und die Kombination von 4 englischsprachige Seiten gebraucht....
Was man nicht alles macht.

Los geht´s:
  • Gadget hinzufügen

1. Einloggen auf deinem Blogger Konto/Dashboard.
2. Gehe zu Design;  Seitenelemente.
3. Klick Gadget hinzufügen.
4.Im "Gadget hinzufügen"-Fenster, HTML/Javascript auswählen.
5.Kopiere den Code in die Content Box.
install-floating-social-media-buttons.html
(nur per Link, da sonst alle <> in [] geändert werden müssten, da ansonsten der Code verarbeitet wird, was er ja auch soll)
6. Gadget speichern.
7. Klick auf  Speichern in der rechten oberen Ecke.
Quelle: bloggersentral.com


CODEZEILEN  zum besseren Finden:

01
02&lt;style&gt;
03#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
04#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
05.fb_share_count_top {width:48px !important;}
06.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
07.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
08.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
09style&gt;
10&lt;div title="Get this at BloggerSentral.com"&gt;
11&lt;div id='pageshare'&gt;
12&lt;div class='sbutton' id='fb'&gt;
13&lt;a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php"&gt;Sharea&gt;&lt;script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"&gt;script&gt;
14div&gt;
15&lt;div class='sbutton' id='rt'&gt;
16&lt;script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'&gt;script&gt;
17div&gt;
18&lt;div class='sbutton' id='su'&gt;
19&lt;script src="http://www.stumbleupon.com/hostedbadge.php?s=5"&gt;script&gt;
20div&gt;
21&lt;div class='sbutton' id='digg'&gt;
22&lt;script src='http://widgets.digg.com/buttons.js' type='text/javascript'&gt;script&gt;
23&lt;a class="DiggThisButton DiggMedium"&gt;a&gt;
24div&gt;
25&lt;div class='sbutton' id='gb'&gt;
26&lt;a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'&gt;
27&lt;script src='http://www.google.com/buzz/api/button.js' type='text/javascript'&gt;script&gt;
28a&gt;div&gt;
29div&gt;
30div&gt;
31

    • Anpassung

    1. Vertikale Einstellung
      Ändere den Wert bottom in Codezeile 2. Der Code stellt die Schaltfläche im Verhätlnis  zum tiefsten Stand (bottom) Ihres Browser-Fensters ein. Um die Entfernung zum tiefsten Stand des Fensters zu fixieren, selbst wenn das Fenster in der Größe angepasst wird, gebe den Wert in px (Pixel) statt % an.
    2. Horizontale Einstellung
      Ändere den Wert margin-left in Codezeile 2. Negativer Wert schiebt die Schaltfläche links von der Hauptkolumne, positiver Wert schiebt es nach rechts.
      Um die Schaltfläche relativ zum linken oder rechten Rand des Browser-Fensters einzustellen, ersetze margin-left mit left (wie in left:10px;) beziehungsweise right (wie in right:10px;).
    3. Mehr Schaltflächen hinzufügen                                                                                                         Du kannst jede weitere Schaltfläche eines Netzwerks oder eine Teilen-Schaltfläche hinzufügen. 
    4. Einfach den Schaltflächen-Code  zwischen 2 div setzen:  
      1 div class="sbutton"
      2 HIER KOMMT DER CODE REIN
      3 div
      und und füge es direkt vor dem zweitletzten div in Linie 29 ein.

      Quelle: Code - bloggersentral.com

    • Tweetbutton
    Wenn du die Tweet-Schaltfläche in die von Twitter ändern möchtest, dann ändere den Code, den du über tweetbutton bekommst, in Zeile 16. Das sieht dann so aus:
      a class="twitter-share-button" data-count="vertical" data-lang="de" data-via="DEIN TWITTERNAME" href="http://twitter.com/share"[Tweet[/a[]script src="http://platform.twitter.com/widgets.js" type="text/javascript"
      Quelle:  twitter.com/tweetbutton

      • MySpace einbinden

      Wenn du einen MySpace Button  hinzufügen möchtest, dann
        1.  wähle einen Button unter wiki.developer.myspace.com 
        2. in Zeile 29 folgendes einfügen: 
        3. [div class="sbutton"] 
          HIER DEN CODE VON MYSPACE EINSETZEN 
          [div]
           
        • Email hinzufügen
            Wenn du eine Emailschaltfläche einbinden möchtest, geht das mit folgendem Code:
              [a href="mailto:HIER DEINE EMAILADRESSE"][img src="URL DEINER SCHALTFLÄCHE"/][/a] Dazu vorher ein Bild hochladen (zB. bei photobucket.com  oder abload.de ) , damit du eine URL zum Bild hast.
              •  Hintergrundfarbe 
                weißen Hintergrunnd in transpardent  ändern funktioniert mit der Änderung von background-color:#fff in  background-color:none in der Codezeile 3. 
               
               
              Noch Fragen? Quellenangaben: bloggersentral.com myspace.com twitter.com