Friday, April 21, 2017

Cara Mudah Membuat 2 Widget Melayang Saat Di Scroll


Tips dan trik kali ini adalah untuk memodifikasi Widget, WARNING .... !!!! Tips ini masih seputaran untuk Blog ya, untuk Wordpress di tunggu aja ntar akan Kak Rolskha update juga.

Jenis widget banyak sekali, tapi kebanyakan itu adalah editan atau sudah di berikan sentuhan kode. Jadi untuk kamu yang mengiginkan Mode Widget yang pas untuk Webnya jangan pernah bosan untuk mempelajarinya.

Next.....

Yang akan kakak Rolskha bagikan pada Tips dan Trik kali ini adalah gimana caranya membuat Widget apapun yang kalian mau jadi Melayang - Layang saat Pengunjung melakukan aktifitas Scrool ...



Untuk Penerapanya sangat mudah ....

1. Buka akun Blog Kamu.
2. Masuk ke mode Template.
3. Cari Kode </body> dan Taruh kode dibawah ini tepat di atasnya.

<script type='text/javascript'> //<![CDATA[ $(function() { if ($('#HTML2').length) { // Ganti "#sticky-sidebar" dengan ID tertentu var el = $('#HTML2'); var stickyTop = $('#HTML2').offset().top; var stickyHeight = $('#HTML2').height(); $(window).scroll(function() { var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper" var windowTop = $(window).scrollTop(); if (stickyTop < windowTop) { el.css({ position: 'fixed', top: 10 // Jarak atau margin sticky dari atas }); } else { el.css('position', 'static'); } if (limit < windowTop) { var diff = limit - windowTop; el.css({ top: diff }); } }); } }); //]]> </script>

4. Silahkan ganti Kode No HTML2  Dengan kode No Widget kamu.




5. Save Template. Dan cek kalau berhasil maka Widget yang kamu inginkan akan tetap muncul meski       di Scroll


Ok selamat mencoba semoga Tips di atas bermanfaat, dan untuk menerapkan pada lebih dari satu WIDGET silahkan download scriptnya di bawah ini .....