Membuat Tombol Share Media Sosial yang mengambang

Nah, ini adalah turorial tentang gimana cara membuat button share media sosial yang ngambang/melayang di blog anda. ini dalam bentuk widget lho, jadi anda tidak akan susah payah untuk mengutak-atik template HTML blog anda. Anda tinggal memindahakan code-code di bawah ini dan meletakkannya di gadget HTML/Javascript. Media sosial yang termasuk di sini adalah Facebook Share, Retweet, StumbleUpon, Digg This dan Google+1.

Nah, supaya tidak penasaran, langsung aja ikutin caranya.

1. Klik Layout (untuk tampilan blogger yang lama: Design > Page Elements)
2. Klik Add a Gadget
3. Pada window Add A Gadget, pilih HTML/Javascript.
4. Copy code di bawah ini dan paste di sana.
   
   

   <!-- floating share bar Start bloggersentral.com-->
   <style type="text/css">
   #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;}
   #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="Get this from BloggerSentral.com">
   <div class='sbutton' id='fb'>
   <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 class='sbutton' id='rt'>
   <script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
   </div>
   <div class='sbutton' id='su'>
   <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
   </div>
   <div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
   <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
   <a class="DiggThisButton DiggMedium"></a>
   </div>
   <div class='sbutton' id='gplusone'>
   <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
   <g:plusone size="tall"></g:plusone>
   </div>
   <div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.bloggersentral.com/">widget</a></div><!-- Do not remove this link -->
   </div>
   <!-- floating share bar End --> 
   

5. Simpanlah Gadget anda.
6. Drag gadget anda dan letakkan di bawah Gadget Blog Post.
7. Klik tombol Save (pojok kanan atas).

  
Modifikasi

1. Vertical alignment
   Ubah nilai bottom (berwarna merah) untuk mengatur jarak button secara vertical di blog anda. Agar jaraknya menyesuaikan diri saat window di resize, atur nilainya menggunakan satuan pixel yakni menggunakan persentase %.
2. Horizontal alignment
   Atur nilai pada margin-left untuk menyesuaikan jarak button secara horizontal. Nilai yang negatif akan menggeser button semakin ke kiri dari colom halaman utama. Dan apabila nilainya positif, maka akan menggeser button semakin ke kanan.
3. Meletakkan dan menghapus Button
   Anda dapat meletakkan dan menghapus button sesuka anda. Masing-masing Button di wakili oleh kode di bawah ini.
   
   <div class='sbutton'>
   CODE BUTTON ANDA
   </div>
   
   untuk meletakkan button baru, anda tinggal memodifikasi kode di atas dengan kode baru button anda
   untuk menghapus button, anda cuma akan menghapus dari <div> sampai </div>.

Okay, selamat mencoba aja dah . . .