Menu Navigasi

Diposting oleh Syam Februari 04, 2026 Posting Komentar

Mega Menu Navigation - Blogspot

Preview Menu Navigation

Mega Menu Navigation
untuk Blogspot

Menu navigasi modern dengan Mega Menu, responsive, dan SEO-friendly. Cocok untuk blog profesional dengan banyak kategori.

Kode untuk Blogspot

Copy dan paste kode di bawah ini ke template Blogger Anda

HTML/XML - Letakkan setelah tag <body>

<!-- ========== MEGA MENU NAVIGATION ========== -->
<!-- SEO Optimized Navigation for Blogger/Blogspot -->

<header id='mega-nav' itemscope='itemscope' itemtype='https://schema.org/WPHeader'>
  <nav class='mega-nav-container' role='navigation' aria-label='Menu Utama' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
    
    <!-- Top Bar -->
    <div class='nav-topbar'>
      <div class='nav-topbar-inner'>
        <div class='topbar-left'>
          <a href='mailto:email@blog.com' aria-label='Email'>
            <svg viewBox='0 0 24 24'><path d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/></svg>
            <span>email@blog.com</span>
          </a>
        </div>
        <div class='topbar-social'>
          <a href='#' aria-label='Facebook' rel='noopener' target='_blank'>
            <svg viewBox='0 0 24 24'><path d='M18.77,7.46H14.5v-1.9c0-.9.6-1.1,1-1.1h3V.5h-4.33C10.24.5,9.5,3.44,9.5,5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4Z'/></svg>
          </a>
          <a href='#' aria-label='Twitter' rel='noopener' target='_blank'>
            <svg viewBox='0 0 24 24'><path d='M23.44,4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96,1.32-2.02-.88.52-1.86.9-2.9,1.1-.82-.88-2-1.43-3.3-1.43-2.5,0-4.55,2.04-4.55,4.54,0,.36.03.7.1,1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6,1.45-.6,2.3,0,1.56.8,2.95,2,3.77-.74-.03-1.44-.23-2.05-.57v.06c0,2.2,1.56,4.03,3.64,4.44-.67.2-1.37.2-2.06.08.58,1.8,2.26,3.12,4.25,3.16C5.78,18.1,3.37,18.74,1,18.46c2,1.3,4.4,2.04,6.97,2.04,8.35,0,12.92-6.92,12.92-12.93,0-.2,0-.4-.02-.6.9-.63,1.96-1.22,2.56-2.14Z'/></svg>
          </a>
          <a href='#' aria-label='Instagram' rel='noopener' target='_blank'>
            <svg viewBox='0 0 24 24'><path d='M12,2.16c3.2,0,3.58.01,4.85.07,1.17.05,1.8.25,2.23.41.56.22.96.48,1.38.9s.68.82.9,1.38c.16.42.36,1.06.41,2.23.06,1.27.07,1.65.07,4.85s-.01,3.58-.07,4.85c-.05,1.17-.25,1.8-.41,2.23-.22.56-.48.96-.9,1.38s-.82.68-1.38.9c-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9s-.68-.82-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38s.82-.68,1.38-.9c.42-.16,1.06-.36,2.23-.41,1.27-.06,1.65-.07,4.85-.07M12,0C8.74,0,8.33.01,7.05.07,5.78.13,4.9.33,4.14.63c-.78.3-1.45.71-2.11,1.38S.93,3.36.63,4.14c-.3.76-.5,1.64-.56,2.91C.01,8.33,0,8.74,0,12s.01,3.67.07,4.95c.06,1.27.26,2.15.56,2.91.3.78.71,1.45,1.38,2.11s1.33,1.08,2.11,1.38c.76.3,1.64.5,2.91.56,1.28.06,1.69.07,4.95.07s3.67-.01,4.95-.07c1.27-.06,2.15-.26,2.91-.56.78-.3,1.45-.71,2.11-1.38s1.08-1.33,1.38-2.11c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.78-.71-1.45-1.38-2.11s-1.33-1.08-2.11-1.38c-.76-.3-1.64-.5-2.91-.56C15.67.01,15.26,0,12,0Zm0,5.84A6.16,6.16,0,1,0,18.16,12,6.16,6.16,0,0,0,12,5.84ZM12,16a4,4,0,1,1,4-4A4,4,0,0,1,12,16ZM19.85,5.6a1.44,1.44,0,1,1-1.44-1.44A1.44,1.44,0,0,1,19.85,5.6Z'/></svg>
          </a>
        </div>
      </div>
    </div>
    
    <!-- Main Nav -->
    <div class='nav-main'>
      <div class='nav-main-inner'>
        
        <!-- Logo -->
        <a class='nav-logo' href='/' itemprop='url'>
          <div class='logo-icon'>
            <svg viewBox='0 0 24 24'><path d='M13 10V3L4 14h7v7l9-11h-7z'/></svg>
          </div>
          <span class='logo-text' itemprop='name'><data:blog.title/></span>
        </a>
        
        <!-- Desktop Menu -->
        <ul class='nav-menu' id='main-menu'>
          
          <li><a href='/' itemprop='url'>Beranda</a></li>
          
          <!-- Kategori Mega Menu -->
          <li class='has-mega'>
            <a href='#' aria-haspopup='true'>
              Kategori
              <svg class='arrow' viewBox='0 0 24 24'><path d='M19 9l-7 7-7-7'/></svg>
            </a>
            <div class='mega-dropdown'>
              <div class='mega-grid'>
                <div class='mega-col'>
                  <h4>Teknologi</h4>
                  <ul>
                    <li><a href='/search/label/Android'>Android</a></li>
                    <li><a href='/search/label/iOS'>iOS</a></li>
                    <li><a href='/search/label/Windows'>Windows</a></li>
                  </ul>
                </div>
                <div class='mega-col'>
                  <h4>Desain</h4>
                  <ul>
                    <li><a href='/search/label/Template'>Template</a></li>
                    <li><a href='/search/label/CSS'>CSS Effects</a></li>
                    <li><a href='/search/label/Widget'>Widget</a></li>
                  </ul>
                </div>
                <div class='mega-featured'>
                  <h4>🔥 Trending</h4>
                  <a href='#'>Cara Membuat Blog SEO Friendly</a>
                  <a href='#'>Template Blogger Premium Gratis</a>
                </div>
              </div>
            </div>
          </li>
          
          <!-- Tutorial Mega Menu -->
          <li class='has-mega'>
            <a href='#' aria-haspopup='true'>
              Tutorial
              <svg class='arrow' viewBox='0 0 24 24'><path d='M19 9l-7 7-7-7'/></svg>
            </a>
            <div class='mega-dropdown mega-small'>
              <div class='mega-list'>
                <a href='/search/label/Blogger'>
                  <span class='mega-icon bg-orange'>📝</span>
                  <span>Blogger</span>
                </a>
                <a href='/search/label/WordPress'>
                  <span class='mega-icon bg-blue'>🌐</span>
                  <span>WordPress</span>
                </a>
                <a href='/search/label/SEO'>
                  <span class='mega-icon bg-green'>📈</span>
                  <span>SEO</span>
                </a>
                <a href='/search/label/AdSense'>
                  <span class='mega-icon bg-yellow'>💰</span>
                  <span>AdSense</span>
                </a>
              </div>
            </div>
          </li>
          
          <li><a href='/p/download.html' itemprop='url'>Download</a></li>
          <li><a href='/p/about.html' itemprop='url'>Tentang</a></li>
          <li><a href='/p/contact.html' itemprop='url'>Kontak</a></li>
          
        </ul>
        
        <!-- Search & Mobile Toggle -->
        <div class='nav-actions'>
          <button class='nav-search-btn' id='searchToggle' aria-label='Cari'>
            <svg viewBox='0 0 24 24'><path d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/></svg>
          </button>
          <button class='nav-mobile-btn' id='mobileToggle' aria-label='Menu' aria-expanded='false'>
            <svg viewBox='0 0 24 24'><path d='M4 6h16M4 12h16M4 18h16'/></svg>
          </button>
        </div>
        
      </div>
    </div>
    
    <!-- Search Box -->
    <div class='nav-search-box' id='searchBox'>
      <form action='/search' method='get'>
        <input type='search' name='q' placeholder='Cari artikel...' aria-label='Cari'/>
        <button type='submit' aria-label='Cari'>
          <svg viewBox='0 0 24 24'><path d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/></svg>
        </button>
      </form>
    </div>
    
    <!-- Mobile Menu -->
    <div class='nav-mobile-menu' id='mobileMenu'>
      <a href='/'>Beranda</a>
      <div class='mobile-submenu'>
        <button class='submenu-toggle'>Kategori <span>+</span></button>
        <div class='submenu-content'>
          <a href='/search/label/Android'>Android</a>
          <a href='/search/label/iOS'>iOS</a>
          <a href='/search/label/Template'>Template</a>
        </div>
      </div>
      <div class='mobile-submenu'>
        <button class='submenu-toggle'>Tutorial <span>+</span></button>
        <div class='submenu-content'>
          <a href='/search/label/Blogger'>Blogger</a>
          <a href='/search/label/SEO'>SEO</a>
        </div>
      </div>
      <a href='/p/download.html'>Download</a>
      <a href='/p/about.html'>Tentang</a>
      <a href='/p/contact.html'>Kontak</a>
    </div>
    
  </nav>
