Cara Membuat Tombol Sosial Share dengan efek slider

Cara Membuat Tombol Sosial Share Dengan Efek Slider. Pada postingan saya kemarin tentang Cara Membuat Blog Dengan Flatform Blogger silahkan dibaca dan untuk memperindah tampilan tombol sosial share yang ada di blog kita, anda 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 anda di versi desktop dan versi mobile.

Bagaimana tertarik? yuk simak langkah-langkahnya.

Cara Membuat Tombol Sosial Share Dengan Efek Slider

Tombol Sosial Share Dengan Efek Slider

1. Login ke akun blogger anda

2. Klik Template » Edit HTML

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

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}

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>

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>

7. Terakhir save template.

8. Selesai.

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