Membuat Tombol Share di bawah Posting blog

Penggunaan share button (Social booksmark) di blog sangat berguna sekali untuk meningkatkan popularitas blog, tentunya blogger semua sudah tahu salah satu cara untuk meningkatkan popularitas blog yaitu dengan memasang tombol share (Social booksmark).
Contoh Tombol Share dengan CSS3 seperti dibawah ini.

Tombol share ini di pasang dibawah postingan blog, tapi anda bisa saja memasang di bagian yang anda inginkan.
Untuk cara pembuatan tombol share dibawah posting seperti berikut :
Masuk pada Edit HTML > Expand Template Widget
Masukan kode dibawah ini sebelum kode ]]></b:skin>

#bookmarks {
padding:6px 0px;text-align:left; overflow: hidden;}
#bookmarks a {
padding:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
color: #9999; text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border: solid 1px #c0c0c0; background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); }

#bookmarks a:hover {
background: #ededed; border: solid 1px #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); }

Lalu cari kode <data:post.body/>
Masukan kode tombol share di bawah ini setelah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bookmarks'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

<a class='tweet' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@BBW)&quot;' rel='nofollow' title='Tweet This!'><img src='http://a1.twimg.com/a/1286563368/images/favicon.ico' style='vertical-align:middle;'/> Twitter</a>

<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'><img src='http://cdn1.diggstatic.com/img/favicon.a015f25c.ico' style='vertical-align:middle;'/> Digg this</a>

<a class='save' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'><img src='https://secure.delicious.com/favicon.ico' style='vertical-align:middle;'/> Del.icio.us</a>

<a class='stumble' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><img src='http://cdn.stumble-upon.com/favicon.ico' style='vertical-align:middle;'/>Stumble It</a>
</div>

</b:if>

Note : Kode mearh diatas adalah untuk menyembunyikan tombol share di beranda , jika anda ingin menampilkannya diatas di beranda maka hapus kode yang saya tandai berwarna merah.

Jika sudah silahkan disimpan.
Untuk tombol share ini saya hanya menggunakan lima (5) Button share yang paling populer dan banyak digunakan diantaranya yaitu :
1. Button Share Facebook
2. Button Share Twitter
3. Button Share Digg It
4. Button Share Del.ici.us
5. Button share Stumble
Jika ingin menambahkan button share lainnya silahkan masukan di bagian kode button share diatas

Twitter Digg this Del.icio.us Stumble It

Dapatkan kiriman artikel terbaru langsung ke email anda!
Masukan Alamat Email Anda

Delivered by FeedBurner

Artikel Terkait