MENU NAVIGASI RESPONSIVE UNTUK HEADER (TOP) BLOGGER
Contoh Menu Navigasi atas responsive
Cara kerjanya mirip sih sama Navigasi sebelumnya yang telah kita bahas hanya saja sekarang posisinya diatas header sehingga bisa menjadi pilihan sebagai menu navigasi utama. Cobalah lihat melalui hape dan sentuh menu hamburgernya untuk menampilkan menu menu dropdown. Cara ini sangat penting buat sobat yang menginginkan sebuah menu navigasi responsive yang dapat di terapkan kepada tema tema default blogger seperti tema tema lama: sederhana, awsome dan perjalanan dan juga dengan mudah dapat diterapkan kepada tema tema terbaru seperti: contempo, emporio, soho dan terkemuka.<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #000;
}
.topnav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #fff;
color: black;
}
.active {
background-color: #000;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="/" class="active">Beranda</a>
<a href="#">Kabar</a>
<a href="#contact">Kontak</a>
<a href="#about">Perihal</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Contoh Menu Navigasi atas responsive</h2>
<p>Cara kerjanya mirip sih sama Navigasi sebelumnya yang telah kita bahas hanya saja sekarang posisinya diatas header sehingga bisa menjadi pilihan sebagai menu navigasi utama.
Cobalah lihat melalui hape dan sentuh menu hamburgernya untuk menampilkan menu menu dropdown. Cara ini sangat penting buat sobat yang menginginkan sebuah menu navigasi responsive yang dapat di terapkan kepada tema tema default blogger seperti tema tema lama: sederhana, awsome dan perjalanan dan juga dengan mudah dapat diterapkan kepada tema tema terbaru seperti: contempo, emporio, soho dan terkemuka.
</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
Panduan:
Menerapkannya masuk ke pengaturan blogger>>pilih tema>>Pilih editHTML, cari kode kode kepala sebagai beriktu: </head>,<body>,</header>
- kode yang saya sorot warna kuning di letakan diatas kode </head>
- Kode yang saya sorot merah letakan dibawah kode <body> atau diatas (bisa juga dibawah) kode </header>
- Kode yang saya sorot warna hijau letakan (pastekan) diatas kode </body>