Follow Social Media Slide Out With Jquery

Follow Social Media Slide Out With Jquery

Bola Hero Gawai

Follow Social Media Slide Out With Jquery

Follow Social Media Slide Out
Tentunya Anda sudah tidak asing lagi dengan template Pakdhe Johny buatan Maskolis kan? Yup... sebuah template Blogger dengan fitur-fitur yang menarik yang patut Anda coba. Pada template tersebut terdapat tombol follow social media di sisi kanan blog yang cukup menarik yang di susun dengan css dan jquery dengan menggunakan css sprite untuk image/icon sosial medianya.

Ketika Anda meng-hover-nya, maka tombolnya akan keluar (slide out) dan akan ada efek memantul (bounce) diakhirnya, begitu pun ketika dilepas. Cukup menarik bukan? Nah kali ini saya akan sharing cara membuat sosial media seperti pada template Pakdhe Johny tersebut namun dengan css dan jquery yang berbeda tetapi tetap menghasilkan tombol yang serupa yang saya sebut dengan follow social media slide out with jquery.

Namun untuk css sprite-nya tetap menggunakan image yang sama yang telah dibuat Maskolis. Silahkan coba, perhatikan, dan bandingkan demo di link bawah ini dengan yang ada di template Pakdhe Johny.


Untuk kode-kodenya silahkan copy dari iframe JSFiddle di bawah ini. Untuk kode javascript dan HTML-nya silahkan simpan di atas kode </body>


Namun jangan lupa karena ini menggunakan efek toggle bounce, maka harus menambahkan jquery library dan jquery ui di templatenya seperti di bawah ini berapa pun versinya. Jika sudah ada (berapa pun versinya) maka tidak usah menambahkannya lagi. Selamat mencoba dan semoga bermanfaat...


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

15 Comments Add Comment

kang adhy,tiap hari posting
makannya apa sih bisa top gitu :D

Balas

Hehehehe makannya kode mas hhehhehe :D
Mumpung lagi ada ide aja mas sekalian mengasah otak hehehe :)

Balas

Keren Kang Adhy :D itu kan letaknya di sebelah kanan , kalau di pindah ke sebelah kiri gimana Kang ?

Balas

Weleh weleh gak bisa pertama :D ijin icipi ilmunya kang :D

Balas

sangat menarik kang follow sosmed dengan slide outnya..
ijin simpan untuk blog ade yang lain... :)

Balas

Wah harus disusun ulang mas :)

Balas

Silahkan mas :) mudah2an bisa dimengerti

Balas

Silahkan mas Ade :)

Balas

Pinginnya sih mau saya taruh di sebelah kiri Kang :)

Balas

Keren Kang bisa menghemat tempat :)

Balas

Mangstab kang.. kreatif pisan lah :-bd

Balas

Ternyata asik juga ya kang mempelajari jquery :) sama halnya mempelajari css :)

Balas

kok punya ku gak muncul mas?

Balas
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!

×
×
×