Follow Social Media Slide Out With Jquery

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'/>