Widget : Share melayang Facebook dan Twitter

Selamat sore opamer..ini kemaren hari selasa ada yang request tentang "share facebook dan twitter yang bisa melayang". Katanya dia, dia bingung liat tutorial di blog lain yang harus "Edit HTML". Untuk itu sekarang opa bahas-in buat yang kemaren request, ini tidak perlu utak-atik "Edit HTML". Buat sobat Opa yang juga membutuhkan juga di persilahkan, ini langkah-langkahnya :




1. Login "Blogger.com"
2. Dashboard
3. Page Elements
4. Add a Gadget
5. Klik HTML/javascript
6. Copy paste script dibawah ini opamer ke "HTML/javascript"


Posisi di sebelah kiri blog/web, jika opamer menghadap ke laptop/komputer:

<style type="text/css">
*{margin:0;padding:0;}

* html #z33sHare{
position: absolute;
}

#z33sHare{
left:1%;width: 70px;background:white;border:2px solid #000000;-moz-border-radius:3px;-webkit-border-radius:3px;
position:fixed;
bottom: 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>



Posisi di sebelah kanan blog/website, jika opamer semua menghadap ke laptop/komputer:

<style type="text/css">
*{margin:0;padding:0;}

* html #z33sHare{
position: absolute;
}

#z33sHare{
right:1%;width: 70px;background:white;border:2px solid #000000;-moz-border-radius:3px;-webkit-border-radius:3px;
position:fixed;
bottom: 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>

Keterangan:
+ Warna merah : Jika opamer ingin mengganti background
+ Warna hijau : Jika sobat opa ingin mengganti posisi box share
+ Warna biru : untuk menggeser posisi box, 20% keatas or kebawah, 1% kekanan or ke kiri.
+ Jika ingin ganti "border warna" silahkan kesini

7. Lalu klik save opamer (gak perlu di kasih nama ya)
8. Silah kan di cek blog/web opamer
9. gimana keluar kan?
10. Finish dah ^_^