Cara Mengganti Navbar Jadi Tab Menu atau Membuat Tab Menu Diatas Header Blog

Cara Mengganti Navbar Jadi Tab Menu atau Membuat Tab Menu Diatas Header Blog

Navbar / baris navigasi adalah fitur / bilah mendatar berisikan beberapa menu yang berada diatas header suatu blog, navbar ini sendiri biasanya merupakan fitur tambahan yang terdapat pada suatu blog terutama dengan platform Blogger atau Blogspot. Ada sebagian dari para blogger yang menyembunyikan fitur Navbar ini dan ada juga yang menggantikannya dengan baris menu blog yang lain seperti yang baru-baru ini diterapkan oleh blog gudang-pengetahuanmu.blogspot.com, silahkan teman-teman blogger lihat contoh menu blog yang saya tampilkan sebagai pengganti fitur navbar yang ada di blog gudang-pengetahuanmu.blogspot.com berikut ini :

Tampilan Menu Telah Diatur Sesuai Kebutuhan Blog gudang-pengetahuanmu.blogspot.com

Baca Juga : Cara Menambahkan Fitur Kontak Pencarian Disebelah Tab Menu

Jika teman-teman blogger juga tertarik untuk memodifikasi tampilan blog yang dimiliki dengan fitur tab menu diatas header seperti contoh yang ada pada blog gudang-pengetahuanmu.blogspot.com diatas, mari teman-teman ikuti langkah-langkah "Cara Mengganti Navbar Jadi Tab Menu atau Membuat Tab Menu Diatas Header Blog" yang akan saya bagikan pada kesempatan kali ini. Pertama-tama jika blog yang teman-teman kelola saat ini juga masih menampilkan atau menggunakan fitur Navbar sebaiknya kita sembunyikan terlebih dahulu barulah selanjutnya kita gantikan dengan fitur menu yang diinginkan.


Cara Menyembunyikan Navbar Yang Ada Pada Blog :

1. Login ke www.blogger.com dengan akun yang teman-teman miliki untuk melakukan pengelolaan blog
2. Pilih Menu Tata Letak pada halaman blog yang telah terbuka
3. Pada Bagian Navbar, klik pilihan Edit
4. Pada Tab Konfigurasi Navbar yang tampil pilih optional terakhir yaitu Off dan klik Simpan

Selain dengan cara diatas, teman-teman juga dapat menyembunyikan Navbar blog dengan menambahkan beberapa kode yang akan saya bagikan berikut ini tepat diatas kode ]]></b:skin>  . Caranya buka editor template dengan cara mengeklik Menu Template > Edit HTML > Letakkan kursor mouse pada kotak Edit HTML yang terbuka dan tekan tombol kombinasi keyboard CTRL+F untuk menampilkan kotak pencarian, lalu cari kode ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya :

#navbar-iframe {
  height:0px; visibility: hidden; display: none;
}

* Langkah-langkah dan Kode diatas berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya teman-teman telah menyembunyikan navbar standar maka abaikan petunjuk langkah-langkah diatas dan lanjutkan pada langkah-langkah berikutnya.


Cara Mengganti Navbar Jadi Tab Menu atau Membuat Tab Menu Diatas Header Blog :

1. Tambahkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin>

.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 37px;
  font-size: 14px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kolom-utama {
  -moz-transition: all 0.2s linear 0s;
  width: 960px;
  height: auto;
  margin: 0px auto;
}

.kolom-menu {
  width: 521px;
  height: auto;
  margin: 0px 0px 0px -41px;
  float: left;
  display: inline;
}

.kolom-menu ul {
  height: auto;
  margin-top: 0px;
}

.kolom-menu ul li {
  float: left;
  position: relative;
  list-style: none outside none;
}

.kolom-menu ul li:first-child {
  border-left: 1px solid rgba(30, 30, 30, 0.125);
}

.kolom-menu ul li a {
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  position: relative;
  border-right: 1px solid rgba(30, 30, 30, 0.125);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125);
}

* Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog teman-teman, silahkan teman-teman sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:

2. Cari kode <body dan kemudian tambahkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya

<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://gudang-pengetahuanmu.blogspot.com/'><img alt='L3' height='17px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim1mi2hU4EJVQ_yW_kGK_vbMDydXw2MEi7mySxMXqGsRBrSKM1FxAgZ1cO4N2wAJOXkemw__FxfskzQm1XVHb3VOVGqIawtukN_EjG7GpHr1OHbLRlZejP-nHsCdGavRTG2kKIAOj6zrI/s800/Beranda.png' width='22px'/></a></li>
        <li><a href='URL'>Menu Kiri 1</a></li>
        <li><a href='URL'>Menu Kiri 2</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>

* Ganti http://gudang-pengetahuanmu.blogspot.com/ dengan URL blog teman-teman dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki

3. Klik Simpan Template


Setelah template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan tergantikan dengan Tab Menu baru sesuai dengan yang telah teman-teman atur sebelumnya. Kemudian perlu diketahui bahwa rangkaian contoh kode pada bagian terakhir yang ada diatas akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home) berupa icon gambar, Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan dilakukan pengaturan tambahan seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Judul Menu</a></li> .

Sekian artikel blogging kali ini mengenai "Cara Mengganti Navbar Jadi Tab Menu atau Membuat Tab Menu Diatas Header Blog", semoga akan dapat bermanfaat dan bisa membantu teman-teman blogger dalam memperbaiki tampilan fitur blog yang dikelola. Salam blogger !
.

Tweet