Cara Membuat Tab Menu Horizontal Di Atas Header Blog

Flamboyan68 - Postingan kali ini masih dan masih seputar tutorial blog, sob! dimaksudkan untuk backup buat saya apabila sewaktu-waktu butuh dan nggk usah kesana kemari untuk cari scriptnya dan tentu berbagi untuk para blogger newbie, so..kita belajar bareng dan berbagi ilmu. Postingan Cara Membuat Tab Menu Horizontal Di Atas Header Blog, biar enggak penasaran sobat bisa melihat screenshot di bawah ini, sekarang kita langsung pada pokok pembahasannya yaitu mengenai cara membuat bilah navigasi di atas header sebagai pengganti navbar. Apabila sobat semua berminat ikuti langkah atau cara dibawah ini secara berurutan, biar lebih mudah pengerjaannya :

menu horizontal diatas header

1.Masuk ke akun blogger sobat
2.Sebelum masuk ke Editor Edit Html sobat lakukan dulu backup template untuk menghindari kegagalan pasang kode script dengan cara Unduh Template Lengkap.
3.Kemudian masuk ke > Template > Lalu klik > Edit Html >
4.Lalu carilah kode ]]></b:skin> dan untuk mempermudah pencarian gunakan Ctrl + F, setelah ketemu dengan kode tadi kemudian sisipkan kode di bawah ini tepat di atas kode ]]></b:skin>

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

Keterangan:

Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya sobat telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.

5.Terus sisipkan kode CSS di bawah ini tepat di atas ]]></b:skin>

.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 27px;
  font-size: 13px;
  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);
}

Keterangan:

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 sobat, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.

6.Selanjutnya cari kode <body dan lalu sisipkan kode berikut ini tepat di bawah kode <body

<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://flamboyan68.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkYO9Pamb4dj6Ajud_wVAIRHYaClqWUijoK7WFDupi_vuwVjwygxDDgxqI2RZoNlVSh7-5pbBI1vUjWH60SA6nh2fZEqFx9ozXDLH-HLxh18uKoxHV-77lwQeicQ81P6r4AwQ_KhJGy4o/s800/Beranda.png' width='20px'/></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>

Keterangan:

Ganti http://flamboyan68.blogspot.com/ dengan URL blog sobat 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.

7.Simpan Template Sobat.

Dan setelah template disimpan maka navbar standar Blogger tidak akan tampak lagi di halaman blog dan muncul dengan navbar baru seperti gambar screenshot di atas. Perlu diketahui oleh sobat bahwa contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), 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 kustomisasi seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>

Sekian dulu postingan kali semoga bermanfaat dan sampai jumpa.

15 Responses to "Cara Membuat Tab Menu Horizontal Di Atas Header Blog "

Hermanbagus said...: wah keren sob, makasih suda share; 21 June, 2013 19:01
Unknown said...: terima kasih sob,atas kunjungan dan komentnya.trims; 22 June, 2013 10:15
rare-angon said...: selamat malam, terima kasih atas artikel nya semoga bisa membantu setiap sahabat yang membutuhkan, success yaa; 03 July, 2013 19:15
Unknown said...: Terima kasih sobat sudah berkenan mampir..; 03 July, 2013 19:48
Unknown said...: trimakasih sob
mampir ya http://wayanfai-s.blogspot.com/; 16 July, 2013 11:55
Unknown said...: Terima kasih sobat sudah berkenan u/ mampir.; 16 July, 2013 12:31
bidan said...: mantab gan,, terimakasih sudah berbagi; 08 September, 2013 11:29
Unknown said...: sama2 sobat..semoga bermanfaat dan terima kasih sudah mampir sukes u/ sobat; 08 September, 2013 11:41
Shidhera-chan said...: Assalamu'alaikum, gan. Maaf nih mau nanya aku masih bingung, udah di copas tapi masih error juga. tolong kasih liat screenshot pas di copas ke html nya biar lebih jelas. kayaknya aku dah salah tempat nih. maaf ya gan.; 14 December, 2013 21:13
Shidhera-chan said...: Assalamu'alaikum gan. Tolong di kasih liat screenshot pas di copas ke bagian edit htmlnya coz aku kayaknya udah salah tempat nih error melulu. tombolnya gak muncul malah cuman tulisan kodenya yg muncul.; 14 December, 2013 21:17
Unknown said...: Wa'allaikumsallam wr.wb. sobat, pertama sobat backup terlebih dahulu templatenya supaya nanti bisa di pulihkan dari kesalahan pasang kode script. Selanjutnya pastikan sobat mengikuti tutorialnya dan lihat dulu posisi kode yang akan di tempatkan. Intinya sobat santai saja dalam memasang kode, cos' tiap template mempunya kode berbeda dan sebaiknya sobat liat2 dulu dan compare dengan tutorial ini. Terima kasih atas kunjungannya, dan jgn segan2 untuk bertanya.Happy blogging...; 14 December, 2013 21:31
Unknown said...: thanks gan tas infonya...
salam sukses....; 08 January, 2014 04:35
Unknown said...: Terima kasih sobat wahyu, sukses juga buat sobat.; 08 January, 2014 08:38
IDCHEAT.COM said...: info yang bagus gan,thx atas info nya salam kenal; 25 February, 2014 04:34
Unknown said...: Sama-sama kawan jek, terima kasih sudah mampir.happy blogging..; 25 February, 2014 10:35