Cara Memasang Share Button Sederhana di Blog

Dengan adanya tombol share di blog Sobat juga dapat meningkatkan pengunjung blog Sobat. Mengapa ? karena jika Sobat memasang tombol share pada blog Sobat sama saja Sobat mempermudah pengunjung blog Sobat untuk membagikan artikel Sobat ke social media seperti google plus, facebook dan twitter. Dengan begitu jika ada orang lain yang tertarik untuk mengunjungi artikel Sobat yang dibagikan tersebut, maka pengunjung blog Sobat pun menjadi bertambah. Ini adalah peluang untuk meningkatkan pengunjung blog Sobat.

Kali ini saya akan memberikan tutorial mengenai cara memasang share button sederhana yang barangkali Sobat sedang mencari-cari tutorial ini. Share button yang saya bagikan ini terdiri dari tiga jaringan social media yang populer yaitu google +, facebook dan twitter disertai dengan box count yang terletak di bawah postingan. Untuk lebih jelasnya Sobat bisa lihat demo gambar di bawah ini, atau dapat Sobat lihat tombol share di blog ini.

Cara Memasang Share Button Sederhana di Blog

1. Login ke Blogger > Template > Klik Edit HTML > Letakkan kode CSS di bawah ini tepat sebelum kode ]]></b:skin> atau </style>  

/* Share Buttons by WahyuPratama.com */
.social-buttons-box {
height: 67px;
margin: 20px 0px 15px;
overflow: hidden;
}
.social-buttons {
margin:0 0;
height:67px;
float:left;
}
.social-buttons .share {
float:left;
margin-right:10px;
display:inline-block;
}
.share-btn {
margin:15px 0 25px;
height:20px;
overflow:hidden;
} 

2. Selanjutnya salin kode di bawah ini lalu letakkan setelah kode <data:post.body/>

<!-- Share Buttons by WahyuPratama.com --> 
<div class='social-buttons-box'>
<div class='social-buttons'>
<div class='share gplus'><div class='g-plusone' data-count='true' 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-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a></div>
<div class='fb-share-button' data-layout='box_count' expr:data-href='data:post.url'/>
</div>
</div>
<div style='clear: both;'/> 

3. Kemudian salin kode JavaScript di bawah ini lalu letakkan 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> 

4. Simpan template dan lihat hasilnya.

Itulah cara memasang share button sederhana di blog, semoga bermanfaat. Jika ada masalah silahkan berkomentar ya, kali aja saya dapat membantu Sobat. Hehe