4 Cara Mudah Membuat tombol media sosial Share dengan jumlah share

Jumpa lagi bersama saya di adsenstock.com, pada kesempatan kali ini saya akan coba share tentang Cara Membuat tombol media sosial Share dengan jumlah share.

Baik saya rasa tidak perlu bicara panjang lebar lagi, langsung saja kita ke pokok pembahasan kita kali ini sesuai dengan judul yaitu Cara membuat tombol share ke sosial media dengan menampilkan Jumlah Share.

4 Cara Mudah Membuat tombol media sosial Share dengan jumlah share

1. Meletakan Share Buton di Bawah Postingan Blog

Langkah pertama yang harus anda lakukan adalah meletakan kode HTML pada template anda
-Masuk Blogger
-menu template
-edit html
setelah anda masuk pada pengeditan template blog anda, kemudian cari kode ini <b:includable id='post' var='post'> gulung layar ke bawah dan cari kode di bawah ini atau yang mirip dengan kode di bawah ini.

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

Copi kode dibawah ini dan letakan setelah kode diatas (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>

Jika lebar halaman posting anda tidak muat dengan 3 tombol share maka ganti angka 3 menjadi 2. sehingga tanpilannya hanya 2 tombol share.

2. Meletakan Java Script Tombol Social Share

letakan javascript defer js social share button yang saya dapat dari kompi ajaib ini 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://cdn.rawgit.com/KompiAjaib/js/master/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>

3. Kode CSS Tombol Share

Agar tampilannya rapi maka tombol share perlu diatur dengan CSS. Letakan diatas </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>

4. Simpan Template

Selesai....
Tombol share ini memerlukan waktu dalam menampilkan berapa jumlah klik share, jadi jangan heran jika jumlah masih tetap pada pojok tombol sharenya. Social share model ini bisa juga di pasang pada wordpress.

Share this post