Cara Membuat Navbar Menu Bertingkat ke2

Kawan masih ingat postingan saya sebelumnya "Cara Membuat Navbar Menu Bertingkat" yang merupakan salah satu contoh dasar cara-cara membuat Navbar Menu Blog yang perlu lagi di modifikasi [Kreasi] lagi supaya kelihatan menarik :z; dan enak dipandang [secara pribadi saya tentunya], karena apa yang saya sampaikan itu dengan harapan mengajak kawan-kawan Blogger untuk mencoba ber-Kreasi tentunya [khusus untuk yang masih Pemula dan yang ingin sama-sama belajar] :x;

Cara Membuat Navbar Menu Bertingkat ke-2 ini kawan bisa lihat dan coba pada Blog saya ini :q; 

Oke langsung saja ke Cara Memodifikasi / Membuat Navbar Menu Bertingkat ke-2

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML - Lanjutkan
• Kalau kawan mempergunakan Navbar Menu [atau apalah namanya silahkan di Copas dulu untuk jaga-jaga] atau kalau tidak ada Navbar Menu pada Blog kawan, Copas Kode Css berikut persis diatas  ]]></b:skin> 

#NavbarMenu {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxibYCKko8VX7MxXf0ljCNjvnns_rcOlAidm3hiEVAXeeKPHMggdMRHMp85KM34lr5IpVP_-aUaEaK3ZBua2iAfqW7siUo40Abd8GXLpcX3PN59wODM3vDzozAimZK7bh11-8PMkNYL6pN/s1600/menu_bg.png); no-repeat top center;
width: 100%;
height: 40px;
 color: $navcolor;
 margin: 0 auto 0;
 padding: 5px 30px;
 font: bold 12px Arial, Tahoma, Verdana;
 border: 0px solid #699AB8
 }
#nav {
width: 95%; 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;
height: 20px;
 text-transform: uppercase;
 margin-top: 2px;
 padding: 7px 15px;
 font: bold 13px Tahoma, Georgia, Times New Roman;
 background: transparent;
}
#nav li a:hover, #nav li a:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJ_UJ2ZKtE9ZvVgXftRRX8YP8VBXLLuHGFLwagznHFkp35bJJC0zcCnVFIsjdKzo6hOAB9fG4oL5tCc1PqdZX5G8CYDCD84dQRGOL1xND3x70DHUhHroG2rVdyuTRqjTKyVMdqwMINipw/s1600/selected.png); repeat-x center center;
border: 1px 1px 0 1px;
color: #FFF;
text-shadow: 1px 1px 1px #F00;
text-decoration: none;
margin-top: 2px;
padding: 7px 15px ;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxTTdZXu623iktc_mLJLKVgR4U3Id9IKSdCFEiWX7lKk4ym4Hr6x64i3t8BjzmTKUFIyGIIseymB_n3NX35fJuc9qdkkCf-TtthL2rz8DiRt32nTbcPLdOIfJsSquA-m-7-U6X6ESPneSt/s1600/submenu.png); repeat-y left bottom;
width: 150px;
height: auto;
color: #000;
text-transform: uppercase;
float: none;
margin : 0;
position: relative;
padding: 7px 20px;
font: normal 13px Tahoma, Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPy7VAswpqdpFbxrhwsqDoPdZsZh4Hq8j5739kNFbe9oXpF6K-R0cG0dWzShkD9ttcgD_Z6oIxeXrnefVV8Uextr8PGGgfXlVYNSK-51PIl6SXNrxZ1JO6Cr9lkoNuQd-BhLbK5-erPLUp/s1600/submenuhover.png); no-repeat center top;
border: 0px solid #ccc;
color: #FFF;
text-shadow: 1px 1px 1px #F00;
text-decoration: none;
margin: 0;
padding: 7px 20px;
font-size: 13px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 140px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -30px 0 0 190px;
}
#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;
}

• Simpan Template kawan, 

Catatan khusus : untuk yang memakai Cara Membuat Navbar Menu Bertingkat yang saya posting sebelumnya bisa lihat langsung hasilnya

• Untuk kawan Blogger yang memakai model Navbar Menu lain atau yang pada Blognya belum berisi Navbar Menu silahkan Copas HTML berikut pada tempat yang kawan inginkan 

<div id='NavbarMenu'>
<ul id='nav'>
<li><a href='http://blogbego-creation.blogspot.com' title='Kembali ke Beranda'> Beranda</a></li>
<li><a href='http://blogbego-creation.blogspot.com/2012/01/site-map-blogbego-creation.html'>Daftar Isi</a></li>
<li> <a href='#'>Katagori</a>
<ul>
<li><a href='http://blogbego-creation.blogspot.com/search/label/Kreasi' target='_blank'>Kreasi </a></li>
<li><a href='http://blogbego-creation.blogspot.com/search/label/tips%20trik' target='_blank'>Tips Trik</a></li>
<li><a href='http://blogbego-creation.blogspot.com/search/label/tutorial' target='_blank'>Tutorial </a></li>
<li><a href='http://blogbego-creation.blogspot.com/search/label/animasi' target='_blank'>Animasi </a></li>
<li><a href='http://blogbego-creation.blogspot.com/search/label/widget' target='_blank'>Widget </a></li>
<li><a href='http://blogbego-creation.blogspot.com/search/label/komentar' target='_blank'>Komentar </a></li>
</ul></li>
<li><a href='http://blogbego-creation.blogspot.com/search/label/Template' target='_blank'>Template </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>

Silahkan Ganti URL / Link saya dengan URL / LInk Blog kawan

Selamat Ber-Kreasi :x; 

Berbagi Artikel :

Cara Membuat Navbar Menu Bertingkat ke2

Blog Bego, Kreasi, link, tips trik,

Rate this posting:

{[["☆","★"]]}

Kalau pada Artikel Cara Membuat Navbar Menu Bertingkat ke2
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---