0

Banyak blogger merasa kurang “greget” ketika melakukan scrolling pada blog tapi bagian tab menunya tidak ikut turun atau ketinggalan. Sebenarnya hal ini bukan masalah besar tapi rasanya seperti ada yang kurang. Nah, untuk mengatasi masalah ini maka tampilan menu harus dibuat floating atau melayang.

Selain dapat memperindah tampilan blog, menu melayang atau floating ini juga dapat mempermudah visitor untuk berpindah menu dengan cepat tanpa harus scroll lagi ke bagian atas.

Bahkan, menu melayang ini juga dapat mempengaruhi bounce rate blog karena semakin mudah navigasi menu pada blog tentunya pengunjung atau visitor pun semakin betah.

Tidak heran jika hampir semua blog atau website ternama seperti detik, kaskus, kompas dan lainnya menggunakan floating menu agar pengunjung merasa nyaman. Membuat menu melayang tentu membutuhkan script tambahan.

Baca Juga: Mengenal Lebih Dekat Ciri-Ciri dan Jenis Backlink Berkualitas

Setiap script nantinya memiliki fungsi yang saling terkait untuk mengatur warna, tampilan dan posisi tab menu ketika di scroll, maka dari itu penempatannya harus benar. Cukup sulit ya ?

Namun, bagi Anda pengguna CMS WordPress tidak perlu bingung atau pusing karena sekarang ini sudah ada plugin yang dapat mempermudah pembuatan sticky menu yaitu plugin Menu Sticky (For Anything).

Tutorial Membuat Menu Melayang dengan Plugin

Cara ini tentu saja sangat mudah untuk para pemula karena tidak harus menggunakan script yang cukup menyulitkan. Sebelumnya, Anda harus menginstal Menu Sticky (For Anything) terlebih dahulu kemudian diaktifkan.

Untuk yang masih bingung, saya akan jelaskan secara detail cara menggunakan plugin ini.

Silakan masuk ke dashboard wordpress lalu pilih bagian plugin. Setelah itu pada kolom “search” tulis Menu Sticky (For Anything)

Klik tombol install

Setelah proses instalasi selesai, selanjutnya lakukan aktivasi dengan menekan “activate”

Masuk ke bagian pengaturan atau setting dan pilih tab “Basic Settings”

menu melayang

Pada kolom “Sticky Element” isi dengan script atau id css menu navigasi yang ingin dibuat melayang, misalkan kode css seperti ini : .main-navigation

Untuk mendapatkan id css ini cukup mudah. Buka situs Anda kemudian arahkan kursor ke bagian menu lalu klik kanan dan pilih inspect element.

Lihat bagian CSS, disitu akan terlihat kode atau script css untuk menu blog pada baris ini :

<nav id=”site-navigation” class= “main-navigation” role= “navigation”>

Masukan kode navigation tersebut pada kolom “Sticky Element”

Setelah itu beri ceklist pada bagian “Check for Admin Toolbar”

Tahap selanjutnya pilih bagian “Advanced Settings”

menu melayang

Pada kolom “Z-index” isi dengan nilai 10

Fungsi dari Z-Index ini agar tampilan tab menu tidak transparan ketika di-scroll ke bawah, jika nilainya semakin kecil maka background-nya akan semakin transparan sehingga terlihat tumpang tindih ketika Anda melakukan scrolling.

Setelah semua pengaturan selesai selanjutnya tekan tombol merah “Save Settings”

Cek hasilnya dengan melakukan scrolling dan lihat bagian menunya apakah sudah ikut kebawah atau belum. Jika masih belum, berarti Anda salah memasukan kode CSS menunya silahkan dicoba lagi.

Pengaturan floating menu di atas dapat berfungsi untuk tampilan desktop, tablet dan mobile.

Namun, jika Anda hanya ingin menu blognya melayang pada tampilan desktop saja maka bisa mengisi kolom “Do not sick element when screen smaller than” dengan nilai 780px.

Dengan bantuan plugin Menu Sticky (For Anything) membuat menu melayang menjadi lebih mudah dan cepat. Selain untuk floating menu, plugin ini juga bisa digunakan untuk membuat bagian side-bar dan navigation lainnya ikut melayang ketika di-scroll.

Semoga informasi mengenai Tutorial Membuat Menu Melayang Blog WordPress ini dapat membantu Anda. Selamat mencoba!

Mengenal Lebih Dekat Ciri-Ciri dan Jenis Backlink Berkualitas

Next article

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *