Cara Memasang Share Button Sederhana di Blog

Cara Memasang Share Button Sederhana di Blog

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

Kali ini saya akan memberikan tutorial mengenai cara memasang share button sederhana yang barangkali Anda 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 Anda bisa lihat demo gambar di bawah ini, atau dapat Anda lihat tombol share di blog ini.

Cara Memasang Share Button Sederhana di Blog

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 Anda. Hehe

Leave a Reply