Cara Membuat Widget Tombol Berbagi Mengapung Pada Blogger

 Dalam posting pertama saya,saya akan share bagaimana Cara Membuat Widget Tombol Berbagi Mengapung Pada Blogger (Widget Floating Share Buttons For Blogger)
Widget Floating Share Buttons ini berguna untuk menampilkan tombol berbagi dengan menampilkannya mengapung, mengapung diair ataupun diudara.



1. Pertama, yang pasti sobat login terlebih dahulu ke akun blogger sobat.
2. Langkah kedua, silahkan sobat klik menu "Rancangan" atau "Design". Pada halaman "Elemen Laman" atau "Page Elements" Klik, "Tambah Gadget" atau "Add a Gadget".
3. Lalu, pilih "HTML/JavaScript". Kosongkan saja pada Judul Widget.
4. Lalu, Copy-Paste kode html dibawah ini.

<style>
#pageshare {position:fixed; bottom:100px; margin-left:-590px; float:left; background-color:#ffffff;padding:0 0 2px 0;z-index:10;border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id="pageshare" title="Floating Share Button by Pradisz Wardhana">
<div class="sbutton" id="fb">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script></div>
<div class="sbutton" id="rt">
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'></script></div>
<div class="sbutton" id="gplusone">
<g:plusone size="tall"></g:plusone></div></div>

5. Nah, perlu diperhatikan juga kode html dibawah ini

<style>
#pageshare {position:fixed; bottom:100px; margin-left:-590px; float:left; background-color:#ffffff;padding:0 0 2px 0;z-index:10;border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>

Catatan: kode html diatas dapat sobat sesuaikan dengan blognya.

6. Dan kode html dibawah ini juga dapat anda sesuaikan.

<div id="pageshare" title="Floating Share Button by Pradisz Wardhana">
<div class="sbutton" id="fb">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script></div>
<div class="sbutton" id="rt">
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'></script></div>
<div class="sbutton" id="gplusone">
<g:plusone size="tall"></g:plusone></div></div>

7. Oke, jangan lupa juga dengan menanam Script Google Plus Onenya. Jika anda ingin memasangnya, silahkan copy-paste script dibawah ini tepat diatas kode </head>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>

 Semoga berguna dan selamat mencoba...
wassalaamualaikum Wr. Wb.