TUTORIAL PART 2: MEMBANGUN HEADER RESPONSIVE
Professional Web Development by Muhammad Syafii Tampubolon
Setelah pondasi XML siap, langkah krusial berikutnya adalah membangun Header. Header yang baik harus ringan, rapi di desktop, dan otomatis berubah menjadi menu navigasi yang modern saat dibuka melalui smartphone (Responsive).
01 Struktur HTML Header
Letakkan kode HTML berikut tepat di bawah tag <body>. Ini adalah kerangka untuk Logo dan Navigasi Anda.
<header class='main-header'>
<div class='container header-wrapper'>
<div class='logo-marinesy'>
<h1><a expr:href='data:blog.homepageUrl'>MARINESY</a></h1>
</div>
<div class='menu-toggle' id='mobile-menu'>
<span></span><span></span><span></span>
</div>
<nav class='nav-menu'>
<ul>
<li><a href='#'>HOME</a></li>
<li><a href='#'>SERVICES</a></li>
<li><a href='#'>PORTFOLIO</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<div class='container header-wrapper'>
<div class='logo-marinesy'>
<h1><a expr:href='data:blog.homepageUrl'>MARINESY</a></h1>
</div>
<div class='menu-toggle' id='mobile-menu'>
<span></span><span></span><span></span>
</div>
<nav class='nav-menu'>
<ul>
<li><a href='#'>HOME</a></li>
<li><a href='#'>SERVICES</a></li>
<li><a href='#'>PORTFOLIO</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
</nav>
</div>
</header>
02 Styling CSS (Responsive)
Agar tampilan header Anda mewah dan bisa menyesuaikan layar HP, masukkan kode CSS ini di dalam area <b:skin> template Anda.
/* HEADER CSS */
.main-header { background: #000; padding: 15px 0; border-bottom: 2px solid #ff0000; position: sticky; top: 0; z-index: 999; }
.header-wrapper { display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: auto; padding: 0 20px; }
.logo-marinesy h1 a { color: #ff0000; text-decoration: none; font-weight: 900; letter-spacing: 2px; }
.nav-menu ul { list-style: none; display: flex; gap: 20px; }
.nav-menu ul li a { color: #fff; text-decoration: none; font-weight: 600; }
/* MOBILE VIEW (991px) */
@media screen and (max-width: 991px) {
.nav-menu { position: fixed; top: 60px; left: -100%; background: #111; width: 80%; height: 100vh; transition: 0.5s; }
.nav-menu.active { left: 0; }
.menu-toggle span { display: block; width: 25px; height: 3px; background: #fff; margin: 5px; }
}
.main-header { background: #000; padding: 15px 0; border-bottom: 2px solid #ff0000; position: sticky; top: 0; z-index: 999; }
.header-wrapper { display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: auto; padding: 0 20px; }
.logo-marinesy h1 a { color: #ff0000; text-decoration: none; font-weight: 900; letter-spacing: 2px; }
.nav-menu ul { list-style: none; display: flex; gap: 20px; }
.nav-menu ul li a { color: #fff; text-decoration: none; font-weight: 600; }
/* MOBILE VIEW (991px) */
@media screen and (max-width: 991px) {
.nav-menu { position: fixed; top: 60px; left: -100%; background: #111; width: 80%; height: 100vh; transition: 0.5s; }
.nav-menu.active { left: 0; }
.menu-toggle span { display: block; width: 25px; height: 3px; background: #fff; margin: 5px; }
}
Saran Master: Gunakan
position: sticky; agar menu tetap terlihat meskipun pengunjung scroll ke bawah. Ini meningkatkan kenyamanan navigasi hingga 50%!
03 Aktivasi Navigasi
Jangan lupa gunakan Javascript untuk mengaktifkan fungsi buka-tutup menu pada versi mobile agar website Anda terlihat canggih.