Fixed Sharing Button With Show Hide Button Jquery

Fixed Sharing Button With Show Hide Button Jquery

Bola Hero Gawai

Fixed Sharing Button With Show Hide Button Jquery

Fixed Sharing Button With Show Hide Button Jquery - Fixed sharing button ini menggunakan Font Awesome untuk membuat ikon social media sehingga menjadi lebih mudah ketimbang menggunakan image dengan css sprite

Agar tombolnya menjadi lebih simple, maka tombol-tombolnya disembunyikan dengan hanya menampilkan tombol dengan ikon sharing dengan menggunakan jquey dan akan muncul ketika diklik dengan efek slide.

Tombol-tombol ini tidak menggunakan js untuk tombol-tombol sharing social seperti facebook, twitter, dan google plus melainkan menggunakan url sharing dari social media tersebut. Hanya tombol +1 yang saya sertakan di dalamnya.

Demonya bisa Anda lihat pada gambar animasi gif di bawah ini.

Fixed Sharing Button

1. Sharing Button di sebelah kiri bawah.
Silahkan copy kode css, javascript, dan html sharing button ini pada halaman demo JSFiddle berikut:
Fixed Left Bottom Sharing Button: http://jsfiddle.net/kompiajaib/4uh7do1y/

2. Sharing Button di sebelah kanan bawah.
Silahkan copy kode css, javascript, dan html sharing button ini pada halaman demo JSFiddle berikut:
Fixed Right Bottom Sharing Button: http://jsfiddle.net/kompiajaib/4uh7do1y/1/

Dan pastikan Anda sudah memasang jquery library (berapa pun versinya) dan link css font awesome serta js untuk google+ pada template blog Anda.

Jika Anda kreatif, Anda bisa merubah arah slide show tombolnya ke atas ataupun ke bawah (jika Anda menyimpannya di atas). Selamat mencoba...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×