<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu SEO Friendly untuk Blogger</title>
<style>
/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}
/* Navigation Styles */
.seo-nav-container {
background: #2c3e50;
position: sticky;
top: 0;
z-index: 1000;
width: 100
}
.seo-nav {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.seo-logo {
color: white;
font-weight: bold;
font-size: 1.5rem;
text-decoration: none;
padding: 15px 0;
}
.seo-menu {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.seo-menu li {
position: relative;
}
.seo-menu li a {
color: white;
text-decoration: none;
padding: 20px 15px;
display: block;
transition: all 0.3s ease;
font-weight: 500;
}
.seo-menu li a:hover {
background: #34495e;
}
.seo-menu li:hover > .seo-submenu {
display: block;
}
.seo-submenu {
display: none;
position: absolute;
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 200px;
padding: 10px 0;
list-style: none;
border-radius: 5px;
top: 100
left: 0;
z-index: 1000;
}
.seo-submenu li {
width: 100
}
.seo-submenu li a {
color: #333;
padding: 12px 20px;
}
.seo-submenu li a:hover {
background: #f1f1f1;
color: #2980b9;
}
.seo-mobile-toggle {
display: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
padding: 15px;
}
/* Responsive Styles */
@media screen and (max-width: 768px) {
.seo-menu {
display: none;
flex-direction: column;
position: absolute;
top: 100
left: 0;
width: 100
background: #2c3e50;
}
.seo-menu.active {
display: flex;
}
.seo-submenu {
position: static;
width: 100
box-shadow: none;
display: none;
background: #34495e;
}
.seo-menu li:hover > .seo-submenu {
display: none;
}
.seo-submenu.active {
display: block;
}
.seo-mobile-toggle {
display: block;
}
.seo-menu li {
width: 100
}
}
</style>
</head>
<body>
<!-- Menu SEO Friendly untuk Blogger -->
<nav class="seo-nav-container" role="navigation" aria-label="Menu Utama">
<div class="seo-nav">
<a href="/" class="seo-logo" aria-label="Beranda">BlogSaya</a>
<div class="seo-mobile-toggle" id="seoMobileToggle" aria-expanded="false" aria-controls="seoMenu">
☰
</div>
<ul class="seo-menu" id="seoMenu">
<li><a href="/">Beranda</a></li>
<li>
<a href="/kategori" aria-haspopup="true" aria-expanded="false">Kategori</a>
<ul class="seo-submenu">
<li><a href="/kategori/teknologi">Teknologi</a></li>
<li><a href="/kategori/travel">Travel</a></li>
<li><a href="/kategori/kuliner">Kuliner</a></li>
</ul>
</li>
<li><a href="/tentang">Tentang Kami</a></li>
<li><a href="/kontak">Kontak</a></li>
</ul>
</div>
</nav>
<script>
// JavaScript untuk menu mobile
document.addEventListener('DOMContentLoaded', function() {
const mobileToggle = document.getElementById('seoMobileToggle');
const menu = document.getElementById('seoMenu');
mobileToggle.addEventListener('click', function() {
const isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
menu.classList.toggle('active');
});
// Menangani submenu pada perangkat mobile
const menuItemsWithSubmenu = document.querySelectorAll('.seo-menu li > a[aria-haspopup="true"]');
menuItemsWithSubmenu.forEach(function(item) {
item.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
const submenu = this.nextElementSibling;
const isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
submenu.classList.toggle('active');
