Help you by sincere

October 26, 2018

MENU NAVIGASI MOBILE BLOG PALING MUDAH DIBUAT

2
Saya telah memberikan tutorial contoh cara membuat menu navigasi mobile pada postingan yang berjudul: CARA MEMBUAT MENU NAVIGASI MOBILE FRIENDLY DENGAN MUDAH
Dan tentu saja itu dapat diterapkan dengan mudah pada tema tema bawaan blogger. Saya sangat merekomendasikan anda untuk membuat menu navigasi blog demi tampilan blog agar tampak premium dan tidak gratisan. Kenapa harus mobile, ya karena zaman sekarang memang bukan zaman tampilan laptop tapi MOBILE. Tampilan kali ini adalah: Menu blog  hanya akan terlihat setelah navigasi disentuh oleh jari:
Untuk kali ini kami melanjutkan trik membuat menu navigasi mobile dan anda tinggal meletakan kode kodenya menurut petunjuk yang akan kami berikan namun. Sebenarnya triknya hampir sama dengan tutorial terdahulu hanya saja perintah perintah didalam kodenya berubah dari dropdown menjadi horisontal. Baiklah kita mulai:

Langkah Pertama masuk pengaturan blog, pilih tema, lalu klik edtit-HTML. Cari kode: </head> dan letakan kode css di bawah ini sebelum atau diatas tag </head> tadi:

<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #fff;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  float: left;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a.icon {
  float: right;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}
</style>

Langkah Kedua Masih dalam mode edit-HTML cari kode </header> lalu masukan kode html dibawah ini sebelum atau diatas tag </header> tadi:

<div class='topnav'>
  <a class='active' href='#home'>Logo</a>
  <div id='myLinks'>
    <a href='#news'>News</a>
    <a href='#contact'>Contact</a>
    <a href='#about'>About</a>
  </div>
  <a class='icon' href='javascript:void(0);' onclick='myFunction()'>
    <i class='fa fa-bars'/>
  </a>
</div>

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

</div>

Langkah ketiga, masih pada opsi edit-HTML, cari kode </body> setelah ketemu letakan kode JS dibawah ini diatas tag </body> tadi:

<script>
function myFunction() {
  var x = document.getElementById(&quot;myLinks&quot;);
  if (x.style.display === &quot;block&quot;) {
    x.style.display = &quot;none&quot;;
  } else {
    x.style.display = &quot;block&quot;;
  }
}
</script>

Terakhir SAVE tema dan lihat Demo  animasi tangkapan layar yang saya buat melalui hape:


Sekilas memang mirip dengan menu navigasi editblogtema yang sedang kami pakai (Menu navigasi EditblogTema sedang dalam penyempurnaan terutama pada menu pencarian), tetapi menu osoris saya buat dengan material dan elemen HTML yang jauh lebih ringan dan bersih, Atau silahkan lihat demo template langsung di sitenya:
DEMO

Terimakasih telah berkunjung dan selamat ngeblog teman teman... 

2 comments:

  1. ternyata bolg dafault blogger bisa di edit ya mas, perlu saya dicoba tutornya, sepertinya template asli lebih fast load ...

    ReplyDelete
    Replies
    1. Benar mas, Saya sangat menganjurkankanya buat teman teman dengan alasan:
      1. Bisa jadi premium, karena template premium sebagian juga di buat berdasarkan tema default
      2. Strukturnya sudah sesuai dengan prosedur penulisan elemen dasar kode, bersih dan aman tinggal menyesuaikan dengan kebutuhan
      3. Menghemat pengeluaran
      4. Belajar koding
      5. Dan banyak manfaat lainnya.

      Delete

Follow