MENU NAVIGASI BAGIAN BAWAH BLOG
Contoh menu navigasi bawah bawah blogger responsive
Menu navigasi responsive itu penting jika sobat ingin melengkapi sebuah tema responsive dengan menu navigasi yang responsive pula Maka cara ini bisa diterapkan. Cobalah klik ikon hamburger untuk menampilkan menu pada layar hape, dan sobat akan lihat pada tampilan laptop atau layar besar pada PC desktop menu jadi inline atau horisontal. Memang posisinya sih dibawah halaman. .<html>
<head>
<style>
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #000;
color: white;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {display: none;}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive .icon {
position: absolute;
right: 0;
bottom:0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="navbar" id="myNavbar">
<a class="active" href="https://draft.blogger.com/blogger.g?blogID=3005430155935362803#home">Beranda</a>
<a href="https://draft.blogger.com/blogger.g?blogID=3005430155935362803#news">Kabar</a>
<a href="https://draft.blogger.com/blogger.g?blogID=3005430155935362803#contact">kontak</a>
<a href="https://draft.blogger.com/blogger.g?blogID=3005430155935362803#about">Ihwal</a>
<a class="icon" href="javascript:void(0);" onclick="myFunction()" style="font-size: 15px;">☰</a>
</div>
<div style="padding-left: 16px;">
<h2>
Contoh menu navigasi bawah bawah blogger responsive</h2>
Menu navigasi responsive itu penting jika sobat ingin melengkapi sebuah tema responsive dengan menu navigasi yang responsive pula Maka cara ini bisa diterapkan. Cobalah klik ikon hamburger untuk menampilkan menu pada layar hape, dan sobat akan lihat pada tampilan laptop atau layar besar pada PC desktop menu jadi inline atau horisontal. Memang posisinya sih dibawah halaman.
.<br />
</div>
<script>
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
</body>
</html>
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>