Cara membuat sidemenu sidebar dengan tombol hamburger pada blogspot

Ciri ciri template premium adalah menu navigasinya yang hebat dan dapat mengarahkan pengunjung untuk memasuki seluruh konten blog...
side navbar alias sidenav

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
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.
https://www.tiktok.com/@editvlogtema

2 komentar

  1. Mas kalo yang udh ada menu, trus pengen diganti sama menu gini ada caranya?
    1. Tidak ada masalah sebenarnya. Hanya saja kadang peletakan bagian HTML harus di coba coba, karena bisa membuat menu yang sudah ada posisinha turun kebawah.

      Maka sebaiknya bagian HTML di coba coba letakan ke bagian atas atau bawah tag body.

      Sementara CSS dan JS tetap seperti penjelasan di atas.

      Sebaiknya gunakan sidebar dari tutorial kami terbaru, karena animasinya bisa saja terkesan patah patah pada beberapa jenis template.
Silahkan berkomentar sesuai dengan topik kita ya...
editbloginfo © EDITBLOGTEMA. Developed by Jago Desain