Trik Membuat Sticky Widget Blog Seperti di Facebook

Sticky Gadget di Blog Red-Mercenary

Red-Mercenary - Kamu pasti pernah membuka akun kamu di facebook kan? jika kamu perhatikan di halaman beranda, saat kamu scroll ke bawah item yang berada di kanan facebook selalu mengikuti meskipun sudah di scroll jauh kebawah. Nah trik seperti itu yang berikut ini akan saya share di Trik Membuat Sticky Widget Blog Seperti di Facebook.

1. Log in ke blogger dan buka menu Template dan pilih Edit HTML.
2. Cari kode </body> , untuk mempermudah pencarian klik sembarang pada kotak yang berisi kode-kode lalu tekan Ctrl+F, pastekan kode yang akan dicari di kolom pencarian.
3. Jika sudah ketemu pastekan kode di bawah ini, di atas kode </body> yang tadi.
   
   <!--STICKY WIDGET-->
   <script>
   $(document).ready(function() {
   var widget = $(&#39;#ID WIDGET&#39;);
   var start = $(widget).offset().top;
   $.event.add(window, &quot;scroll&quot;, function() {
   var p = $(window).scrollTop();
   $(widget).css(&#39;position&#39;,((p)&gt;start) ? &#39;fixed&#39; : &#39;static&#39;);
   $(widget).css(&#39;top&#39;,((p)&gt;start) ? &#39;10px&#39; : &#39;&#39;);
   });
   });
   </script>
   <!--STICKY WIDGET-->
4. Isikan ID WIDGET dengan ID dari widget yang kamu ingin buat jadi mengikuti saat di scroll. Contohnya HTML17, PopularPost1, dan lain-lain. Jika masih bingung dengan ID silahkan baca panduannya di Cara Mudah Mengetahui ID Widget/Gadget di Blog. Yang berwarna biru adalah margin atas widget silahkan sesuaikan dengan blog kamu.

Jika ingin melihat hasil penerapannya, bisa kamu lihat di kiri dan kanan blog ini jika kamu scroll ke bawah pada artikel yang panjang. Widget di kiri dan kanan akan mengikuti arah scroll. Jika masih bingung silahkan tanya di kotak komentar pada bawah postingan ini. Semoga bermanfaat, Glory!.