Cara Membuat Social Sharing BOX Tampilan Slide

Saya akan share Cara Membuat Social Sharing BOX Tampilan Slide di sebelah kiri laman blog kepada sobat blogger semua. Cara pemasangannya ter...

Saya akan share Cara Membuat Social Sharing BOX Tampilan Slide di sebelah kiri laman blog kepada sobat blogger semua. Cara pemasangannya tergolong simple dan mudah, untuk itu silahkan simak beberapa petunjuk di bawah ni :

Langkah Pertama :
Tambahkan jQuery Pluggin di blog dengan cara
Login ke accunt blogger sobat.
Silahkan menuju Template==>Edit HTML
Gunakan CTRL F dan cari kode </head>
Letakkan kode di bawah ini tepat sebelum atau di atas tag </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

Catatan : Jika jQuery Pluggin sudah ada di blog sobat maka abaikan langkah di atas.

Langkah Berikutnya :
Login ke accunt blogger sobat.
Pilih rancangan atau tatak letak kemudian, Klik tambah gadget.
Pilih opsi HTML/Javascript
Lalu copy-pastekan kode dibawah ini.

<style>
#MDslidebox {
    background: none repeat scroll 0 0 #F3F3F3;
    border-radius: 9px 9px 9px 9px;
    border: 1px solid #D7D7D7;
    top: 50px;
    display: none;
    padding: 12px 14px;
    position: fixed;
    left: 2px;
    width: 300px;
    z-index: 3;
}
</style>
<!-- MDslidebox widget by Making Different @ www.makingdifferent.com -->
<script type="text/javascript">
$(window).scroll(function(){
if($(document).scrollTop()>=$(document).height()
/4)$("#MDslidebox").show("slow");
else $("#MDslidebox").hide("slow");});
function closeMDslidebox(){$('#MDslidebox').remove();}
</script>
<div id="MDslidebox" style="display: none;">
    <a onclick="return closeMDslidebox();" href="javascript:void(0);" style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;">(X)</a>
    <span style="font-size:14px;color:#000;font-weight:bold">Don't forget to join our community.</span>
    <iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/muhammadiqbalblog&amp;width=292&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;border_color=black&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:62px;" allowtransparency="true">
    </iframe>
    <br/>
    <!-- Place this tag where you want the badge to render. -->
    <div class="g-plus" data-width="300" data-height="69" data-href="https://plus.google.com/muhammadiqbal02" data-rel="publisher">
    </div>
    <!-- Place this tag after the last badge tag. -->
    <script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript';
 po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(po, s);
  })();
    </script>
    <br/>
    <a href="https://twitter.com/02IQb4L" class="twitter-follow-button" data-show-count="false">Follow @nitinmaheta</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>
</div>

Catatan : Silahkan ganti tulisan yang di tandai (bercetak tebal) dengan URL akun sobat.

Langkah Terakhir klik save dan selesai.