Cara membuat Sharing Button di bawah postingan Blogger

Selasa, 09 Oktober 2012 | 18:17 WIB

Sharing Button berfungsi sebagai alat untuk berbagi postingan di blog kita ke berbagai jejaring sosial, yang nantinya harapannya kita mendapat visitor untuk berkunjung ke blog kita (visitor backlink). Saat ini sudah banyak yang menyediakan berbagai sharing button untuk postingan blog, mulai dari developer jejaring sosial itu sendiri sampai developer diluar jejaring sosial yang berusaha memadukan berbagai macam sharing button dari berbagai jejaring sosial menjadi satu.

Kali ini kita akan membahas bagaimana membuat sharing button dari berbagai macam jejaring sosial. Kalian dapat mengedit sendiri sesuka hati kalian, misal tombol jejaring sosial mana saja yang perlu untuk ditampilkan. Kode sharing button berikut memanfaatkan kode asli dari jejaring sosial yang ditambah dengan pengaturan html sehingga membuat pengaturannya lebih sederhana.

Untuk langkah pertama, masuk ke akun Blogger, kemudian masuk ke bagian Edit HTML. Jangan lupa untuk mencentang tanda Expand Template Widget. Kemudian gunakan fungsi search CTRL+F untuk menemukan kode <data:post.body/>. Biasanya terdapat beberapa kode yang sama, gunakan data yang kedua. Setelah itu, letakkan kode berikut di bawah kode <data:post.body/> yang kedua tersebut.
<!-- Social Share Code -->
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:4px 0px 30px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;'>
  Share Article on :
</div>
<div style='float:left;padding-left:0px;'>
  <script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='right' type='IN/Share'/>
</div>
<div style='float:left;padding-left:10px;'>
<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; width:90px; height:30px;'/>
</div>
<div style='float:left;padding-left:1px;'>
  <a class='twitter-share-button' data-count='horizontal' data-via='blognusa' 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:1px;'>
  <g:plusone size='medium'/>
</div>
</div>
Hasilnya akan tampak seperti gambar dibawah : 



Kode diatas merupakan kode sharing button dari jejaring sosial Facebook, Twitter, Google Plus dan Linkedin yang merupakan jejaring sosial yang paling banyak digunakan. Kode berwarna merah dapat kalian edit sendiri sesuai dengan pilihan kalian. Jumlah sharing button dapat kalian kurangi atau tambah sesuai kebutuhan, ditambah kode tersebut dapat dipakai di berbagai template tanpa kuatir masalah warna template karena kode tersebut akan menyesuaikan dengan warna template.
Semoga bermanfaat.

Description : Cara membuat Sharing Button di bawah postingan Blogger
Rating : 5
Reviewer : Penjaga Lilin - Cara membuat Sharing Button di bawah postingan Blogger

Advertise

Berlangganan Email

Daftar untuk berlangganan BlogNusa Tutorial melalui email. Ketik email kamu dibawah ini :
RSS FeedRSS

 
BlogNusa © 2010-2014
Design by New WP Themes | Bloggerized by Lasantha - Premium Blogger Templates