Membuat Wiget Sidebar atau Menu Melayang Di Blog

Membuat Wiget Sidebar atau Menu Melayang Di Blog

Membuat Wiget Sidebar atau Menu Melayang Di Blog - Hay sobat kabarlangit, Saya harap kabar anda hari ini baik saja dikarenakkan kali ini saya akan memberikan tutorial mengenai bagaimana cara membuat widget sidebar ataupun menu bisa melayang saat di scrool, atau dengan kata lainya yaitu Membuat Sticky Menu/widget pada blog.

Sebelum saya memberikan tutorialnya ada baikknya saya menjelaskan sedikit apa itu keuntungan sticky menu ini di banding foating menu. Sebenarnya keguananya mempunyai fungsi yang sama yaitu membuat suatu halaman tertentu dapat melayang, baik itu pada bagian sidebar, Menu ataupun yang lainya, Tetapi saya sarankan anda lebih baik menggunakkan sticky menu karena lebih mudah untuk cara penggunaanya yang hanya memasukkan code pemanggil css mana yang ingin di pasangi.
Membuat Wiget Sidebar atau Menu Melayang Di Blog
Nah saya rasa cukup untuk penjelasanya, dan jika sobat tertarik bisa ikuti langkah-langkah pemasangan sticky menu di bawah ini untuk blog anda.

Cara Membuat Sticky Menu

1. Pertama anda masuk ke blog
2. selanjutnya masuk Edit HTML
3. Dan cari kode </body> setelah itu masukkan kode di bawah tepat di atas kode </body> tersebut :
<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>

Keterangan : silahkkan anda ganti Kode  #Nav yang ada pada kode tersebut dengan kode yang ingin anda buat melayang, contohnya bisa : #Header-wrapper, #Menu ataupun #Navigasi

4. Setelah itu save template anda.

Gimana Mudah bukan cara pembuatanya,, jika anda masih kebingungan untuk menerapkanya pada template blog anda silahkan anda tinggalkkan komentar anda. Saya rasa cukup postingan kali ini tentang cara membuat sticky menu atau widget di blog, semoga bermanfaat...

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »