Membuat Tombol Share dengan Floating

halo kawan-kawan kali ini saya akan menge-share Tips keren nii membuat tombol share keren 

Oke kita masuk ke topik kali ini. Repost dari IT SASAK dan rieztoshare - Cara membuat Floating share social media). Saya merepost tips ini, karena saya ingin sekali berbagi tips ini dengan sobat blogger sekalian. Saya yakin, sobat akan tertarik dan memasangnya di blog sobat. Selain Keren, Floating social media ini juga mempermudah pengunjung di blog sobat untuk menshare artikel di blog sobat.

Jika sobat ingin melihat demonya, silakan klik disini. Nah, sudah melihat bukan. Untuk cara membuatnya, iktuti langkah berikut ini.

Cara Membuat Tomblol Share Keren Versi 4 (Floating Share Social Media).
1. Seperti biasa, sobat login dulu ke akun blogger sobat.
2. Masuk ke menu Template.
3. Kemudian, pilih EDIT HTML, lalu klik saja Lanjutkan.
4. Jangan lupa centang "Expand Template". Kemudian Back Up dulu template sobat, antisipasi apabila terjadi kesalahan dalam pengeditan template.
5. Oke, selanjutnya cari kode </head> kemudian letakkan kode berikut tepat diatasnya

<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. 

6.  Lalu cari kode <data:post.body/> kemudian letakkan kode dibawah ini, tepat diatas kode tersebut

<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/AVvXsEiD1VOzFi1_w3-Vy9bwdZKd6c6SnXXnjx3jnPfFLnHbMXgWwv3kzjGJKBtOCGmGx5d_8RizoS2qk6Uh3bKGXIIulQ2APOyny3GtuQ0T0ogLcyOqRtcUvL1i-gmSCLc-2smcDohI3ikzRAmx/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>

7. Yang terakhir, Simpan Template sobat.

Silakan buka blog sobat, dan lihat hasilnya. Menarik bukan ???
Semoga tips yang sedikit ini dapat memberikan manfaat untuk sobat semua, terimakasih ^_^