June 03, 2019

Cara membuat Navigasi Sidebar dengan hamburger menu pada blogspot

side navigasi
Gambar pembuatan side navigasi dengan hamburger menu
Seringkali menu membuka dan menutup Navigasi pada blogger di sebut sebagai Hamburger menu, memang sih tidak mirip sama hamburger malahan lebih mirip garis garis bersusun tiga atau tiga garis bersusun, beneran tapi yang kita bicarakan adalah perihal pembuatannya dengan kode kode sbb:
  1. CSS
  2. HTML
  3. JavaScript
Kegunaannya tentu saja sangat memudahkan pengunjung untuk memahami penggunaan Navigasi blog kita, contohnya

side Navigasi dorong

Jadi klo hamburger diklik menu samping akan mendorong konten dan memunculkan tanda silang, begitu tanda silang di tekan konten kembali normal alias penuh. Coba Tekan (atau klik) Hamburger menu "Buka" dibawah ini:

☰Buka
Trik ini dapat diterapkan ke hampir semua template bawaan blogspot. Cara pemadangannya adalah sebagai berikut, namun terlebih dahulu masuk ke pengaturan blogger:
  1. Pilih Tema
  2. Pilih Edit HTML

1. Tambahkan CSS

Pada halaman editor HTML cari kode </head> lalu tambahkan kode berikut tepat diatasnya:
<style>
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background-color: blue;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #fff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>

2. Tambahkan HTML

Masih pada halaman editor HTML cari kode <body> pada template terbaru (contempo dkk) atau <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> pada template tua atau yang lebih lama. Dan tambahkan kode berikut diatas atau dibawah salah satu dari dua kode tersebut.
<div class="sidenav" id="mySidenav">
<a class="closebtn" href="javascript:void(0)" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<span onclick="openNav()" style="cursor: pointer; font-size: 30px;">☰Buka</span>
</div>
Petunjuk:
Robah tanda pagar '#" dengan link blog sobat sendiri
Robah huruf yang berwarna merah dengan judul menu sobat sendiri.

3. Tambahkan JavaScript

Terakhir cari kode </body> dan tambahkan kode berikut tepat diatasnya:
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
</script>

4. Save Tema

Selamat mencoba.

A coding addict, a hard smoker, love boxing even not a boxer. Love maths even not a scientist