Banyak terlihat template modern menggunakan navigasi layar penuh sebagai navigasi blog mereka cara pembuatannya terbilang sederhana namun aman bagi struktur blog: Kalau pada bagian pertama kita telah menerapkan cara membuat menu navigasi layar penuh muncul dari samping kali ini kita membuatnya muncul dari atas:
Untuk membuktikannya silahkan lihat DEMO
www.editblogtema.net
- 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><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>body { font-family: 'Lato', sans-serif;}
.overlay { height: 0%; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgb(100, 149, 237); overflow-y: 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 {overflow-y: auto;} .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="#">Layanans</a> <a href="#">bidang</a> <a href="#">kontak</a> </div></div>
<h2>Contoh Menu Navigasi layar penuh bagian 2</h2>
<p>Klik hamburger menu atau tiga lapis garis dibawah untuk memperagakan menu layar penuh turun.</p>
<p>Pada contoh ini ditunjukan bagaimana menu muncul dari atas turun kebawah:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>function openNav() { document.getElementById("myNav").style.height = "100%";}
function closeNav() { document.getElementById("myNav").style.height = "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..
www.editblogtema.net