Social Sharring Horizontal Bar Mendatar Untuk Blogger

Tweet

D-Copy Blog | Website jejaring social telah menjadi pusat kegiatan internet karena mampu menarik setiap user yang menggunakan internet baik dari sekolah, kantor atau perumahan. Sekarang hari orang yang suka untuk berbagi artikel takjub dengan komunitas sosial yang menguntungkan semua orang sama sekali. Ini penting untuk setiap blogger dan webmaster untuk mengintegrasikan sharing social atau seperti tombol di blog mereka, sehingga mereka dapat berbagi cerita di website jejaring sosial terbaik pada pengunjung, ini tidak hanya akan memberi mereka cakupan tetapi juga akan membangun pembaca setia. Ada widget social share terbatas yang tersedia di berbagai blog, tetapi mereka juga kurang dalam menghitung tombol atau mereka tidak dirancang dengan baik. Jika Anda telah melihat orang-blog wordpress yang memiliki bar sharing horizontal sosial yang mengapung saat halaman menggulir, jadi hari ini kita akan berbagi jenis widget serupa untuk blogger yang terdiri dari Facebook, Twitter, Google Plus, Pinterest, Digg dan Stumbleupon Sharing tombol.

Langkah :

1. Buka akun Blogger Anda
2. Masuk ke menu edit HTML, jangan lupa centang Expand Template Widget
3. Cari kode dibawah ini :

</head>

    4.  Pada kode diatas, pastekan kode dibawah ini diatas pada kode diatas :

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

Keterangan :

• Jika template Anda sudah menggunakan jQuery hapus kode berwarna biru diatas agar proses scrolling bar berjalan lancar.

Biasanya jQuery dengan kode seperti berikut :

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

     5.  Cari kode dibawah ini :

<data:post.body/>

Keterangan :

• Biasanya kode diatas ada 3-4 pada masing-masing template, binya untuk peletakkan kode pada   <data:post.body/> yang ke 2 dan ke 3. Jadi jika Anda nantinya social sharring horizontal bar mendatar untuk blogger tidak muncul pada template Anda, maka Anda harus meletakkan kode pada kode <data:post.body/> yang laiinya.

    6.  Pastekan kode dibawah ini, diatas pada kode langkah 5 :

<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/AVvXsEhJlO9C5gKw1xHhLmr_AvIAXqJCifxugDQh9YlhGuzKmzgjCw28WgBYa3YyKHBjeFquQO9cXFcf_9cK3Wf7MHgfmwfA_7sQfPnddy-6yFTRYkbzJKyGQJTcStHeiSNhg6yxCVQ74Pt-_V2L/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.  Save template Anda.

Keterangan :
Untuk penyesuaian warna template Anda, Anda bisa mengubah warna kode pada kode #FFFFFF yang telah diwarnai pada langkah 4.

Catatan :

• Sebaikknya Anda membaca dengan baik keterangan-keterangan yang telah dibertahukan kepada Anda.

Terima kasih, semoga bermanfaat.

Sumber artikel : http://www.mybloggerlab.com/2012/08/floating-social-sharing-horizontal-bar.html