Cara Membuat Navbar Menu Bertingkat

Kastaone - Kamis, 26 Juli 2012 - 07:00 wita
Kawan kita Umar menyampaikan pertanyaan di CBox yang isinya : "mo, nanya nih, bagaimana cara bikin dropdown menu bertingkat, thanks" tapi sayangnya Link yang ditinggalkan mengarah ke Emailnya, :w; dari pada tak menjawab mendingan saya jawab disini, hitung-hitung menambah postingan kwek kwek kwek :y; 


Oke langsung saja ke cara membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML - Lanjutkan
  • Cari ]]></b:skin>
  • Copas Script berikut diatas ]]></b:skin>
#NavbarMenu {
 background:#7CA9C0;
 height: 30px;
 color: $navcolor;
 margin: 0 auto 0;
 padding: 0;
 font: bold 10px Arial, Tahoma, Verdana;
 border: 3px solid #699AB8
 }
#nav {
width: 100%; float: left;
 margin: 0;
 padding: 0;
}
#nav ul {
 float: left;
 list-style: none;
 margin: 0;
 padding: 0;
}
#nav li {
 list-style: none;
 margin: 0;
 padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
 color: $navcolor;
 display: block;
 text-transform: uppercase;
 margin: 0;
 padding: 5px 15px;
 font: bold 13px Tahoma, Georgia, Times New Roman;
 border-right:0px solid #afcaee;
}
#nav li a:hover, #nav li a:active {
 background: #699AB8;
 border-top:1px solid #333;
 border-right:1px solid #333;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
color: #FFF;
text-shadow: 1px 1px 1px #F00;
text-decoration: none;
margin-top: 2px;
padding: 5px 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #7CA9C0;
width: 150px;
color: #000;
text-transform: uppercase;
float: none;
margin : 0;
padding: 5px 10px;
border: 1px solid #afcaee;
font: normal 13px Tahoma, Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #699AB8 url(http://2.bp.blogspot.com/-2uBOQcTbFSU/T2-v28mVpGI/AAAAAAAACCE/y07sQY7-RNE/s1600/arrow_right.gif) no-repeat right 10px;
border: 1px solid #ccc;
color: #FFF;
text-shadow: 1px 1px 1px #F00;
text-decoration: none;
font-size: 14px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 150px;
}
#nav li ul ul {
margin: -26px 0 0 172px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

  • Selanjutnya cari <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> [Ini Nama Blog Kawan] sampai </div> yang terakhir  
  • Copas Script berikut dibawahnya setelah </div>

    <div id='NavbarMenu'>
    <ul id='nav'>
    <li><a href='http://blogbego-creation.blogspot.com' title='KEMBALI KE BLOGBEGO CREATION'><img border='0' height='25' src='http://3.bp.blogspot.com/-a4lSrz8WpR0/T9MJ44eMixI/AAAAAAAACtw/2-NrZSBRbKU/s200/HOME2.ICO' title='Kembali ke Beranda' width='20'/></a></li>
    <li> <a href='#'>MY BLOG</a>
    <ul>
    <li><a href='http://tips-blogbego.blogspot.com' target='_blank'>TIPS BLOGBEGO </a></li>
    <li><a href='http://info-blogbego.blogspot.com' target='_blank'>INFO BLOGBEGO Plus </a></li>
    <li><a href='http://blog-renovasi.blogspot.com' target='_blank'>BLOG CREATION </a></li>
    </ul></li>
    <li> <a href='#'>BLOG DEMO</a>
    <ul>
    <li><a href='http://blog-bego.blogspot.com' target='_blank'>BLOG BEGO </a></li>
    <li><a href='http://melajah-di.blogspot.com' target='_blank'>MELAJAH DI </a></li>
    </ul></li>
    <li><a href='http://astore.amazon.com/wacc01-20' target='_blank'> AMAZON </a></li>
    <li><a href='http://pagespeed.googlelabs.com' target='_blank'> TEST BLOG </a></li>
    <li> <a href='#'>Page</a>
            <ul>
            <li> <a href='#'>Edit Page #A</a>
                      <ul>
                      <li><a href='#'>Page #A-1</a>
                              <ul>
                              <li><a href='#'>Page #A-1-1</a></li>
                              <li><a href='#'>Page #A-1-2</a></li>
                              </ul> </li>
                       <li><a href='#'>Page #A-2</a></li>
                       <li><a href='#'>Page #A-3</a></li>
                      </ul> </li>
            <li><a href='#'>Edit Page #B</a></li>
            <li><a href='#'>Edit Page #C</a></li>
            <li><a href='#'>Edit Page #D</a></li>
            <li><a href='#'>Edit Page #E</a></li>
            </ul></li>
    </ul></div>

  • Atau kawan bisa menyimpannya pada Gadget, caranya : Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript 
  • Silahkan Ganti URL Blog saya dengan URL kawan
  • Simpan Template / Blog kawan 
Kalau kawan ingin agar tampilan dengan warna berbeda silahkan disesuaikan :z;



Berbagi Artikel :

Cara Membuat Navbar Menu Bertingkat
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Cara Membuat Navbar Menu Bertingkat
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

19 Komentar pada : “Cara Membuat Navbar Menu Bertingkat”

  1. Terima kasih bro,... ane coba dulu ...
    mari mampir ke blog ane ya

    BalasHapus
    Balasan
    1. trima kasih kembali kawan :z;
      Kunjungan balik :w; pasti, jangan kwatir

      Hapus
  2. terimakasih gan tutorialnya sangat membantu :)

    BalasHapus
    Balasan
    1. terima kasih kembali, mudah-mudahan bisa membantu :z;

      Hapus
  3. mas...nyesuaikna ukurannya biar gak kepanjangan gimana y mas?? :e;
    makasih sebelumnya..aq dah buat tapi kepanjangan,,,

    BalasHapus
    Balasan
    1. Saya kurang ngerti maksud kepanjangan....apanya :q; atau tingkatannya terlalu banyak yang kawan maksud panjang :i;

      Hapus
  4. Template koq g bisa d sesuaikan y kawan...
    infonya terjadi kesalahan pada htm http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif

    BalasHapus
    Balasan
    1. setelah saya cek, URL Blog saya belum kawan ganti, makanya Beranda mengarah ke Blog saya :w;

      Hapus
  5. ok mksh ilmu'y kwan.. :a;
    trus biar navbar'y g buka d tab baru gmn cra'y.. :e;

    BalasHapus
    Balasan
    1. Caranya : hilangkan tulisan » target="_blank" :w;

      Hapus
  6. Suksma Kawan .. . he he he ..

    BalasHapus
  7. terimaskih banyak mas.saya sangat terbantu

    BalasHapus
  8. Manjur banget gan saranya. tapi masih ada kendala pribadi ni gan. itu kan warna background navbarnya biru. gimana cara merubahnya menjadi warna lain?

    BalasHapus
    Balasan
    1. Kawan tinggal mengganti kode warna backgroundnya misalnya #7ca9c0 [biru] menjadi #000000 [hitam] atau #ff0000 [merah] dan untuk border dengan kode #699ab8 [biru] agak gelap :q;

      Hapus
  9. Terimakasih atas ilmunya, mudah2an bermanfaat :h;

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan





BANNER [300x250]
© 2013 - BLOGBEGO CREATION | Powered by Blogger
Design Template by : Blogger Edan