Cara Membuat Tombol Sosial Share Dengan Efek Slider

Cara Membuat Tombol Sosial Share Dengan Efek Slider.  Pada postingan saya kemarin tentang Cara Membuat Menu Melayang Saat Di Scroll Mouse silahkan dibaca dan untuk memperindah tampilan tombol sosial share yang ada di blog kita, sobat tinggal menambahkan tombol seperti yang ada di blog ini. Lihat di bawah postingan!

Keberadaan tombol sosial share di blog relative dibutuhkan karena fungsinya yang dapat mempermudah pengunjung untuk men share artikel langsung dari blog kita, dan pada kesempatan  ini saya akan berbagi cara membuat tombol sosial share efek slider, prosesnya sangat sederhana dan hanya dibutuhkan ketelitian dalam meletakan kode-kode yang saya siapkan dibawah, efek slider yang ada pada tombol sosial ini sangat ringan dan responsive sehingga tidak akan mengganggu tampilan maupun loading blog sobat di versi desktop dan versi mobile dan tampilannya yang cukup menarik sehingga tambah mempercantik blog sobat sekalian.

Jika anda tertarik silahkan simak langkah-langkahnya sebagai berikut.

Sliding Social Share Button

Cara Membuat Tombol Sosial Share Dengan Efek Slider

Langkah-1 :  Login ke akun blogger anda
Langkah-2 :  Klik Template » Edit HTML

Langkah-3 :  Gunakan  Ctrl+F  untuk mencari kode berikut ]]></b:skin> atau </style>

Langkah-4 :  Setelah ketemu letakan CSS script dibawah ini tepat diatas kode ]]></b:skin> atau </style>

#button-share{width:100%;overflow:hidden;background: rgba(0, 0, 0, 0.80);text-align:center;margin:15px 
auto;padding:0;padding:15px 0 10px}
#button-share span{position:relative;font-size:11px;color:#fff;margin:12px}
#button-share .share{background:#fcfcfc;position:relative;display:inline-
block;float:none;height:40px;line-height:40px;overflow:hidden;width:140px;margin:0 auto;box-shadow:inset 0 0 5px rgba(0,0,0,0.1)}
#button-share .slide-share{z-index:2;display:inline-block;height:40px;line-
height:40px;left:0;position:absolute;width:140px;margin:0 auto}
#button-share .slide-share p{text-transform:uppercase;font-family:'Racing Sans One';font-
weight:400;color:#fff;font-size:15px;left:0;position:absolute;text-align:center;width:100%;margin:0 
auto}
#button-share .share .slide-share{transition:all 0.4s ease-in-out}
#button-share .facebook .fb_iframe_widget{display:block;position:absolute;right:15px;top:0;z-index:1}
#button-share .twitter iframe{right:10px;top:10px;z-index:1;display:block;position:absolute}
#button-share .google #___plusone_0{width:90px!
important;top:10px;right:10px;position:absolute;display:block;z-index:1}
#button-share .facebook .slide-share,.twitter .slide-share,.google .slide-share{background:#2c3e50}
#button-share .facebook:hover .slide-share,#button-share .twitter:hover .slide-share,#button-share .google:hover .slide-share{left:140px;opacity:0.6}

Langkah-5 : Letakan script dibawah ini di atas code </head>

<script type='text/javascript'>
  window.___gcfg = {lang: 'id'};

  (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>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Langkah-6 : Kemudian letakan kode berikut ini dibawah kode <data:'post.body'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='button-share'>
 <div class='facebook share'>
  <div class='slide-share'>
  <p>FB Share</p>
  </div>
<div class='fb-share-button' data-layout='button_count' expr:data-href='data:post.url'/>
 </div>
 <div class='facebook share'>
  <div class='slide-share'>
  <p>FB Like</p>
  </div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/>
 </div>
 <div class='google share'>
  <div class='slide-share'>
  <p>G Plus</p>
  </div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
 </div>
 <div class='twitter share'>
  <div class='slide-share'>
  <p>Tweet Me</p>
  </div>
<a class='twitter-share-button' data-count='horizontal' data-related='antoncabon' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
 </div>
</div>
</b:if> 

Langkah-7 : Terakhir save template.



Selesai.

Demikianlah sedikit tentang cara memasang tombol sosial share dengan efek slider di blog, semoga bermanfaat dan selamat mencoba.

Demo on JSFiddle

Go to Link