Cara membuat Floating Share Di blog

Tweet

Step:

1. Login dulu ke blogger.com
2. Klik Tata letak
3. Di elemen klik Tambah Gadget
4. Lalu tambahkan HTML/JavaScript
5. Masukkan Script di bawah ini


              <style type="text/css">

        *{margin:0;padding:0;}
        * html #z33sHare{
        position: absolute;
        }
        #z33sHare{
        right:1%;width: 70px;background:transparant;border:0px solid #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px;
        position:fixed;
        top: 20%;
        }
        #z33sHare div{
        padding:6px 6px 6px 5px;
        }
        #stw{
        margin-left:-2px;
        }
        #sfs{
        margin-left:-5px;
        }
        </style>
        <div id="z33sHare">
        <div id="ssl-box">
        <div id="stw">
        <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
        </div>
        <div><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
        </div>
        <div>
        <script type="text/javascript">
        (function() {
        var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'http://widgets.digg.com/buttons.js';
        s1.parentNode.insertBefore(s, s1);
        })();
        </script>
        <a class="DiggThisButton DiggMedium"></a>
        </div>
        </div>
        <div><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><div style="clear:both;"></div></div>

6. Simpan

Note : ganti text warna merah dengan Left (Di kiri) atau tetap Right (di Kanan)

Posted in: Tutorial Blog