</header>
<!-- ========== END MEGA MENU ========== -->

CSS - Letakkan di bagian <head>

<style>
/* ========== MEGA MENU NAVIGATION CSS ========== */
/* Variables - Ubah warna sesuai kebutuhan */
:root {
  --nav-bg: linear-gradient(135deg, #312e81 0%, #581c87 50%, #1e293b 100%);
  --nav-primary: #8b5cf6;
  --nav-primary-hover: #a78bfa;
  --nav-text: #ffffff;
  --nav-text-muted: rgba(255,255,255,0.7);
  --nav-border: rgba(255,255,255,0.1);
  --mega-bg: #ffffff;
  --mega-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Reset & Base */
#mega-nav * { box-sizing: border-box; margin: 0; padding: 0; }
#mega-nav { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
#mega-nav svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Top Bar */
.nav-topbar {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nav-border);
  padding: 8px 0;
  font-size: 13px;
}
.nav-topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar-left a {
  color: var(--nav-text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.topbar-left a:hover { color: var(--nav-text); }
.topbar-left svg { width: 16px; height: 16px; }
.topbar-social { display: flex; gap: 8px; }
.topbar-social a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nav-text);
  transition: all 0.2s;
}
.topbar-social a:hover { background: var(--nav-primary); }
.topbar-social svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }

