Membuat Social Share Ringan dengan Counter di Blog

Ngonline06 banyak sekali membuat tutorial social share yang sangat ringan. Sahabat bisa menelusurinya di tombol search sendiri di blog ini (hehe...). Ada yang simpel, simpel namun berpenampilan keren, dan ada pula yang terlihat profesional.

Demikian pula, kali ini Ngonline06 pun akan berbagi cara membuat social share dengan sangat ringan. Artinya, tanpa mempengaruhi loading blog sahabat semua. UNIKNYA lagi, social share ini dilengkapi dengan counter. Dengan counter, sahabat bisa mengetahui berapa banyak pengunjung yang menshare postingan sahabat.

Walau perangkat ini menggunakan jasa pihak tiga, namun menurut analisa para 'ahli', social share ini sangat ringan.

Jika sahabat ingin mengetahui penampilannya, silahkan lihat gambar di atas. Social share ini selain ringan juga responsive. Gambar di atas adalah penampilan dari desktop dan mobile. Keren bukan?

Cara Membuat Social Share yang Ringan dengan Counter di Blog

OK, langsung saja berikut adalah langkah-langkah membuat social share yang ringan dengan counter di blog:

1. Silahkan login di dashboard situs atau blog sahabat.
2. Klik mendu template > edit html.
3. Cari kode <b:includable id='post' var='post'>. Lalu perhatikan ke bawahnya hingga menemukan kode ini atau yang mirip dengan ini:
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
Lalu, simpan kode di bawah ini tepat di bawah kode </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>
4. Setelah itu, cari kode </body>. Letakkan kode javascript di bawah ini tepat di atas kode </body>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://googledrive.com/host/0Bz4YdwRI3rnCTFdxX29TaU9WTlU/share-donreach.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>
5. Tambahkan kode CSS di bawah ini tepat di atas kode </head>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.don-share .don-share-total{position:relative!important}
.don-share .don-share-total:after{bottom:0!important}
</style>
</b:if>
6. Simpan.