Cara Membuat Tombol Share Facebook dan Twitter pada Blogspot

Share Button atau tombol share berfungsi untuk mempermudah pengunjung berbagi posting ke teman2nya. Sebenarnya tombol share facebook, twitter, digg dll sudah disediakan oleh blogspot tetapi penempatannya hanya bisa di bawah posting dan tampilannya hanya seperti itu saja, tidak bisa dirubah. Kali ini ana akan share bagaimana cara membuat share button untuk facebook, twitter, digg dan google plus one yang bisa diletakan diatas posting dengan bentuk yang keren dengan ditambah penghitung jumlah share.

Berikut cara membuatnya::

1. Login ke Blogger. Klik menu Design / Rancangan >> Edit HTML

2. Beri tanda centang pada “Expand Widget Template“

3. Lalu cari kode <div class='post-body entry-content'>  untuk mempermudah tekan Ctrl + F pada keyboard anda. Atau kalo tidak ada cari kode class='post-body entry-content' atau jika blog anda sudah menggunakan Read More, maka carilah kode <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>  

4. Jika sudah ketemu copy kode dibawah ini dan paste tepat diatas salah satu kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
Sharing :
</div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'/>
<script type='text/javascript'>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script>
</div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='rufi_id' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
</div>
</b:if>

5. JIka sudah, kemudian jangan lupa klik Save Template

Selesai sudah, Semoga bermanfaat
Salam Blogger

Sharing via:

Tweet