/* Main Navigation */
.nav-main {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nav-border);
}
.nav-main-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--nav-text);
}
.logo-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px -4px rgba(139, 92, 246, 0.4);
}
.logo-icon svg { width: 24px; height: 24px; stroke: #fff; }
.logo-text { font-size: 22px; font-weight: 700; }

/* Desktop Menu */
.nav-menu {
  display: none;
  list-style: none;
  gap: 4px;
}
@media (min-width: 1024px) {
  .nav-menu { display: flex; }
}
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  color: var(--nav-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  border-radius: 8px;
  transition: all 0.2s;
  position: relative;
}
.nav-menu > li > a:hover { color: var(--nav-primary-hover); }
.nav-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--nav-primary);
  transition: all 0.3s;
  transform: translateX(-50%);
}
.nav-menu > li > a:hover::after { width: calc(100% - 36px); }
.nav-menu .arrow { width: 16px; height: 16px; transition: transform 0.3s; }
.nav-menu .has-mega:hover .arrow { transform: rotate(180deg); }

/* Mega Dropdown */
.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  padding-top: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}
.has-mega:hover .mega-dropdown,
.has-mega:focus-within .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-dropdown > div {
  background: var(--mega-bg);
  border-radius: 16px;
  box-shadow: var(--mega-shadow);
  overflow: hidden;
  min-width: 500px;
}
.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.mega-col {
  padding: 24px;
  border-right: 1px solid #f1f5f9;
}
.mega-col h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #94a3b8;
  margin-bottom: 16px;
}
.mega-col ul { list-style: none; }
.mega-col li a {
  display: block;
  padding: 10px 12px;
  color: #334155;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s;
}
.mega-col li a:hover {
  background: #f1f5f9;
  color: var(--nav-primary);
  transform: translateX(4px);
}
.mega-featured {
  padding: 24px;
  background: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
}
.mega-featured h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 16px;
}
.mega-featured a {
  display: block;
  padding: 12px;
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  transition: background 0.2s;
}
.mega-featured a:hover { background: rgba(255,255,255,0.3); }

