{"id":3961,"date":"2025-08-19T19:15:47","date_gmt":"2025-08-19T12:15:47","guid":{"rendered":"https:\/\/www.jagowebdesign.com\/website\/?p=3961"},"modified":"2025-08-26T19:20:48","modified_gmt":"2025-08-26T12:20:48","slug":"cara-membuat-menu-navigasi-drop-down-di-blogspot","status":"publish","type":"post","link":"https:\/\/www.jagowebdesign.com\/website\/cara-membuat-menu-navigasi-drop-down-di-blogspot\/","title":{"rendered":"Cara Membuat Menu Navigasi Drop-down di Blogspot"},"content":{"rendered":"

Menu navigasi (navbar) adalah \u201cpeta\u201d bagi pengunjung blog. Semakin rapi dan mudah dipahami strukturnya, semakin nyaman pula pengalaman membaca mereka. Salah satu teknik populer agar menu tetap ringkas namun memuat banyak tautan adalah drop-down<\/strong>\u2014submenu yang muncul ketika kursor diarahkan (hover) atau diklik pada induk menu.<\/p>\n

Kabar baiknya, cara membuat menu navigasi drop-down di Blogspot<\/strong> ternyata tidak sesulit yang dibayangkan. Anda hanya membutuhkan sedikit penyesuaian HTML dan CSS, tanpa plugin eksternal. Artikel ini memandu Anda langkah demi langkah\u2014mulai dari menyiapkan struktur menu di Tata Letak hingga styling agar tampil modern dan responsif.<\/p>\n

\n

1 | Persiapan: Buat Halaman & Label yang Akan Ditampilkan<\/h2>\n

Sebelum menyentuh kode, pastikan Anda sudah:<\/p>\n

    \n
  1. \n

    Menentukan hierarki menu<\/strong><\/p>\n

      \n
    • \n

      Contoh induk: Home<\/em>, Tutorial<\/em>, Download<\/em>, Tentang<\/em>.<\/p>\n<\/li>\n

    • \n

      Contoh submenu di bawah Tutorial<\/em>: Blogspot<\/em>, SEO<\/em>, AdSense<\/em>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n

    • \n

      Membuat Halaman Statis<\/strong> (Pages) atau Label<\/strong> sesuai kebutuhan.<\/p>\n

        \n
      • \n

        Halaman statis cocok untuk About<\/em>, Contact<\/em>, dsb.<\/p>\n<\/li>\n

      • \n

        Label cocok untuk kategori artikel (Blogspot<\/em>, SEO<\/em>).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n

        Catat URL tiap halaman\/label\u2014nanti ditempel ke struktur menu.<\/p>\n

        \n

        2 | Cara 1: Menu Drop-down via \u201cTata Letak\u201d Saja (Tanpa Edit HTML)<\/h2>\n

        Metode ini paling mudah, cocok bagi pemula yang enggan menyentuh kode:<\/p>\n

          \n
        1. \n

          Buka Blogger > Tata Letak.<\/strong><\/p>\n<\/li>\n

        2. \n

          Pada area header<\/em> atau bagian paling atas<\/em>, klik Tambahkan Gadget<\/strong>.<\/p>\n<\/li>\n

        3. \n

          Pilih gadget Halaman<\/strong> (Pages).<\/p>\n<\/li>\n

        4. \n

          Klik Tambahkan tautan eksternal<\/strong> \u279c masukkan Nama<\/strong> (mis. \u201cTutorial\u201d) & URL<\/strong> \u201c#\u201d (tanda pagar) lalu Simpan<\/strong>.<\/p>\n

            \n
          • \n

            \u201c#\u201d membuat item induk tak bermuatan konten.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n

          • \n

            Tambah tautan lagi untuk sub-page<\/em> di bawah \u201cTutorial\u201d, tetapi awali nama dengan empat spasi atau karakter \u201c\u2014\u201d supaya tampak menjorok (indentasi).<\/p>\n<\/li>\n

          • \n

            Susun urutan lewat tarik-geser (drag) hingga submenu berada tepat di bawah induknya.<\/p>\n<\/li>\n<\/ol>\n

            Kelemahan:<\/strong> Hanya menghasilkan menu bertingkat pada tampilan sidebar<\/em> Halaman versi mobile; di desktop tetap linear. Untuk drop-down nyata, Anda butuh penyesuaian HTML + CSS berikut.<\/p>\n

            \n

            3 | Cara 2: Menu Drop-down Kustom dengan HTML & CSS<\/h2>\n

            3.1 Menambahkan Gadget HTML<\/h3>\n
              \n
            1. \n

              Blogger > Tata Letak<\/strong> \u279c cari area \u201cNavbar\u201d atau Header<\/em>.<\/p>\n<\/li>\n

            2. \n

              Klik Tambahkan Gadget > HTML\/JavaScript<\/strong>.<\/p>\n<\/li>\n

            3. \n

              Masukkan kerangka HTML berikut dan ganti #<\/code> dengan URL nyata:<\/p>\n<\/li>\n<\/ol>\n

              \n
              html<\/div>\n
              \n
              \n