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 memakai 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 dikala dilepas. Cukup menarik bukan? Nah kali ini aku akan sharing cara menciptakan sosial media ibarat pada template Pakdhe Johny tersebut namun dengan css dan jquery yang berbeda tetapi tetap menghasilkan tombol yang serupa yang aku sebut dengan follow social media slide out with jquery.
Namun untuk css sprite-nya tetap memakai image yang sama yang telah dibentuk 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 instruksi javascript dan HTML-nya silahkan simpan di atas instruksi </body>
Namun jangan lupa sebab ini memakai efek toggle bounce, maka harus menambahkan jquery library dan jquery ui di templatenya ibarat di bawah ini berapa pun versinya. Jika sudah ada (berapa pun versinya) maka tidak usah menambahkannya lagi. Selamat mencoba dan agar bermanfaat...
Sumber https://www.kompiajaib.com/
<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'/>
0 Response to "Follow Social Media Slide Out With Jquery"
Posting Komentar