Ide layout template halaman ini memang dari saya 😀😀😀...jadi wajar dong saya buka trik pembuatannya. Itu gunanya bekerja sebagai tim, segala pekerjaan dapat dilakukan dengan mudah. Segala masalah dapat di pecahkan dengan lebih cepat, bukan?
Side navbar, atau navigasi bilah samping biasanya memang di sembunyikan guna menghemat ruang untuk konten utama. Ia bisa sewaktu sewaktu di tampilkan dengan mudah melalui tombol menu navigasi guna memudahkan pengunjung dalam mencari konten tertentu di dalam halaman blog kita. Silhakan klik tombol 'full demo' di atas.
Jadi manfaat menu bilah samping pada halaman blog adalah:
- Memudahkan navigasi bagi pengunjung dalam mencari konten tertentu.
- Menghemat ruang konten utama agar tampak lebih simpel dan bersih.
- Cocok untuk menjadi navigasi blog mobile
Fiturnya:
- Tombol menu hamburger, cialah, ini benar benar self minded banget bagi saya, alih alih menggunakan garis susun tiga sebagai ikonnya hamburger menu. Saya memilih image hamburger benaran!
- Memiliki kotak pencarian di atas menu menunya. Sengaja di letakan disini ya biar menghemat ruang lagi.
- So pasti ringan.
1. HTML
Langkah pertama masuk ke pengaturan dasbor blogger bagian edit HTML dan setelah berada di halaman editor HTML blogger, cari kode berikut: <body> dan letakan kode berikut tepat di bawahnya:
<center><h1>JUDUL BLOG ANDA</h1><p>membahas HTML, CSS,Javascript</p></center>
<div id="mySidenav" class="sidenav">
<div class='Search'>
<form action='/search' id='searchbox' method='get'>
<input name='q' placeholder='Ketik disini...' size='15' type='text'/>
<input id='button-submit' type='submit' value='Cari'/>
</form>
</div>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">Beranda</a>
<a href="#">Perihal</a>
<a href="#">Layanan</a>
<a href="#">Blog</a>
</div>
<div id="content">
<span style="font-size:30px;cursor:pointer" onclick="openNav()"><svg style="width:29px;height:29px" viewBox="0 0 24 20">
<path fill="#990000" d="M21 9H3C3 9 3 3 12 3S21 9 21 9M13.35 17H3V18C3 19.66 4.34 21 6 21H13.35C13.13 20.37 13 19.7 13 19C13 18.3 13.13 17.63 13.35 17M21.86 13.73C21.95 13.5 22 13.26 22 13C22 11.9 21.11 11 20 11H11L8.5 13L6 11H4C2.9 11 2 11.9 2 13S2.9 15 4 15H14.54C15.64 13.78 17.23 13 19 13C20.04 13 21 13.26 21.86 13.73M20 18V15H18V18H15V20H18V23H20V20H23V18H20Z" />
</svg> buka</span>
Ingat kode tag <body> bisa saja telah di modifikasi dan berbeda bahkan pada template bawaan versi lama. Kode tag <body> yang jelas hanya ada pada empat varian template default terbaru blogger. Tekan CTRL+F Tuliskan pada kotak pencarian yang muncul dengan menulis <body....(tanpa titik tanpa tutup kurung).
Masih di halaman editor HTML blogger, cari kode berikut: </head> dan letakan kode CSS berikut tepat di atasnya:
<style>
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #f1f1f1;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #555;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #990000;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#content {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
#searchbox{background:#f0f0f0;border:4px solid #f0f0f0;border-radius:1px;padding:0;width:250px}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input{outline:0}
#searchbox input[type="text"]{background:no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;Border-radius:5px;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}
#button-submit{background:#660000;border-width:0;Border-radius:1px;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}
#button-submit:hover{background:#99000066}
#button-submit:active{background:#660000;outline:0}
#button-submit::-moz-focus-inner{border:0}
</style>
3. Javascript
Di dalam halaman editor HTML blogger cari kode berikut: </body> dan letakan kode javascript berikut tepat di atasnya:
<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>
Save tema.
Demikianlah cara membuat menu navagasi bilah samping yang responsif dan mobile friendly ala editblogtema.