Jumat, 10 Agustus 2012

Cara Buat Tombol Berbagi Melayang

Tombol Berbagi Melayang atau Floating Share Button yang akan saya berikan kali ini, memiliki tampilan yang sangat keren dan menakjubkan. Widget Floating Share Button ini merupakan hasil karya AddThis.com (sebuah website yang hanya menyediakan social plugin buat pemilik blog atau situs).

Floating Share Button atau ShareBar ini terdiri atas Facebook Button, Twitter Button, Email Button dan Print Button. Kalau kita klik di bagian AddThis Button, maka tombol jejaring sosial yang akan muncul sebanyak 323 jejaring sosial (Social Network). Jadi, Pengunjung blog sobat blogger akan memiliki pilihan yang lebih banyak dalam membagikan postingan kita ke situs jejaring sosial yang mereka ikuti.

Cara Memasang Tombol Berbagi Melayang di Blogger

  • Sign In di blogger.com
  • Pada menu drop down, pilih Layout
  • Klik Add a gadget dan pilih HTML/JavaScript
  • Copy Paste kode berikut pada kolom yang tersedia :
<div class="addthis_bar addthis_bar_vertical addthis_bar_medium" style="top:250px;left:100px;">
            <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
                <span><a class="addthis_button_preferred_1"></a></span>
                <span><a class="addthis_button_preferred_2"></a></span>
                <span><a class="addthis_button_preferred_3"></a></span>
                <span><a class="addthis_button_preferred_4"></a></span>
                <span><a class="addthis_button_compact"></a></span>
<p style="display:none;">ShareBar by <a href="http://www.tutorialblogspot.com">Tutorial Blogspot</a></p></div>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
  • Terakhir, simpan widget sobat

Untuk tampilan yang lebih imut, sobat blogger bisa menggunakan kode di bawah ini :
<div class="addthis_bar addthis_bar_vertical addthis_bar_small" style="top:250px;left:100px;">
            <div class="addthis_toolbox addthis_default_style">
                <span><a class="addthis_button_preferred_1"></a></span>
                <span><a class="addthis_button_preferred_2"></a></span>
                <span><a class="addthis_button_preferred_3"></a></span>
                <span><a class="addthis_button_preferred_4"></a></span>
                <span><a class="addthis_button_compact">
</a></span>
<p style="display:none;">ShareBar by <a href="http://www.tutorialblogspot.com">Tutorial Blogspot</a></p></div></div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
Tambahan :
Ganti angka 100 menjadi angka yang sobat inginkan untuk merubah posisi Widget Share Bar ini.

Tidak ada komentar:

Posting Komentar