Membuat Responsive Social Share Button Ringan Dengan Counter Di Blog Seperti Kompi Ajaib

Membuat Responsive Social Share Button Ringan Dengan Counter Di Blog Seperti Kompi Ajaib - Sebenarnya sudah banyak yang berbagi tutorial bagaimana cara untuk membuat social share button atau tombol berbagi artikel di blog ke sosial media.

Biasanya ada tombol untuk berbagi ke Facebook, berbagi ke Twitter, Berbagi ke Google+, dan masih banyak lagi lainnya. Kali ini saya akan membagikan tutorial membuat tombol share sosial media tadi seperti di blog Kompi Ajaib, dengan tampilan yang elegan, responsive, dan juga dilengkapi dengan counter atau jumlah total berapa kali orang telah menekan tombol share di blog sobat.

Contoh tampilan social share buttonnya bisa sobat lihat pada blog ini, bagaimana tertarik membuatnya ? langsung saja disimak cara membuatnya.

Responsive Social Share Button Ringan Dengan Counter Di Blog Seperti Kompi Ajaib

1. Copy kode CSS di bawah ini dan letakkan tepat di atas kode </head> di dalam Edit HTML template sobat

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.don-share{margin:5px -10px 0 0!important;padding-left:80px;clear:both;}
.don-share .don-share-total{margin-left:-80px!important}
.don-share.don-active .don-share-total:after{bottom:15px!important}
.don-share .don-share-expand:before{font-weight:700!important;font-size:28px!important;line-height:19px!important}
.don-share .don-share-expand{max-height:34px}
button.don-share-expand{font:28px Arial!important;}
.don-btn{border-radius:0!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}
.don-btn:hover{color:#fff;background-position:bottom;-webkit-box-shadow:none!important;box-shadow:none!important;opacity:.8}
.don-share .don-btn.don-share-expand:hover{color:#666!important}
</style>
</b:if>

2. Lalu copy kode HTML di bawah ini dan simpan di bawah postingan blog, cari kode <b:includable id='post' var='post'> lalu scroll kebawah sedikit dan temukan kode yang mirip dengan kode di bawah ini

     <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

lalu simpan kode di bawah ini tepat di bawah kode di atas (di bagian bawah </div>)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="don-share" data-limit="3">
  <div class="don-share-total"></div>
  <div class="don-share-facebook"></div>
  <div class="don-share-twitter"></div>
  <div class="don-share-google"></div>
  <div class="don-share-linkedin"></div>
  <div class="don-share-pinterest"></div>
  <div class="don-share-tumblr"></div>
  <div class="don-share-stumbleupon"></div>
  <div class="don-share-reddit"></div>
  <div class="don-share-pocket"></div>
</div>
<div class='clear'/>
</b:if>

3. Langkah terakhir cari kode </body> dan letakkan kode di bawah ini tepat di atasnya

<script type='text/javascript'>
//<![CDATA[
  (function() {
    var dr = document.createElement('script');
    dr.type = 'text/javascript'; dr.async = true;
    dr.src = '//share.donreach.com/buttons.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);
  })();
//]]>
</script>

Selanjutnya klik Simpan Template dan lihat perubahannya di blog sobat, semoga berhasil mencobanya.