Sunday, January 21, 2018

Membuat Menu Stiky Melayang Saat Discoll

Membuat Menu Stiky Melayang Saat Discoll

Tags

Membuat Menu Stiky Pada Blogger
Stiky Menu

Hallo sobat kali ini kita akan belajar menggunakan menu stiky pada blogger. Menu stiky adalah menu yang melayang saat blog di scroll ke atas atau kebawah. Mungkin turor ini sudah banyak di bahas oleh para blogger. Tapi tidak ada salahnya sebagai blogger pemula saya juga ikut membahas hal yang sama.

Lagi pula ini untuk melengkapi dokumentasi dari artikel saya. Pada umumnya template yang di gunakan banyak web site dan blog saat ini sudah suport menu stiky. Apalagi template premium sudah pasti lengkap tetek bengeknya. Menu stiky pada web site atau blog sebetulnya berfungsi untuk mempermudah pengunjung dalam melakukan navigasi pada blog kita.

Dengan kata lain pengunjung di manjakan tidak perlu lagi repot-repot scroll ke bagian atas artikel untuk membuka menu blog kita. Saya pribadi juga menggunakan menu stiky kamu bisa lihat pada blog saya ini. Untuk blog yang templatenya belum suport menu stiky tidak usah repot ingin ganti template. Kamu bisa menyulap menu blog kamu menjadi stiky caranyapun cukup mudah.

Kita tinggal meng copy suatu script yang akan saya bagikan berikut ini kedalam template blog kamu. Jadi saya rasa untuk blogger pemula tutor ini tidak terlalu sulitlah. Baiklah tanpa panjang lebar lagi mari ikuti langkah-langkah berikut ini.

Buka dashboard blog kamu pilih thema dan edit HTML. Selanjutnya copy kode berikut ini dan letakan diatas kode body penutup
</body>

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

Selanjutnya ganti yang saya kasih tanda (#) dengan id menu dari template sobat. ID menu bisa sobat dapatkan pada bagian CSS dari menu blog. Tiap template biasanya memiliki nama ID menu berbeda beda. Tetapi secara garis besar letaknya biasanya di bagian CSS dalam template blog.

Jadi fokus mencari id menu pada bagian CSS template lebih mudahnya cari saja yang ada kata Menu. Setelah selesai simpan template sobat dan lihat hasilnya. Jika gagal fokus pada perbaikan mencari ID menu yang tepat. Sebagai contoh ID menu saya namanya #simplify-duo karna saya menggunakan template simplify.

Kode script stiky diatas juga bisa sobat terapkan untuk winget pada sidebar blog. Jadi script stiky ini multifungsi bisa untuk menu dan juga winget sidebar. Perbedaanya hanya pada ID wingetnya saja. Kalau untuk sidebar biasanya ID wingetnya berupa #HTML 1 dan seterusnya.

Blog saya juga menggunakan kode script yang ini. Beberapa kali juga sempat saya pakai untuk template lain. Jadi script ini 100% bisa di gunakan. Jika ada kendala pada sobat dalam menerapkanya pada blog sobat silahkan tanya di kolom komentar. Semampu saya akan saya jawab secepat mungkin trimakasih wassalam.

A man is known by the companion he keeps !

Buka Komentar

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
EmoticonEmoticon