Ahmad Rifai
cara membuat menu di blog

Cara Membuat Menu Di Blog WordPress Dan Mengisinya Dengan Artikel

Bagaimana cara membuat menu di blog wordpress?…

Hampir semua blog / website memiliki tab menu baik itu menu horizontal maupun vertikal.

Tab menu biasanya digunakan untuk menampilkan halaman tertentu, seperti halaman home, kontak, tentang, daftar isi, dsb.

Atau yang dianggap penting oleh pemilik blog tersebut, seperti halaman penawaran produk tertentu.

Oh ia artikel ini adalah bagian dari cara membuat blog.

Nah… Pada kesempatan kali saya akan menuliskan cara membuat menu di blog dengan mudah serta cepat. Khususnya untuk pengguna wordpress.

Sebenarnya kita bisa membuat menu di blog secara manual menggunakan html seperti ini :

<div class="tab-menu" id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>

Namun itu sedikit ribet, karena kita juga perlu menambahkan kode css atau bahkan script khusus.

Apalagi di wordpress, kita juga perlu mengetahui bahasa php (walau tidak banyak).

Jadi kalau ada cara membuat menu di blog yang lebih mudah, kenapa harus pilih yang ribet….

Sebelum mulai membuatnya sebaiknya bikin dahulu posting / halaman yang akan dimasukkan ke dalam menu nanti.

Untuk lebih jelasnya silakan baca Cara Membuat Pos & Laman / Panduan Menulis Artikel Di WordPress.

Kenapa harus bikin posting / halaman dahulu?…

Karena ini akan mempermudah anda dalam mengisi menu dengan artikel. Percayalah… Jadi silakan buat dan terbitkan dahulu.

Cara Membuat Menu Di Blog Dengan Mudah

Sekarang saya anggap anda sudah menerbitkan artikel yang akan dipasang ke menu.

Ada 2 cara mudah yang bisa dilakukan untuk membuat menu di blog wordpress.

1# Cara Pertama

Beriku langkah demi langkah bagaimana cara membuat menu di blog wordpress yang pertama :

1. Silakan buka halaman Tampilan / Appearance → Menu. Maka anda akan dibawa ke halaman yang kurang lebih seperti ini.

membuat menu blog

2. Apa bila menu di blog anda masih kosong. Silakan buat dahulu dengan cara menulis nama menu pada kolom yang telah disediakan, kemudian klik tombol Buat Menu.

3. Pilih item yang ingin dimasukkan ke dalam menu.

Lihat pada bagian tengah kiri terdapat pilihan:

  • Laman / Pages : Dapat anda gunakan untuk memasukkan artikel yang telah anda terbitkan melalui laman.
  • Pos / Posts : Dapat digunakan untuk memasang artikel yang diterbitkan melalui posting.
  • Taut Tersuai / Custom Links : Untuk memasukkan artikel dari blog lain dengan cara menuliskan url lengkap halaman artikel tersebut. Atau artikel dari blog anda sendiri yang tidak terdapat pada halaman pembuatan menu ini.
  • Kategori / Categories : Gunakan ini untuk menampilkan seluruh artikel yang memiliki kategori sama.

4. Beri centang salah satu laman / pos / kategori yang ingin anda pasang ke menu. Anda juga boleh memasukkan beberapa sekaligus. Kemudian klik tombol Tambahkan ke Menu.

cara membuat menu

Untuk merubah nama menu silakan klik icon yang saya tandai dengan lingkaran merah (4).

5. Apabila template yang anda gunakan memiliki 2 posisi menu atau lebih. Maka jangan lupa untuk menentukan posisi dengan cara memberi centang salah satu posisi pada bagian Lokasi tema.

Pada umumnya Primary Menu akan berada pada bagian atas / header.

8. Susun menu dengan cara menarik salah satu menu sesuai keinginan.

9. Sampai tahap ini menu yang anda buat belum tampil. Dan untuk membuatnya tampil silakan klik Simpan Menu.

Cara Membuat Dropdown Menu Di Blog

Mungkin anda juga ingin mengetahui bagaimana cara membuat menu dropdown di blog.

Apabila template yang anda gunakan mendukung dropdown menu maka anda dapat membuatnya dengan mudah.

Caranya sama kok seperti yang sudah saya jelaskan di atas.

Pertama : Buat menu dan jangan lupa masukkan juga menu yang akan dijadikan sub menu (dropdown menu).

Kedua : Susun menu sesuai keinginan.

Ketiga : Tarik menu yang akan dijadikan sub menu ke bawah menu yang akan menampilkan dropdown menu nantinya. Tapi tarik agak ke tengah sedikit.

