Menambahkan Sosial Media Share Counter diBlog

TUTORIAL MEMBUAT WIDGET SOSIAL MEDIA SHARE  DIDALAM BLOG

Selamat Datang di Blog Orang IT . Postinga saya kali ini akan share mengenai cara menambahkan widget sosial media share counter didalam artikel blog untuk menambah kualitas seo onpage blog anda , selain itu sosial media share counter memungkinkan pengunjung untuk merekomendasikan artikel blog anda diakun sosial media mereka

Widget sosial share media counter merupakan widget yang berisikan beberapa button ikon sosial media seperti facebook ,google plus , twitter , linkedin dll yang membantu visitor dalam merekomendasikan artikel yang mereka baca kedalam akun sosial media hanya dalam sekali klik saja

Di Internet banyak sekali tutorial memasang sosial media share counter didalam artikel blog tapi saya akan buat tutorial yang paling simple sehingga mudah dipraktekkan oleh orang newbie sekalipun . Kita akan memanfaatkan layanan pihak ketiga , jadi anda tinggal atur desain - ambil code - pasang ditemplate blog - selesai

Kebetulan juga template evomagz yang saya gunakan versi terakhir 4.7 akhir-akhir ini sering error seperti widget sosial sharenya berubah letak menjadi diatas, snippet artikel nya kadang hilang , ikon media sosial share tidak tampil dibeberapa perangkat dan browser sehingga ada inisiatif untuk memasang sosial share counter sendiri didalam artikel blog

Langsung saja menuju tutorial bagaimana cara memasang sosial share counter diblogspot dengan mudah :

1. Kunjungi situs pihak ketiga http://donreach.com/social-share-buttons

Silahkan anda kustom sendiri mana widget sosial media yang anda gunakan , misalnya disini saya hanya menggunakan twitter, google plus dan facebook

2. Setelah itu ambil codenya , silahkan dicopy scriptnya

3. Pastekan script yang dicopas tadi tepat bagian postingan dimana anda ingin widget tersebut bisa tampil , lebih tepatnya pada artikel - edit - mode html

Trik agar widget sosial media share menjadi ringan dan tidak memperngaruhi loading blog

Dari pada nanti ada yang komen apakah memasang sosial media counter tambahan didalam postingan akan membuat blog berat atau tidak ? jawabanya tentu saja akan menambah laoding blog agak berat tapi tidak berpengaruh besar secara keseluruhan ( masih dalam artian wajar )

SIlahkan coba beberapa trik berikut agar loading blog anda menjadi lebih ringan setelah memasang sosial media counter diblogspot anda:

4. Silahkan copy code HTML berikut ini

<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-hackernews"></div>
  <div class="don-share-buffer"></div>
  <div class="don-share-xing"></div>
  <div class="don-share-pocket"></div>
  <div class="don-share-fancy"></div>
  <div class="don-share-yummly"></div>
  <div class="don-share-scoopit"></div>
  <div class="don-share-weibo"></div>
  <div class="don-share-vk"></div>
  <div class="don-share-mailru"></div>
  <div class="don-share-odnoklassniki"></div>
  <div class="don-share-hatena"></div>
</div>

Itu adalah versi lengkap sosial media share karena saya hanya pasang 3 buttons jadi saya hanya memakai 3 button share

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='don-share' data-limit='3'>
  <div class='don-share-total'/>
  <div class='don-share-facebook'/>
  <div class='don-share-twitter'/>
  <div class='don-share-google'/>
</div>
    </b:if>

cari kode ini <div class="post-thumbnail"> sampai akhiran </b:if>
baru letakan kodenya itu sih bisa diatur dengan selera kalau mau diakhir artikel atau postingan letakan saja diatas widget subscribe kemudian kasih baris baru dengan kode supaya ada jarak

5. Silahkan copy paste kode render javascript ini tepat pada template mode html diatas </body>

<script type='text/javascript'>

// Share Button Optimasi http://www.helmykkediri.com/

//<![CDATA[

function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/perampokgoogle/Flatshare/master/buttons.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>

6. SImpan template dan lihat hasilnya

Silahkan anda cek kecepatan template sebelum dan sesudah memasang javascript render pada langkah ke 5 lima di https://developers.google.com/speed/pagespeed/insights/

Semoga bisa dipahami hehe , demikian postingan saya mengenai cara memasang widget sosia share counter diblogspot didalam postingan semoga bermanfaat jika ada yang mau menambah atau bertanya silahkan saja sekian dan terimakasih