Share Button Tooltip With JQuery

Share button Tooltip

Hallo sahabat blogger, pada kali ini saya akan share sebuah plugin yang bisa dibilang cukup penting dalam sebuah situs yang memiliki konten yang cukup banyak, yaitu sebuah plugin share yang memiliki fungsi tooltip.

tanpa banyak kata lagi langsung loncat saja ke inti topik ini.

Pada plugin ini anda setidaknya sudah memiliki JQuery library v1.10.1 dan kode dibawah ini di blog anda.

<script type='text/javascript' src="//googledrive.com/host/0B22vSZUsgbQfcDJPbGhFZGh5d1U/share-tooltip.js"/>

<div class='share-button'/>

.share-button {
  margin:auto;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
}

$(function () {
    $('.share-button').share({
        flyout: 'top left'
    });
});


Sumber referensi - Github - Share Button

8 komentar

kembara Blogger
keren button sharenya mas... ms mau tanya ,ini http://2.bp.blogspot.com/-qM0eKNrqca8/UvZNLeBgn-I/AAAAAAAAA6M/7g0jz9gt7uo/s1600/FireShot%2BScreen%2BCapture%2B%2523007%2B-%2B%2527Males%2BCode%2527%2B-%2Bmalescode_blogspot_com.png di panngil apa dan di mana mau belajar buat kaya gitu mas......
reply Reply delete Delete
Rizky Kurniawan Ritonga
itu namanya vertical timeline

kamu bisa memperlajarinya [url=http://tympanus.net/codrops/2013/05/02/vertical-timeline]disini[/url]
Mas Rio
wah ada ilmu baru nih, mau obrak abrik dulu mas :W
reply Reply delete Delete
yOu WahYou
sip gan... btw script udah diperbaiki noh....
reply Reply delete Delete

Posting Komentar

Blog ini tidak menerima komentar via OpenID atau Anonim.
Link aktif akan secara otomatis terhapus oleh sistem.
Untuk memasukkan link dengan aman, gunakan kode [url=http://sites.com]Teks Link[/url]
Untuk memasukkan kode, gunakan kode <i rel="code">Kode Kamu</i>
Untuk memasukkan kode yang panjang, gunakan kode <i rel="pre">Kode Panjang Kamu</i>
Untuk menyisipkan gambar, gunakan kode [img]Url Gambar[/img]
Untuk memasukkan title, gunakan kode <b rel="h4">Title kamu ...</b>
Untuk memberikan efek huruf tebal pada teks, gunakan kode <strong>Teks Kamu ...</strong>
Untuk memberikan efek huruf miring pada teks, gunakan kode <em>Teks Kamu ...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

Emotikon
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Cancel Reply