TRIK TEMPLATE: MENAMBAHKAN MENU NAVIGASI TERSEMBUNYI RESPONSIVE PADA TEMA CONTEMPO

Sobat ingin membuat atau menambahkan menu navigasi responsive diatas halaman utama blogspot? Caranya simple saja. Menu yang saya sarankan ini sangat responsive dan mobile, mudah diterapkan pada tema blogger bawaan.

Tampilannya terlihat horisontal saat di buka melalui layar PC dan laptop, dan berubah menjadi dropdown responsive dengan tampilan tombol menu hamburger pada saat di buka melalui hape atau smartphone.

TEMPLAT MANA MENU NAVIGASI INI DAPAT DITERAPKAN?

Sepanjang yang telah kami cobakan menu ini sukses mempercantik dan merobah tampilan tema tema bawaan (default) blogspot atau blogger seperti:

1. Tema sederhana (setelah di edit jadi  lebihresponsive)
2. Tema Awsome (setelah di edit jadi lebih responsive)
3. Tema Perjalanan (setelah di edit jadi responsive)
4. Contempo  (tidak perlu edit responsive, tinggal melakukan beberapa kustomisasi)
5. Emporio  (tidak perlu edit responsive, tinggal melakukan beberapa kustomisasi)
6. Soho  (tidak perlu edit responsive, tinggal melakukan beberapa kustomisasi)
7. Dll.

Tentu saja sobat bisa memodifikasi template bawaan agar menjadi responsive terlebih dahulu sebelum menerapkan atau menambahkan menu responsive ini kedalam salah satu tema yang dipilih.

Akan tetapi saya akan membahas bagaimana membuat menu ini jadi "tersembunyi" pada tampilan tema contempo. Dan hanya akan terlihat pada saat tombol menu pencarian di pencet.

Langkah pertama: Masuk ke pengaturan blogger>>tema>>editHTML

Supaya ikon hamburger menu versi 5 bisa ditampilkan sobat harus menyertakan link dibawah ini ke dalam templat sobat, untuk load library ikonnya. Menjadi satu paket dengan kode HTML yang saya sertakan dibawahnya, kodenya adalah:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

Langkah kedua tambahkan HTML.

Namun apabila sobat rasa link library dari font awsome lama sudah mencukupi maka lupakan link pada langkah pertama tadi, link dibawah ini sudah mencukupi.

Masuk ke pengaturan blogger>>pilih Tema >>EditHTML cari kode <b:include name='searchSubmit'/>
Copy dan pastekan kode dibawah ini di atas kode <b:include name='searchSubmit'/>

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

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Beranda</a>
  <a href="#news">Blog</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
Sobat bisa mengganti tulisan Beranda, Contact dan About dengan tulisan atau nama menu sobat sendiri. Dan sobat bisa mengganti tanda "#" dengan link terkait judul Beranda, contact dan about tadi.
Namun jika sobat ingin menampilkan menu diatas (tidak tersembunyi) cukup meletakannya diatas kode </header> pada tema contempo

Langkah ketiga tambahkan CSS, cari kode :
]]></b:skin> letakan kode dibawah ini diatasnya:

.topnav {
  background-color: #6495ED;
  overflow: hidden;}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;}

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

.active {
  background-color: #4CAF50;
  color: white;}

.topnav .icon {
  display: none;}

Langkah keempat: letakan media queries dibawah ini diatas kode </head>:


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

.topnav {
  overflow: hidden;
  background-color: #6495ED;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

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

.active {
  background-color:#6495ED;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>

Langkah kelima: Tambahkan JavaScript dibawah ini tepat diatas kode </body>:

<script>function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}</script>

Save template sobat

Langkah keenam: menghilangkan atribusi powered by blogger pada tema terbaru blogger.

Nah jika sobat memutuskan akan menggunakan trik ini pada template terbaru bawaan blogger seperti Comtempo, soho dan emporio, dan berniat menyembunyikan atau menghilangkan saja powered by blogger caranya adalah:

1. Masuk kepengaturan blogger
2. Pilih tema
3. Pilih "sesuaikan"
4. Akan muncul opsi blogger desainer
5. Pilih advance atau lanjutan
6. Scroll daftar menu yang muncul keatas
7. Pada daftar paling bawah ada menu "tambahkan css" maka klik itu.
8. Akan keluar kotak atau blanko kosong
9. Copy kode dibawah ini dan pastekan kedalam blanko kosong CSS tadi: div.blogger {
   display: none;
   }
10. Dan lalu simpan/Save tema. Hasil sebelum sesudah terlihat seperti pada gambar:

LIHAT DEMO

www.editblogtema.com