Cara Membuat Share Button (Di Bawah Post Blog)

5:07 AM

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.

<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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like& font=arial&colorscheme=light"' 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='hayteknologi' 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 sebagai berikut :

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.

*Baca Juga :

Cara Membuat Share Button (Kode Script dari Addthis.com)

Cara Membuat Share Button (Melalui www.addthis.com)
Cara Membuat Share Button (Di Atas Post Blog)
Cara Membuat Share Button (Di Bawah Sisi Blog)
Cara Membuat Share Button (Di Bawah Post Blog)
Cara Membuat Share Button (Di Pojok Kanan Bawah Blog)
Cara Membuat Share Button (Di Bawah Blog)
Cara Membuat Share Button (Di Pojok Kiri Bawah Blog)