Memasang Tombol Social Sharing di Bawah Judul Artikel

Sebenarnya sudah banyak sekali widget yang saya berikan untuk membagikan artikel kamu ke berbagai macam situs jejaring sosial maupun sosial bookamarking. Kali ini saya akan membagikan tombol berbagi sosial di bawah judul artikel, kira-kira gambarnya seperti di atas dan jika kamu tertarik untuk memasang widget ini, lihat langkah mudah di bawah ini.

1. Masuk ke Blogger.com seperti biasanya.

2. Klik Rancangan --> Edit HTML dan Sebelum kamu mengubah template kamu, sebaiknya kamu back-up dahulu template yang kamu punya.

3. Cari kode <data:post.body/> kemudian kamu salin kode javascript di bawah ini.

    <b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='background:#FFFFFF; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC;'> <table border='0'> <tr>

    <td><!-- Twitter -->

    <a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>

    <td><!--Facebook-->

    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/> </td>

    <td><div style='margin-right:25px;'><!-- STUMBLE UPON -->

    <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>

    <td><!-- AddThis Button BEGIN -->

    <div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;blogcapoenk&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>

    <!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>
 
NOTE :

• Ganti kode yang berwarna biru dengan warna yang kamu suka, gunakan generator warna HTML untuk mendapatkan kode warna yang kamu inginkan.
• Ganti kode yang berwarna ungu dengan judul blog kamu.

4. Cari kode ]]></b:skin> dan salin kode di bawah ini di bawah kode ]]></b:skin>.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script> 

5. Save Template kamu dan lihat hasilnya :)

Terima kasih kepada mybloggertricks.com untuk kode-nya yang sangat luar biasa, dan jika ada pertanyaan, kritik, saran seputar artikel ini bisa kamu ketik komentar kamu di kotak komentar di bawah ini :)