Cara membuat Canvas Menu/Sidenav Di blogspot

Oke Kali Ini Saya Akan Membagikan Tutorial Cara membuat Canvas Menu/Sidenav Di blogspot
Jika Kalian Penasaran Boleh Lihat-lihat dulu Di Bawah Ini
 

Demo

Oke Langsung Saja Ke tutorial :

1.Seperti Biasa Login Ke Blogger Kalian
2.Jika Sudah Login Klik Tema/Template -> 'EDIT HTML' Lalu Kalian Cari Kode '</b:skin>' Dan letakkan Kode Css Dibawah ini tepat di atas '</b:skin>'

.mbill-sidenav {height: 100%;width: 0;position: fixed;z-index: 1;top: 0;left: 0px;background-color: #f1f1f1;overflow-x: hidden;transition: 0.5s;padding-top: 100px;}
.mbill-sidenav a {padding: 8px 8px 8px 32px;border-bottom:1px solid #008000;text-decoration: none;font-size: 20px;color: #000;display: block;transition: 0.3s;}
.mbill-sidenav a:hover {color: blue;background:#a6a6a6}
.mbill-sidenav .closembill {position: absolute;border:none;top: 0%;right: 0px;font-size: 20px;margin-left: 10px;z-index:9999;}.mbill-sidenav .closembill:before{content:'x';}.mbill-sidenav .closembill:hover{background-color:transparent;}
#outer {transition: margin-left .5s;padding: 16px;}
.mbill-logo{width:250px;height:100px;float:left;position: absolute;top:0;left:0;}
.dropdown-mbill {display: none;position: relative;background-color: #f9f9f9;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}
.dropdown-mbill a {color: black;text-decoration: none;display: block;text-align: left;font-size:15px;font-weight:bold;}
.dropdown-mbill a:hover {background-color: #a6a6a6}
.dropdown:hover .dropdown-mbill {display: block;}
@media screen and (max-height: 450px) {
  .mbill-sidenav {padding-top: 15px;}
  .mbill-sidenav a {font-size: 18px;}
}

"Ganti Kode yang berwarna Merah dengan yang kamu mau"
"Dan Kode Yang berwana Hijau Stabilo Itu buat Ukuran Gambar/Logo"
"Ganti Kode berwarna Biru menjadi kode kalian"

3.Jika sudah masukan kode HTML di bawah ini di tempat yang kalian inginkan

 
<div id="mbillSidenav" class="mbill-sidenav">
  <a href="javascript:void(0)" class="closembill" onclick="closeNav()"></a>
  <img class='mbill-logo' src='https://qph.ec.quoracdn.net/main-qimg-c5f57fef8a38ebefafd305cf6a4c6d64'/>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
    <div class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-mbill">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#">Clients</a>
      <div class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-mbill">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span> 

JAngan lupa ganti kode "#" menjadi link kalian ingiinkan
Dan Ganti link Yang warna biru menjadi link logo/gambar kalian

4.Save Template
5.menuju ke tata letak -> 'Add Gadget' Masukkan Kode Javascript di bawah ini

 <script>
function openNav() {
    document.getElementById("mbillSidenav").style.width = "250px";
    document.getElementById("outer").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mbillSidenav").style.width = "0";
    document.getElementById("outer").style.marginLeft= "0";
}
</script> 

Pengaturan:
-Ganti kode outer menjadi kode css kalian Seperti "outer-wrapper"/"wrapper"
-Jika template kalian "tidak full width (Content di tengah)" Atur kode 0 menjadi auto
-Namun Jika template kalian full width udah biarkan saja begitu

6.Lalu Save
Dan Lihat Hasilnya :)

Nahh selesai deh Tutorial Cara membuat Canvas menu/sidenav Di blogspot Jika kalian ada pertanyaan/ada yang error cukup tanyakan saja di komentar :D