/* Small Mega */
.mega-small > div { min-width: 400px; }
.mega-list {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mega-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #334155;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.mega-list a:hover {
  background: #faf5ff;
  border-color: #e9d5ff;
  transform: translateX(4px);
}
.mega-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.bg-orange { background: #ffedd5; }
.bg-blue { background: #dbeafe; }
.bg-green { background: #dcfce7; }
.bg-yellow { background: #fef3c7; }

/* Nav Actions */
.nav-actions { display: flex; gap: 8px; }
.nav-search-btn, .nav-mobile-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nav-text);
  transition: background 0.2s;
}
.nav-search-btn:hover, .nav-mobile-btn:hover { background: rgba(255,255,255,0.2); }
.nav-search-btn svg, .nav-mobile-btn svg { width: 20px; height: 20px; }
.nav-mobile-btn { display: flex; }
@media (min-width: 1024px) { .nav-mobile-btn { display: none; } }

/* Search Box */
.nav-search-box {
  display: none;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nav-border);
  padding: 16px;
}
.nav-search-box.active { display: block; }
.nav-search-box form {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}
.nav-search-box input {
  width: 100%;
  padding: 16px 50px 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border 0.2s;
}
.nav-search-box input::placeholder { color: rgba(255,255,255,0.5); }
.nav-search-box input:focus { border-color: var(--nav-primary); }
.nav-search-box button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 8px;
}
.nav-search-box button:hover { color: #fff; }
.nav-search-box svg { width: 20px; height: 20px; }

/* Mobile Menu */
.nav-mobile-menu {
  display: none;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nav-border);
  padding: 16px;
}
.nav-mobile-menu.active { display: block; }
.nav-mobile-menu > a {
  display: block;
  padding: 14px 16px;
  color: var(--nav-text);
  text-decoration: none;
  font-weight: 500;
  border-radius: 10px;
  transition: background 0.2s;
}
.nav-mobile-menu > a:hover { background: rgba(255,255,255,0.1); }
.mobile-submenu { margin: 4px 0; }
.submenu-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  color: var(--nav-text);
  font-weight: 500;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.submenu-toggle:hover { background: rgba(255,255,255,0.1); }
.submenu-toggle span { transition: transform 0.3s; }
.submenu-toggle.active span { transform: rotate(45deg); }
.submenu-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
  padding-left: 16px;
}
.submenu-content.active { max-height: 200px; }
.submenu-content a {
  display: block;
  padding: 10px 16px;
  color: var(--nav-text-muted);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s;
}
.submenu-content a:hover {
  background: rgba(255,255,255,0.1);
  color: var(--nav-text);
}
</style>

JavaScript - Letakkan sebelum tag </body>

<script>
// a');
  
  megaItems.forEach(function(item) {
    item.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        const dropdown = this.nextElementSibling;
        if (dropdown) {
          dropdown.style.opacity = dropdown.style.opacity === '1' ? '0' : '1';
          dropdown.style.visibility = dropdown.style.visibility === 'visible' ? 'hidden' : 'visible';
        }
      }
    });
  });
  
})();
//]]>
</script>

📖 Panduan Pemasangan

Ikuti langkah-langkah berikut untuk memasang menu di Blogger

Backup Template

Buka Blogger → Theme → Backup/Restore → Download tema lengkap

Pasang CSS

Edit HTML → Cari </head> → Paste kode CSS tepat di atasnya

Pasang HTML

Cari <body> → Paste kode HTML tepat di bawahnya

Pasang JavaScript

Cari </body> → Paste kode JS tepat di atasnya

✓

Selesai!

Simpan template dan refresh blog Anda untuk melihat hasilnya

Tips Penting

• Ubah URL label sesuai dengan label yang ada di blog Anda
• Ganti email dan link sosial media dengan milik Anda
• Sesuaikan warna di bagian CSS :root variables
• Pastikan Google Fonts sudah dimuat di template

SEO Optimized

Schema.org markup, semantic HTML, dan ARIA labels untuk aksesibilitas

Fully Responsive

Tampilan optimal di semua perangkat dari mobile hingga desktop

Fast Loading

CSS & JS minimal, animasi CSS native, tanpa library eksternal

Artificial Intelligenc

Menu Navigasi

Teknologi

Desain

🔥 Trending

Mega Menu Navigation
untuk Blogspot

Kode untuk Blogspot

📖 Panduan Pemasangan

Backup Template

Pasang CSS

Pasang HTML

Pasang JavaScript

Selesai!

Tips Penting

SEO Optimized

Fully Responsive

Fast Loading

Posting Komentar untuk "Menu Navigasi"

Menu Navigasi

Teknologi

Desain

🔥 Trending

Mega Menu Navigationuntuk Blogspot

Kode untuk Blogspot

📖 Panduan Pemasangan

Backup Template

Pasang CSS

Pasang HTML

Pasang JavaScript

Selesai!

Tips Penting

SEO Optimized

Fully Responsive

Fast Loading

Posting Komentar untuk "Menu Navigasi"

Mega Menu Navigation
untuk Blogspot