Cara Membuat Floating Share Social Media

Nah sesuai dengan judul dan gambar diatas, kalian sudah tahu bukan apa fungsinya,...

Yup fungsinya memudahkan sobat atapun pengunjung untuk share artikel atau postingan yang telah sobat buat, cara kerjanya saat pengunjung scroll atau membaca ke halaman bawah social bookmar/media itu ikut bergerak sesuai dengan saat kita bergerak kebawah, contoh ada pada gambar diatas, nah tidak usah panjang lebar, ikuti saja  caranya dibawah ini :

Step :

1.  Buka akun blogger sobat

2.  Masuk ke menu EDIT HTML dan tentunya jangan lupa untuk mencentang Expand Template   Widget

3.  Lalu cari kode </head> dan letakkan kode dibawah ini tepat diatas kode yang dicari tadi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
 #mblSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
 #mblSocialFloat td{padding:4px;margin:0;border:none;}
 #mblSocialFloat td iframe{max-width:82px;width:82px !important;}
 #mblSocialFloat.mblFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;
jQuery(document).ready(function(b){var a=b("#mblSocialFloat");a.wrap('<div id="mblSocialPlaceholder"></div>').closest("#mblSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#mblSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("mblFloatSocial"):a.removeClass("mblFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script src='http://mbl-flipper-google-blogger.googlecode.com/files/mbl_blogger_pinit.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
 // Twitter
 (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
 // Google + (plus)
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
 // Stumbleupon
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
 // Digg
 (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>

Catatan : Jika template sobat sudah ada menggunakan jquery seperti pada tulisan merah di atas maka hapus saja jquery tersebut agar memperlancar scrolling bar berjalan.
dan kode yang berwarna biru adalah untuk backgroundnya.

4.  Lalu cari lagi kode seperti ini <data:post.body/> dan pastekan kode dibawah ini tepat diatas kode yang dicari tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='mblSocialFloat' id='mblSocialFloat'>
<table class='mblSocialFloat' width='100%'>
 <tr>
  <td>
   <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
  </td>
  <td>
   <iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
  </td>
  <td>
   <div class='w2bPinitButton' expr:id='&quot;w2bPinit-&quot; + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'>
    <data:post.body/>
    <script type='text/javascript'>
     w2bPinItButton({
      url:&quot;<data:post.url/>&quot;,
      thumb: &quot;<data:post.thumbnailUrl/>&quot;,
      id: &quot;<data:post.id/>&quot;,
      defaultThumb: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESC5TuieRG39LagJRRXnwMOq1np5yAFFWayg0OMImqpzfY-o99CStESAPyTqPqsJSt3DQ_noZ6aSakI1u43oYk4dkGnSetdF8dKqpoRUk5H67lE43eMwfMuBp0GqxUUOu1I-2ms41_OFP/s1600/w2b-no-thumbnail.jpg&quot;,
      pincount: &quot;horizontal&quot;
     });
    </script>
   </div>
  </td>
  <td>
   <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
  </td>
  <td>
   <su:badge expr:location='data:post.url' layout='1'/>
  </td>
  <td>
   <a class='DiggThisButton DiggCompact'/>
  </td>
 </tr>
</table>
</div>
</b:if>

5.  Lalu klik save dan lihatlah hasilnya

Sumber