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 sebagai berikut :
- CSS
- HTML
- JavaScript
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 :
Trik ini dapat diterapkan ke hampir semua template bawaan blogspot. Cara pemadangannya adalah sebagai berikut, namun terlebih dahulu masuk ke pengaturan blogger:
Trik ini dapat diterapkan ke hampir semua template bawaan blogspot. Cara pemadangannya adalah sebagai berikut, namun terlebih dahulu masuk ke pengaturan blogger:
- Pilih Tema
- 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='"loading" + 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
Segitu dulu tutorial kali ini. Jika ada pertanyaan, mari berjumpa pada kolom komentar di bawah. Semoga bermanfaat!.