Menggunakan Responsive Social Share Buttons Ringan Dengan Counter Di Blog

Sebenarnya saya sudah banyak men-share cara menciptakan tombol menyebarkan sosmed atau social share button, namun kali ini saya masih akan membagikan cara memakai social share buttons dan saya merekomendasikan untuk dipakai di blog. Walaupun social share buttons ini dari pihak ketiga, namun ternyata ini benar-benar ringan.

Social share button ini dilengkapi dengan counter atau jumlah klik menyebarkan sehingga sanggup diketahui berapa banyak postingan kita dibagikan di sosial media. Selain itu tombol ini responsive sehingga tampilannya akan kondusif di banyak sekali ukuran device.

Dan yang menciptakan tombol menyebarkan sosmed ini ringan yakni ternyata js dari sosmed ini sanggup kita defer sehingga tidak akan mengganggu loading blog. Untuk demo silahkan lihat di halaman ini (jika belum saya ganti hehehe...) atau lihat pada animasi gif di atas. Dan di bawah ini screenshot dari tampilan mobile.


Nah kalau Anda ingin mencobanya juga, silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama
Silahkan copy aba-aba HTML di bawah ini dan simpan di bawah postingan blog. Silahkan cari aba-aba ini <b:includable id='post' var='post'> lalu gulung layar ke bawah dan temukan aba-aba di bawah ini atau yang menyerupai mirip di bawah ini.

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

Silahkan simpan aba-aba di bawah ini di bawah aba-aba di atas (di bawah aba-aba </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 ternyata lebar halaman postingan tidak muat untuk 3 buah tombol tampilan normal, silahkan rubah aba-aba angka 3 yang saya tandai di atas menjadi 2 sehingga tampak menyerupai pada halaman demo blog ini.

2. Langkah Kedua
Silahkan simpan javascript defer js social share button ini di atas aba-aba </body>. JS ini saya hosting dengan akun Google Drive saya, jadi untuk keamanan silahkan hosting di akun Google Drive Anda sendiri.

 <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. Langkah Ketiga
Untuk sedikit merapihkan tampilannya, silahkan tambahkan CSS di bawah ini di atas aba-aba </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>

Selesai....

Social share buttons ini memerlukan waktu untuk menampilkan jumlah klik berbagi, sehingga jangan aneh kalau jumlah kliknya tidak pribadi tampil. Widget ini tidak hanya sanggup dipakai di Blogger tapi juga sanggup dipakai di Wordpress.

Sumber:
http://donreach.com/social-share-buttons


Sumber https://www.kompiajaib.com/

Share this post