Cara Membuat Sticky Widget / Widget Melayang yang Ringan dan SEO di Blog

Pada artikel kali ini saya akan membahas Cara Membuat Sticky Widget atau Widget melayang yang mengikuti halaman pada saat di scroll ke bawah ataupun ke atas. Keunggulan dari Widget Sticky ini adalah widget ini sangat ringan ketikda diterapkan di template manapun, selain itu script widget sticky ini akan berenti mengikuti halaman jika sudah mendekati Footer, sehingga tidak akan mengganggu widget yang di pasang di footer.

Kode yang akan saya share disini sangat cocok di pakai dibagian widget manapun yang ada di sidebar. Jika Anda ingin mencobanya silahkan baca tutorial lengkapnya di bawah ini:

1. Pada Dashboard blogger, klik Tema > EDIT HTML
2. Tempel kode di bawah ini sebelum kode </body>
   <script type=’text/javascript’>
   //<![CDATA[
   $(function() {
   if ($(‘#sticky-sidebar‘).length) { // Ganti “#sticky-sidebar” dengan ID tertentu
   var el = $(‘#sticky-sidebar‘);
   var stickyTop = $(‘#sticky-sidebar‘).offset().top;
   var stickyHeight = $(‘#sticky-sidebar‘).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: 20 // Jarak atau margin sticky dari atas
   });
   } else {
   el.css(‘position’, ‘static’);
   }
   if (limit < windowTop) {
   var diff = limit – windowTop;
   el.css({
   top: diff
   });
   }
   });
   }
   });
   //]]>
   </script>
3. Lihat kode yang saya tandai di atas, ganti kode tersebut dengan ID widget yang akan di buat sticky atau melayang.
   Keterangan :
   Kode #Sticky-sidebar adalah ID dari widget yang dibuat melayang sedangkan Kode #Footer-wrapper adalah ID yang berfungsi untuk membatasi fungsi dari widget Sticky. Jadi, pada kode yang ada di atas, widget sticky akan berhenti mengikuti Halaman jika sudah dekat dengan Footer.
4. Sebenarnya, sampai tahap ke tiga di atas, Anda telah berhasil membuat widget sticky pada Blog Anda. Namun ternyata masih ada satu kendala lagi, yaitu widget akan membesar atau melebar ketika sedang dalam keadaan sticky atau melayang. Untuk mengatasinya, silahkan tambahkan kode di bawah ini di bagian CSS pada blog Anda.
   #sticky-sidebar{width:100%;max-width:300px}

   Keterangan: Ganti kode 300px dengan lebar widget sidebar yang ada Pada Blog Anda. dan jangan lupa ganti #sticky-sidebar dengan ID widget yang akan dibuat Sticky atau Melayang

5. Untuk Demo tampilan, Anda bisa melihat sidebar yang ada pada Blog saya ini, persis seperti itu widget sticky yang akan Anda dapatkan