CARA MEMBUAT MENU NAVIGASI BLOGGER MOBILE RINGAN, BERSIH DAN RESPONSIVE

menu nampak dengan tombol hamburger dan ketika disentuh akan menampilkan menu dan submenu secara dropdown
Pada kesempatan ini sekali lagi saya ingin mengajak teman teman blogger agar menggunakan blog mobile ketimbang blogger klasik yang tidak responsive. Dan kalau bisa gunakan saja template default (bawaan) yang telah diedit sendiri. Alasannya:
Tampilan desktop itu sudah tidak penting lagi
Tampilan hape itulah yang lebih penting
Perbandingan kemungkinan orang mengakses blog sobat melalui kedua perangkat adalah:3:1 (tiga berbanding satu), 3 untuk hape hanya satu untuk Laptop/PCdesktop.

Jika sobat ingin tutorial membuat template sobat menjadi responsive kami telah memberikannya di dalam blog ini, terutama kami memposting beberapa tutorial khsusus membuat menu navigasi blogger sobat sendiri, contoh dibawah ini adalah bagaimana menu navigasi bekerja secara mobile, sobat bisa menerapkan contoh ini pada template bawaan (default klasik atau tema default yang lebih baru):

Perhatikan demo live dibawah ini, silahkan eksplorasi dengan menyentuhnya menunya karena image dibawah ini adalah HTML. Sentuh tombol hamburger (garis berlapis tiga):

Menu Navigasi Mobile

Ini hanya demo saja, Menu ini cocok di pasang pada blogger mobile atau Hape.
sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya.

Ini hanya demo saja, Menu ini cocok di pasang pada blogger mobile atau Hape.
sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya.

Ini hanya demo saja, Menu ini cocok di pasang pada blogger mobile atau Hape.
sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya.

Terimakasih!

Nah sobat tentu mengerti bahwa layar hape itu kecil sehingga sebuah menu navigasi blog harus bisa dropdown pada saat ditampilkan pada hape. Dan pada layar besar tentunya menu harus terlihat horisontal.

Pada Demo diatas kami mengikuti aturan standard blogger sebagai berikut:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

body {

font-family: Arial, Helvetica, sans-serif;

}

.mobile-container {

max-width: 480px;

margin: auto;

background-color: #555;

height: 500px;

color: white;

border-radius: 10px;

}

.topnav {

overflow: hidden;

background-color: #333;

position: relative;

}

.topnav #myLinks {

display: none;

}

.topnav a {

color: white;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

display: block;

}

.topnav a.icon {

background: black;

display: block;

position: absolute;

right: 0;

top: 0;

}

.topnav a:hover {

background-color: 
#5F9EA0;

color: black;

}

.active {

background-color: 
#5F9EA0;

color: white;

}

</style>

</head>

<body>

<!-- Simulate a smartphone / tablet -->

<div class="mobile-container">


<!-- Top Navigation Menu -->

<div class="topnav">

<a href="/" class="active">EditblogTema</a>

<div id="myLinks">

<a href="#news">Navigasi</a>

<a href="#contact">Pencarian</a>

<a href="#about">Perihal</a>

</div>

<a href="javascript:void(0);" class="icon" onclick="myFunction()">

<i class="fa fa-bars"></i>

</a>

</div>

<div style="padding-left:16px">

<h3>Vertical Mobile Navbar</h3>

<p>
Ini hanya demo saja, Menu ini cocok di pasang pada blogger mobile atau Hape..</p>

<p>
sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya..</p>

<p>
sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya..</p>

<p>
sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya..</p>

<p>
sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya..</p>


</div>


<!-- Berakhir tampilan hape dan tablet -->
</div>

<script>

function myFunction() {

var x = document.getElementById("myLinks");

if (x.style.display === "block") {

x.style.display = "none";

} else {

x.style.display = "block";

}

}

</script>


Jika sobat terapkan dengan benar maka tentu hal ini akan membuat tampilan menu navigasi mobile pada blog sobat seperti pada demo live yang kami buat diatas. Terapkan saja pada tema bawaan yang baru untuk menambah menu navigasi dan membuat tampilan blog sobat menjadi beda.

Ikuti terus tutorial sederhana kami, dan ajukan pertanyaan untuk kita bahas bersama. Blog ini terutama ditujukan buat pemula yang menginginkan Template gratis bercita rasa premium.




Comments

  1. Banyak dari kita yang tidak mengindahkan fast speed sebuah blog sehingga pengunjung gak mau balik lagi.. pake code ini semoga aja lebih fast respon ya kang

    ReplyDelete
  2. Ini penting banget buat pemula seperti saya...Makasih mas Ya-an

    ReplyDelete
    Replies
    1. Sama-sama.Akan saya jelaskan cara penerapannya...

      Delete

Post a Comment

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan

Popular Minggu ini:

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

AUTODIDACT, WHY YOU FAIL TO PERFORM IT

INI DIA UKURAN GAMBAR TERBARU YANG IDEAL UNTUK KONTEN BLOG AMP