Membuat navigasi khusus mobile untuk blogging telah banyak dilakukan para blogger zaman sekarang. Mereka ngeblog cukup melalui perangkat mobile seperti hape dan tablet saja dan tidak menggunakan PC desktop atau laptop samasekali.
Semenjak Google memberikan warning kepada para blogger yang halaman webnya masih belum responsive dan mobile, nampaknya mereka memang tidak mengharapkan halamannya blognya di lihat atau dibaca melalui halaman layar besar seperti laptop lagi. Pemirsa yang mengakses internet melalui mobile memang telah mencapai 80%, hasil survei mengatakan pada saat ini orang yang membaca halaman web melalui laptop atau PC desktop adalah opsional atau karena beberapa alasan teknis saja lagi, sisanya mereka membaca via mobile yakni smartphone atau phablet.
Oke kembali ke topik cara menerapkan meneu navigasi mobile ke blogspot atau blogger:
<!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: #000;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #6495ED;
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: #6495ED;
color: black;
}
.active {
background-color: #6495ED;
color: white;
}
</style>
</head>
<body>
<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="#home" class="active">Beranda</a>
<div id="myLinks">
<a href="#news">Berita</a>
<a href="#contact">Hubungi</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>Menu navigasi mobile vertikal</h3>
<p>Demo ini memperagakan bagaimana sebuah navigasi bekerja untuk mobile atau hape.</p>
<p>Klik menu hamburger (atau tiga garis) kanan atas untuk melihat menu.</p>
<p>Sobat bisa membuat menu mobile yang bagus dalam bentuk bar navigasi ini.</p>
</div>
<!-- End smartphone / tablet look -->
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
Untuk membuktikannya silahkan lihat DEMO
www.editblogtema.net
Oke kembali ke topik cara menerapkan meneu navigasi mobile ke blogspot atau blogger:
- 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">
<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: #000;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #6495ED;
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: #6495ED;
color: black;
}
.active {
background-color: #6495ED;
color: white;
}
</style>
</head>
<body>
<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="#home" class="active">Beranda</a>
<div id="myLinks">
<a href="#news">Berita</a>
<a href="#contact">Hubungi</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>Menu navigasi mobile vertikal</h3>
<p>Demo ini memperagakan bagaimana sebuah navigasi bekerja untuk mobile atau hape.</p>
<p>Klik menu hamburger (atau tiga garis) kanan atas untuk melihat menu.</p>
<p>Sobat bisa membuat menu mobile yang bagus dalam bentuk bar navigasi ini.</p>
</div>
<!-- End smartphone / tablet look -->
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</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...
Silahkan bertanya jika masih menemukan ganjalan ya..
www.editblogtema.net
saya mau tanya brother,kalau utuk membuat tampilan horizontal navigasi menu nya terlihat di hape,ada solusinya bro?
BalasHapusthank you so much
Menilik kepada ukuran layar yang terbatas, ada dua cara yang dapat kita lakukan agar menu navigasi pada hape tetap terlihat "horisontal" daripada "dropdown vertikal"
Hapus1. cara pertama: Menampilkan hanya 3 menu pada bar navigasi, namun salah satu atau semua menu memiliki opsi menu "dropdown" Saya melihat ini sedikit bermasalah dengan penyesuaian pada setiap ukuran layar.
2. Cara kedua: Membuat menu sliding sehingga setiap submenu dapat tampil tanpa batas secara horisontal. Menu dapat digeser dari kanan ke kiri dan sebaliknya. Sepertinya saya telah membuat kedua tutorial diatas dalam blog ini. Nanti akan saya publish ulang