Home » , » Cara Membuat Navbar Menu Bertingkat

Cara Membuat Navbar Menu Bertingkat

Ditulis oleh :
Unknown
- Hari: Rabu, 25 Juli 2012 - Jam 17.00
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8y_a1AYJ5pJkBvm_B1uBnhh3jZlZFZvBYbDeBYOIcdhErv0sYOFa_m7x48ZSpNunXsrCYuSh1bc8PmAbUy5KgZojlWac_SsfvmZKb_GMDLAAYUmzF-e2Hq31yyhSdQ8XPgIekCFNal7Y/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ6N95NPOfVTZJ2RL0Qn_Avtc7kr866DSC37QhM1-dQbIrhFxSBChO6R3nrurS88ICXIL9LeEkvsGp_l2RYRSDNil61bonRGq7_kmSQ-nzobdW8oe3C2W56Q3cmbHeeN3c6LTWK5KYYHE/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;


    Reviewer: Unknown - Itemreviewed: Cara Membuat Navbar Menu Bertingkat

    Kalau ada yang kurang jelas pada Artikel
    Description Cara Membuat Navbar Menu Bertingkat » Rating: 4.5
    atau seandainya ada Link yang rusak bisa disampaikan lewat Komentar
    mudah-mudahan saya bisa segera memperbaiki

    5 Pendapat pada : “Cara Membuat Navbar Menu Bertingkat”

    BERIKAN KOMENTAR SESUAI TOPIK DAN SOPAN
    » BUKAN SPAM, MENGHINA, MENGHUJAT
    » JANGAN BERBAU PORNOGRAFI
    » TIDAK MENYINGGUNG SARA / ETNIS


     
    BLOGBEGO - © Copyright 2012
    All rights reserved - Powered by Blogger
    ARSIP BLOGBEGO CREATION :