Template dan Tips Seputar Blogger

Monday, June 19, 2017

Membuat Tombol Social Share dengan Counter di Blog

Membuat Tombol Social Share dengan Counter di Blog - Tutorial blogger kali ini tentang cara membuat widget tombol berbagi ke sosial media atau social share button di blog bersama penghitungnya. Widget ini sangat efektif mendongkrat popularitas blog di media-media social, macam Facebook, Twitter, Google Plus, Linkedin dan lain sebagainya.

Membuat Tombol Social Share dengan Counter di Blog

Widget tombol social share yang dibagikan ini menggunakan tiga media social populer namun dalam empat tombol, yaitu tombol berbagi ke Twitter, tombol like Facebook, tombol share ke Facebook, dan tombol share ke Google Plus. Widget social button ini sangat cocok diletakkan di bawah postingan. Namun, dapat pula diletakkan di atas postingan blog.

Widget ini banyak dipakai oleh blogger, karena navigasinya yang sangat mudah dan jelas. Ditambah dengan penghitungnya yang membuat tertarik pengunjung untuk segera berbagi gratis dengan akun social medianya terhadap postingan-postingan yang dia sukai.

Tutorial Membuat Share Button Count di Bawah Postingan Blogspot


Karena tombol ini sangat cocok diletakkan di bawah postingan, maka tutorial kali ini adalah cara meletakkan widget tersebut di bawah postingan, khusus bagi pengguna platform blogger atau blogspot.

1. Login ke blogger, pergi ke dashboard blog, kemudian klik pada menu Template > Edite HTML

2. Cari kode ]]></b:skin> atau </style> lalu letakkan kode berikut ini di atas kode tadi

/* social share button with counter */
.sosmed-button-count {overflow:hidden;}
.sosmed-button {margin:0 0;height:67px;float:left;}
.sosmed-button .share {float:left;margin-right:10px;display:inline-block;}
.share-btn {margin:15px 0 25px;height:20px;overflow:hidden;}

3. Cari lagi kode <data:post.body/> (yang kedua) lalu letakkan kode di bawah ini tepat di bawahnya

<div class='sosmed-button-count'>
    <div class='sosmed-button'>
        <div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
        <div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
        <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
    </div>
    </div>
    <!-- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>-->
    <div style='clear: both;'/>

4. Jika di template belum ada kode pemanggil widget share button yang seperti ini, maka letakkan kode berikut ini di atas kode </body>

<script>
  window.___gcfg = {lang: &#39;id&#39;};
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);
</script><div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

5. Kemudian simpan Template, selamat widget social share button anda sudah terpasang.

Bagaimana jika ada beberapa tombol share yang tidak muncul?

Kemungkinan terdapat kode pemanggil (langkah nomor 4) yang ganda di template blog anda. Hapus kode pemanggil yang lama dan ganti dengan kode pemanggil pada langkah 4.

Demikian cara membuat tombol share social media dengan counternya untuk pengguna blogspot, semoga dapat dengan mudah diterapkan di blogger anda. Selamat mencoba dan selamat sukses.

Berikan tanggapan Anda
EmoticonEmoticon

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×