Perhatikan gambar berikut

cara membuat dropdown menu

3 menu yang saya tarik agak ketengah itulah yang nantinya akan tampil sebagai dropdown menu.

Keempat : Jangan lupa klik tombol Simpan Menu.

Cara Memasukkan Beberapa Artikel Dalam 1 Menu

Sebenarnya ini sudah terjawab pada panduan di atas.

Jika anda ingin memasukkan beberapa artikel dalam 1 menu, maka anda harus menerbitkan beberapa artikel dengan kategori sama.

Selain menggunakan kategori anda juga dapat menggunakan tag. Caranya sama, anda harus menerbitkan beberapa artikel dengan tag yang sama.

2# Cara kedua

Cara membuat menu di blog wordpress kedua yang bisa dilakukan adalah :

1. Buka halaman Tampilan → Sesuaikan.

Maka anda akan dibawa ke halaman live editor tampilan blog.

Di sana anda akan melihat beberapa bagian yang bisa digunakan untuk mengatur tampilan blog. Dan salah satunya adalah Menu.

2. Klik Menu → + Tambahkan Menu → Tulis nama menu kemudian klik Buat Menu.

membuat menu dropdown

3. Centang lokasi menu ingin anda gunakan → klik Tambahkan Item.

4. Pilih Pos, Laman, Kategori, Tag, Format yang ingin dimasukkan ke menu. Atau gunakan Taut Tersuai.

cara bikin menu di blog

Anda juga bisa membuat dropdown menu secara live, dan caranya sama. Yaitu dengan cara menarik menu yang ingin dijadikan sub menu ke bawah menu utama (agak ke tengah sedikit).

5. Setelah membuat dan mengedit menu jangan lupa klik Simpan & Terbitkan (Save & Publish).

Selesai.

Nah itulah 2 cara membuat menu di blog wordpress yang paling mudah.

Bagaimana tampilan menu di blog saya nanti?…

Tampilan menu tergantung dari tema wordpress yang anda gunakan.

Sebagian tema mungkin akan memiliki pengaturan menu sendiri. Tapi secara umum itulah cara yang bisa anda lakukan untuk memasang menu di blog wordpress.

Apakah menu akan tetap sesuai saat dibuka melalui hp?…

Ini juga tergantung dari tema wordpress yang anda gunakan.

Apabila tema yang digunakan mendukung menu responsive maka tampilan akan tetap sesuai.

Tapi jika tidak mungkin tidak akan sesuai saat dilihat melalui hp.

Untuk mengetahui apakah tema yang anda gunakan mendukung responsive menu silakan cek langsung blog anda melalui hp.

Bisa juga melalui wp admin.

Di wordpress ada sebuah alat yang bisa digunakan untuk menguji menu apakah responsive atau tidak.

Alat tersebut akan terlihat pada saat anda membuat menu secara live. Ada di Tampilan → Sesuaikan.

Letaknya di bawah sebelah kiri.

menguji responsive menu

Apabila menu tetap sesuai saat anda klik icon untuk menguji tampilan di hp / tablet, itu artinya menu sudah responsive.

Apa yang harus dilakukan jika tema yang saya gunakan tidak mendukung responsive menu?…

Solusinya adalah : ganti dengan tema lain yang sudah responsive.

Silakan buka halaman Template WordPress Gratis Keren + Responsive.

Atau install plugin yang bisa digunakan untuk membuat menu responsive.

Berikut 2 plugin gratis yang dapat anda gunakan adalah.

1. Responsive Menu WordPress Plugin

responsive menu

Fungsi standar :

  • Warna menu dapat anda rubah dengan mudah.
  • Font dapat dirubah dan diatur.
  • Anda dapat menentukan di mana tombol menu ditampilkan.
  • Dari mana menu keluar juga dapat di setting. Keluar dari (kiri, kanan, atas, atau bawah).
  • Anda juga dapat menggunakan gambar sebagai latar menu.
  • Upload logo jika anda mau.
  • Dukungan WPML / Polylang.
  • Dukungan RTL.
  • Dan masih banyak yang lainnya.

Cara Membuat Responsive  Menu Menggunakan Plugin Responsive Menu WordPress

Berikut langkah-langkah yang harus dilakukan untuk membuat menu di blog anda menjadi responsive menggunakan plugin ini.

1. Pertama-tama anda harus install dahulu plugin ini, kemudian aktifkan.

Dan anda akan anda akan menemukan menu tambahan di wp admin dengan nama “Responsive Menu”.

responsive menu wordpress plugin

