Script Untuk Tombol Share ke Facebook, Twitter dan G+

Script Untuk Tombol Share ke Facebook, Twitter dan G+ kali ini dengan menampilkan jumlah pengunjung yang suka share, tweet, atau berbagi 1+ nya di blog Anda. caranya cukup mudah ya meski harus edit-edit HTML sekalian belajar, hhe

Script ini saya dapet dari seorang teman ketika saya bertanya di salah satu Group Blogger ternama yaitu Diskusi Blogger Pemula. Sebutin ga ya nama nya :D yang pasti dia sabar saat bantu newbi seperti saya memasang Script untuk tomol share ini. Namanya newbi salah salah mulu pasang nya hhi

Ok langsung saja jika Anda ingin tahu cara memasang widget tombol share dengan menampilkan jumlah pengunjung yang klik like, tweet atau G+ di blog sobat, cukup ikuti cara berikut
1. Log in di blogger - ke dashboard
2. pilih Template - Edit HTML
3. Centang Expland Widgetnya
4. cari kode <data:post.body/> untuk memudahkan pencarian tekan ctrl+F
5. kemudian Copy code berikut dan letakkan tepat di bawah <data:post.body/>

<div class='share'>

<p class='bagi'>Suka Artikel ini? Silahkan Bagikan ke Sosial Media Favorit Anda. Jangan lupa di like ya</p>

<ul>

<li>

<a name='fb_share' type='button_count'/>

<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>

</script>

</li>

<li>

<a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></li>

<li><div class='gplus'><g:plusone size='medium'/></div></li>

<li>

<div class='fblike'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no'/></div>

</li>

</ul>

</div>

<style>

.share{overflow:hidden;margin:0px 8;padding:0px 5px 5px;background:whiteSmoke;border:1px solid rgb(221,221,221);width:600px;

height:85px;}

.share ul{margin:0;padding:0;float:left}

.share ul li{list-style-type:none;float:left;margin:0}

</style>

 6. Simpan. Selesai

Beberapa catatan yang saya temui saat edit template, karena memang beda template beda penempatan dan code nya (apalah itu aku ga ngerti ) :D yang pasti jika kode <data:post.body/> ada dua, letakkan di kode yang kedua biasanya setelah read more biasanya.

Kemudian yang di cetak warna merah itu adalah lebar dan panjang kolom pembatas, tinggal atur saja sesuai kelebaran blog Anda. Jadi selamat bereksperimen membuatnya ya. Jika kurang paham bisa di tanyakan di kotak komentar :D

Cc. Thanks to Al Firouz