Banyak terlihat template modern menggunakan navigasi layar penuh sebagai navigasi blog mereka cara pembuatannya terbilang sederhana namun aman bagi struktur blog:
<p>Pada contoh ini menu akan sliding dari kiri ke kanan layar halaman blog sobat, ktia dapat merobahnya menjadi sliding dari atas atau tanpa sliding sesuai selera kita:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
Untuk membuktikannya silahkan lihat DEMO
- Masuk kepengaturan blogger
- Pilih Tema
- Pilih tombol edit HTML
- Cari kode kode utama: </header> <body>, </head> dan </body> saya tandai dengan huruf berwarna merah untuk mempermudah panduan.
Kalau sudah siap perhatikan kode dibawah ini yang saya sorot dengan warna warna: Biru,Kuning, Merah
<!DOCTYPE html><p>Klik hamburger menu (garis hitam bersusun tiga) di bawah untuk melihat hasilnya.</p>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>body { font-family: 'Lato', sans-serif;}.overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(169, 169, 169); background-color: rgb(100, 149, 237); overflow-x: hidden; transition: 0.5s;}.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px;}.overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #fff; display: block; transition: 0.3s;}.overlay a:hover, .overlay a:focus { color: #f1f1f1;}.overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px;}@media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; }}</style></head><body>
<div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content"> <a href="#">Perihal</a> <a href="#">Layanan</a> <a href="#">Usaha</a> <a href="#">Hubungi</a> </div></div><h2>Menu Layar penuh</h2>
<p>Pada contoh ini menu akan sliding dari kiri ke kanan layar halaman blog sobat, ktia dapat merobahnya menjadi sliding dari atas atau tanpa sliding sesuai selera kita:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>function openNav() { document.getElementById("myNav").style.width = "100%";}
function closeNav() { document.getElementById("myNav").style.width = "0%";}</script>
</body></html>
- Kode kode yang saya sorot warna biru seluruhnya harus diletakan diatas kode </head>
- Kode kode yang saya soroti warna kuning seluruhnya harus diletakan diatas kode </header> bukan </head> atau dibawah <body> ya (coba coba saja supaya tepat). Cari saja dengan menekan ctrl+c pada keyboard laptop dan letakan seluruh kode yang saya sebutkan tadi diatas atau dibawah kode tersebut.
- Kode kode yang saya sorot warna merah seluruhnya harus diletakan diatas kode </body>
Save template.
Jika sobat ada yang mencobanya dan terjadi error, atau belum mengerti bagaimana memasang link pada menu, jangan sungkan sungkan bertanya kepada kami ya...
Untuk membuktikannya silahkan lihat DEMO
Silahkan bertanya jika masih menemukan ganjalan ya..