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.
hanya terlihat ketika tombol pencarian di klik

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.
Sangat berguna dalam mendesain ulang templat bawaan 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:
Sebelum dan sesudah di hilangkan
LIHAT DEMO
www.editblogtema.com


Comments

  1. mantap nih boleh di coba nih gan, di tunggu folow back nya ya gan

    ReplyDelete
  2. Terima kasih, bermanfaat sekali postingannya. Tapi agak takut utak atik..takut salah..hehe. Tapi panduannya lengkap banget...bisa dicoba..

    ReplyDelete
  3. biar mudah untuk berkunjung dan berkomentar di blog sobat, izinkanlah ane untuk mem-follow blog sobat, terimakasih banyak :)

    ReplyDelete

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