2. Klik menu tersebut, maka anda akan dibawa ke halaman pengaturan pertama, yaitu : Initial Setup.

3. Pilih menu yang ingin dijadikan responsive, kemudian klik Update Options.

membuat responsive menu

4. Klik tab Menu, kemudian atur sesuai keinginan.

Karena kita menggunakan versi gratis, maka jika ada tulisan PRO kita tidak dapat mengedit bagian tersebut.

Lihat gambar berikut (keterangan ada di bawah nanti).

pengaturan responsive menu di blog

A. Section Ordering

Pada bagian ini silakan aktifkan / non aktifkan (default on semua) sesuai keinginan.

  • Title : untuk menambahkan judul serta logo di atas menu.
  • Menu : untuk menampilkan menu (bagian ini yang paling penting).
  • Search : untuk menampilkan kolom pencarian.
  • Additional Content : jika ini diaktifkan, maka anda dapat menambahkan kode tambahan, baik berupa HTML maupun Shortcodes.
B. Sizing

Di sini anda dapat mengatur lebar serta tinggi menu, tinggi setiap menu, serta ketebalan border.

Jika bingung cara mengaturnya silakan lewati saja tidak apa.

C. Title

Apabila Title diaktifkan, maka anda dapat mengaturnya di sini.

Silakan tulis nama blog serta upload logo, kemudian atur warna sesuai keinginan.

D. Additional Content

Pasang konten tambahan di bagian ini.

Misalnya anda ingin menambahkan iklan, maka silakan pasang kodenya pada kolom yang sudah disediakan.

E. Animation

Di sini anda dapat menentukan apakah menu keluar dari atas, kiri, kanan, atau bawah. Serta jenis animasi.

Sebaiknya aktifkan Close Menu on Body Clicks.

Ini gunanya agar menu akan hilang jika pengguna melakukan klik di luar area menu.

F. Search Box

Pengaturan untuk kolom pencarian.

G. Background Colours

Jika anda ingin keseluruhan menu tersebut menggunakan gambar sebagai latar, maka silakan upload gambar di bagian ini.

Atau jika tidak silakan pilih warna latar yang anda suka.

  • Item Background Colour : warna latar menu.
  • Item Background Colour Hover : warna menu jika di arahkan kursos.
  • Current Item Background Colour : warna latar menu halaman yang dibuka.
  • Current Item Background Colour Hover : warna latar menu halaman yang dibuka jika di arahkan kursos.
H. Border Colours
  • Item Border Colour : warna garis menu.
  • Item Border Colour Hover : warna garis menu kalau diarahkan kursor.
  • Current Item Border Colour : warna garis menu halaman yang dibuka.
  • Current Item Border Colour Hover : warna garis menu halaman yang dibuka jika di arahkan kursos.
I. Text Colours
  • Link Colour : warna link.
  • Link Hover Colour : warna link jika diarahkan kursor
  • Current Link Colour : warna link halaman yang dibuka.
  • Current Link Hover Colour : warna link halaman yang dibuka jika di arahkan kursos.
J. Text Styling
  • Font : untuk mengatur font menu.
  • Font Size : untuk mengatur ukuran font.
  • Text Alignment : untuk mengatur perataan tulisan yang ada di menu.
K. Advanced
  • Depth : untuk mengatur kedalam menu (sub menu berapa tingkat).

5. Klik tab Button, kemudian setting.

Lihat contoh setting button responsive menu berikut :

membuat button menu

Selesai…

Untuk tab lainnya silakan atur sendiri :-).

Tapi kebanyakan untuk versi PRO.

2. WP Responsive Menu Plugin

wp responsive menu

Fitur:

  • Sepenuhnya responsif dan bekerja pada semua jenis perangkat mobile.
  • Mudah digunakan dan terintegrasi dengan sistem menu wordpress.
  • Pilih warna kustom Anda agar sesuai dengan tema Anda.
  • Pilihan untuk membuka menu dari atas, kiri dan kanan.
  • Mudah menambahkan logo.
  • Mudah menyembunyikan elemen yang tidak diinginkan pada perangkat mobile.
  • Mendukung gerakan gesek.
  • Aktifkan / Nonaktifkan pinch to zoom fitur.
  • Bekerja sempurna pada semua perangkat / platform.
  • Menambahkan bar pencarian kustom untuk menu Anda.
  • Kemampuan untuk mengubah search bar teks.

Nah itulah cara membuat menu di blog yang bisa dilakukan untuk memasang menu di wordpress.

Semoga bermanfaat


Langganan Artikel Terbaru

Dapatkan update terbaru blog ini lewat email anda

@

Tinggalkan Balasan