Senin, 13 Februari 2012

Cara Mudah Menambahkan Share Button pada Blog Blogspot

Share Button diperuntukkan oleh pembaca yang senang dengan tulisan kita dan ingin dibagikan dengan teman atau kenalannya, sayangnya pada setelan awal di blog yang disediakan oleh blogger atau sering dikenal dengan blogspot , masih tidak tersedia untuk share button.. Hal ini sedikit menggelitik saya untuk mencari tahu bagaimana caranya meletakkan share button pada setiap postingan di blog saya ini.. 
Share button seperti yang kita kenal, biasanya ada di atas postingan atau lebih sering berada di bawah postingan. seperti gambar di bawah ini contohnya:
Caranya sangat mudah, pertama masuk ke dasbor blog kamu, dan pilih bagian template seperti gambar di bawah ini,

Setelah itu pilih "Edit HTML" maka kamu akan dibawa ke tampilan seperti di bawah ini:
PIlih "Lanjutkan" kemudian akan tampil seperti gambar di bawah ini:

Setelah itu tekan Ctrl+F pada keyboard kamu dan ketik <div class='post-body entry-content'> setelah mendapatkannya, copy paste kode di bawah ini tepat di atas kode tersebut:

<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;'>
Share on :
</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='User Name' 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>
Setelah selesai ganti tulisan berwarna merah dengan username Twittermu dan Simpan Template..
Semoga membantu ...
Terima kasih untuk blog bamz

1 komentar

Dimen Sulap 13 Maret 2013 07.48

Ok bro dicoba dulu nih triknya makasih yah

Poskan Komentar

Berikanlah komentar dengan bahasa yang baik. Setiap komentar menunggu moderasi admin. Terima kasih :-)

Blog Kebetulan. Diberdayakan oleh Blogger.