November 08, 2019

CARA MEMBUAT ELEMEN MENU NAVIGASI UNIK DI PINGGIR HALAMAN BLOG

Selamat malam teman teman blogger, entah mengapa akhir akhir ini saya ketagihan menulis trik HTML dan CSS dan JS jadi tempat menulis yang paling pas untuk menyalurkannya ya di halaman editblogtema.
HTML guiding book
Buku panduan HTML
Kali ini saya ingin berbagi trik membuat menu navigasi blog full screen yang apabila menu di klik maka navigasi layar penuh akan muncul dari dari kiri ke kanan halaman blog kalian, lihat demo di bawah yang saya terapkan melalui opsi HTML:

Contoh menu dorong disamping

Klik elemen Menu hamburger (tiga garis titik tiga) dibawah berikut ini untuk membuka menu contoh blog di dalam kontainer menu merah .
☰ Buka
Cara menerapkan-nya adalah sebagai berikut:
  1. Masuk ke pengaturan blogger
  2. Pilih Tema
  3. Pada pengaturan template terbaru klik titik tiga
  4. Akan muncul menu seperti pada gambar:
  5. Klik atau pilih "Edit HTML" 
  6. Pada halaman editor HTML yang telah terbuka cari kode penutup </head>  dan letakan kode berikut tepat diatasnya:
<style>
body {
  font-family: "Lato", sans-serif;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #FF0000;
  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: 28;
  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>
Selanjutnya masih di di dalam opsi editor HTML, kembali cari kode <body> kalau tiak ketemu kodenya bisa seperti ini:  <body class='container'> atau jika tidak ketemu juga cari kembali kode </head>  dan letakan kode berikut tepat di bawahnya:
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Perihal</a>
  <a href="#">Layanan</a>
  <a href="#">Produk</a>
  <a href="#">kontak</a>
</div>
<div id="main">

  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>
Selanjutnya cari kode penutup </body> dan letakan kode JS berikut tepat diatasnya:
<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
</script>
Save template. Percayalah itu mudah, karena trik ini dapat diterapkan pada template bawaan versi tua dan yang terbaru.

I am a student of Senior High School (SMA) I am living in Bandar Lampung, I am a passionately curious..