Tutorial Memasang Widget Floating Share Melayang

Pada kesempatan yang baik ini saya bakal ngebahas apa itu widget floating share melayang.. wuidiih.. emang bisa melayang bro ? yaa bisa laah.. selain ngebahas tentang widget floating share melayang, Kamu Klik juga bakal ngasih kode-kodenya dan cara-cara pemasangannya..
Apa sih floating itu ? Floating adalah sebuah menu yang posisinya absolute dan selalu tampil di tengah-tengah atau melayang, Floating ini juga terkadang mengikuti scroll dari browser. Ya sesuai dengan variasinya lah :D hehe..
Jadi yang bakal kita jadiin floating adalah Widget Share (Twitter, Facebook, dan Google +1).
Nanti di blogmu bakal nampak seperti gambar dibawah:

Lalu bagaimana cara pemasangannya ?
Okelah, langsung disimak aja pemasangannya. Silakan ikuti langkah-langkahnya sebagai berikut:

• Seperti biasa kamu harus Login ke dashboard blogger kamu.

• Pilih Rancangan > Elemen Laman > Add gadget/Tambah Gadget > Pilih yang HTML/JavaScript.

• Copy script dibawah ini, Lalu pastekan pada gadget
  ----------------------------------------------------------------------------------------------------
  <style> #floatdiv { position:fixed; bottom:15%; margin-left:-70px; z-index:10; float:left; padding-bottom:2px;  }  #mbtsidebar { background:#fff; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding-left:5px; width:60px; margin:0 0 0 5px; }  .fb_share_count_top {width:52px !important;}  .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}  .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !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="floatdiv"> <div id="mbtsidebar"> <table cellpadding="1px" cellspacing="0">   <tr> <td style="padding:5px 0px 0px 0;"><a href="https://twitter.com/share" class="twitter-share-button" data-via="NAMA TWITTER KAMU" data-lang="en" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </td> </tr>  <tr> <td style="padding:5px 0 2px 0;"> <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> </td> </tr> <tr> <td style=" padding:5px 0px 0px 0px;">  <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>  <g:plusone size="Tall" expr:href="data:post.url"> </g:plusone></td> </tr> <tr> <td> <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#000;" href="http://kamu-klik.blogspot.com/2012/02/widget-floating-share-melayang.html"><blink>Get This</blink></a></p></td></tr></table></div></div>
  ----------------------------------------------------------------------------------------------------
  Keterangan:
  • Untuk teks yang berwarna merah, silakan ubah/ganti sesuai keinginan kamu.
    -70px : Ini adalah ukuran, dimana biasanya menyesuaikan lebar konten. jadi kamu bisa mengubahnya apabila widget floating share melayang ini malah menutupi postingan. misalnya dari yang -70px menjadi -110px. pokoknya agar posisi widget ini pas.
    NAMA TWITTER KAMU : Ubah pake nama twitter kamu atau twitter blog kamu ^^
    
• Setelah dipaste, lalu kamu save/simpan tanpa judul.
• Dan lihat hasilnya..

Bagaimana ? cukup mudah bukan ? hehe..