Tombol Social Share Buttons Ringan Dengan Counter Responsive Blogger




  Tombol Social Share Buttons Ringan Dengan Counter Responsive Blogger

Tombol Social Share Buttons Ringan Dengan Counter
 Responsive Blogger
Tombol sosial share button seperti ini mungkin saya rasa sudah  banyak  yang men-share cara membuat tombol berbagi sosmed atau social share button tersebut. Jadi pada kesempatan kali ini saya akan membagikan cara memasang tombol social share buttons dan saran saya bisa anda gunakan di blog milik anda. Biarpun tombol social share buttons ini dari pihak ketiga, tetapi saya rasa tombol ini sangat ringan.

Nah tidak hanya itu tombol Social share button ini sudah dilengkapi dengan counter atau jumlah klik berbagi sehingga kita dapat dengan mudah mengetahui berapa banyak postingan yang kita bagikan di sosial media. Dan tombol sosmed ini sudah responsive sehingga tampilannya akan aman di berbagai ukuran device.

Yang bisa membuat tombol berbagi sosmed ini bisa ringan adalah ternyata js dari sosmed ini dapat kita defer sehingga tidak akan lama pada saat blog kita sedang loading dan di akses orang lain. Jika anda ingin melihat demonya anda bisa melihat  gambar video gif di atas.


Apabila anda memang berminat untuk memasang tombol social share buttons ini di blog anda, maka 
bisa anda ikuti langkah- langakah di bawah ini.

Tombol Social Share Buttons Ringan

1. Pertama , pastikan anda udah masuk di dasbhor anda sendiri
2. Kemudian masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. 
Cari kode ini <b:includable id='post' var='post'> Silahkan Copas kode HTML di bawah ini dan kemudian anda simpan di bawah postingan blog.  kemudian gulung layar ke bawah dan temukan kode di bawah ini atau yang mirip seperti di bawah ini.
<data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
4. Selanjutnya silahkan anda simpan kode di bawah ini di bawah kode di atas (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>
5. Apabila ternyata lebar halaman postingan tidak muat untuk 3 buah tombol tampilan normal, anda bisa rubah kode angka 3 yang sudah saya tandai di atas menjadi 2
6. Kedua, selanjutnya anda simpan javascript defer js social share button ini di atas kode </body>. 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://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>
7. Ketiga, Nah u
ntuk sedikit merapihkan tampilannya, silahkan tambahkan CSS di bawah ini 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>
8. Jika sudah maka bisa anda klik save template.

Tombol social share buttons ini memerlukan waktu untuk bisa menampilkan jumlah klik berbagi, Jadi saya harap jangan aneh jika jumlah kliknya tidak langsung tampil ya. Mungkin para pengguna Wordpress yang ingin memasang widget ini silahkan, bisa juga di pasang.


Demikian penjelasan kali ini cara memasang   Tombol Social Share Buttons Ringan Dengan Counter Responsive Blogger, semoga bermanfaat untuk anda dan semoga bisa berhasil.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect