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

You Might Also Like:

How to style text in Disqus comments:
  • 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 Hide Parser
Disqus Comments