04/10/13

Cara membuat tab menu laman di atas header

kali ini saya akan mempostingkan cara membuat tab menu laman di atas header, caranya sangat mudah kalian tinggal lihat caranya dibawah:



1. kalian masuk ke blog kalian terlebih dahulu,
2. klik opsi pilih template kemudian klik edit HTML
3. kemudian cari kode ]]></b:skin> 
4. setelah itu simpan kode dibawah ini tepat di atas kode ]]></b:skin> 

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

5. sama seperti di atas, kode dibawah ini taruh di atas kode  ]]></b:skin>



/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
--------------------------------------------------------------*/
.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);
}

6. setelah selesai kemudian cari kode <body> dan simpan kode dibawah ini tepat dibawah kode tadi





<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://sahabatbloggerr.blogspot.com/'><img alt='L3' height='15px'
src='https://lh6.googleusercontent.com/-GrWWmwsRww4/UFjcGGzlSYI/AAAAAAAAAn0/rP9UFz050sk/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

pemberitahuan:


semoga berhasil .....


17 komentar:

  1. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. Thanks tutorialnya :)
    Izin mengcopy code tersebut..
    gigihkurniawan.blogspot.com

    BalasHapus
    Balasan
    1. oke sama"...
      silahkan sebarkan... :)

      Hapus
  3. Thanks atas postnya

    ayo saling follow

    BalasHapus
    Balasan
    1. oke sama",
      thnks atas kunjungannya gan

      Hapus
  4. gan tolong pencereahan nya cara bikin bilah2 tab atau menu yang banyak gimana cara nya contoh

    tab 1 - tab 2 tab 3 Dll tolong posting lagi gan + SS tutorial nya atau di sini riosassori.bloger.com blog amatiran watatata masih acak2 kan gan makasih sebelom nya

    BalasHapus
  5. Mantab Gan langsung terpasang, tapi ada kendalanya untuk kolom menu kanan 2 tidak terlihat dimonitor saya. Bagaimana cara mendekatkanya ?
    Minta tolong ditinjau Gan.....terima Kasih.

    BalasHapus
  6. tutorial yang bagus gan..

    BalasHapus
  7. Tanks ya gan. akan ane coba ni panduannya, kebetulan ane baru aja coba buat blog. Coba mampir gan di blog saya andysele.blogspot.com

    BalasHapus
  8. aduh udah di coba , tapi malah menu ku itu tdk berfungsi,.. trus harus gi mna tuh,,..?

    BalasHapus
  9. gan kok tulisan "]]> " nya ga ada di Edit HTML gua

    BalasHapus
  10. Maaf, bisa posting cara yang lebih mudah? Belum mengerti ._.

    BalasHapus
  11. Maaf gan krang jelas tutorialnya... Bisa diperumit lagi g?

    BalasHapus