CARA MEMBUAT NAVIGASI MENU KHUSUS BLOGGER MOBILE ATAU HAPE

CARA MEMBUAT NAVIGASI MENU KHUSUS BLOGGER MOBILE ATAU HAPE

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.
mobile all overall, included webpage
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:
  1. Masuk kepengaturan blogger
  2. Pilih Tema
  3. Pilih tombol edit HTML
  4. 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>

  1. Kode kode yang saya sorot warna biru seluruhnya harus diletakan diatas kode </head>
  2. 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.
  3. 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

Beri Komentar ya...

0 Comments