Cara Membuat Widget Melayang di Blog

Pada kesempatan ini kami postingkan Cara Membuat Widget Melayang di Blog (Sticky Widget), untuk membuat Sticky Menu yang tetap melayang saat naik turun scroll tidaklah sulit. Dengan keterangan lain membuat sticky menu, tentunya akan memudahkan pengunjung mengeksplor blog sobat tanpa harus naik turun scroll. Sticky Menu ini awalnya akan terlihat normal, tetapi akan melayang (fixed) ketika mouse discroll ke bawah. Cara Membuat Widget Melayang di Blog tentunya membuat daya tarik tersendiri buat blog atau website milik sobat, bukan sulap bukan sihir karena ini hanya memasang kode script saja.
Masukkan script dibawah ini taruhlah diatas kode </body> dan tentukan selectornya (pada script dibawah ini, aplikasikan pada .nav). Jika mau lihat demonya klik DISINI.

<script type='text/javascript'> //<![CDATA[ $(document).ready(function() { // Menentukan elemen yang dijadikan sticky yaitu .nav var stickyNavTop = $('.nav').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya if (scrollTop > stickyNavTop) { $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 }); } else { $('.nav').css({ 'position': 'relative' }); } }; // Jalankan fungsi stickyNav(); $(window).scroll(function() { stickyNav(); }); }); //]]> </script>

Memunculkan Menu Setelah DiSroll
Apabila ingin memunculkan menu hanya setelah discroll, gunakan kode dibawah ini taruh diatas </body> bedanya hanya menu akan muncul saat di scroll. Jika mau lihat demonya klik DISINI.

<script type='text/javascript'> //<![CDATA[ $(document).ready(function() { // Menentukan elemen yang dijadikan sticky yaitu .nav var stickyNavTop = $('.nav').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya if (scrollTop > stickyNavTop) { $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 }); } else { $('.nav').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 }); } }; // Jalankan fungsi stickyNav(); $(window).scroll(function() { stickyNav(); }); }); //]]> </script>

Selesai coppas klik simpan dan lihat hasilnya. Cara Membuat Widget Melayang di Blog atau Cara Membuat Menu Tetap Pada Posisinya, begitu mudah bukan? Terima kasih buat Kang Ismet yang telah berbagi ilmunya.
Atau Sobat mau gunakan Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll dengan cara yang hampir sama cuma beda scrptnya.

<script type='text/javascript'> //<![CDATA[ $(document).ready(function() { var stickyNavTop = $('.nav').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 }); } else { $('.nav').css({ 'position': 'relative' }); } }; stickyNav(); $(window).scroll(function() { stickyNav(); }); }); //]]> </script>

JANGAN LUPA! Sebelum klik "Save", Ganti elemen .nav dengan elemen/kode yang menjadi Navigasi Menu blog Anda. Di blog CB (New Johny Wuss), kodenya bernama #menu.

Anda ingin Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll, tinggal COPAS saja kode yang digunakan CB di atas. Silahkan pilih mana yang cocok untuk sobat.
Dengan posting ini saya yakin akan bermanfat buat sobat sekalian dalam mengotak atik blog milik sobat tersebut. Salam sukses.