Cara Membuat Navbar Menu Bertingkat ke2

Unknown - Rabu, 12 September 2012 - 09:14 wita
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
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---
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....

18 Komentar pada : “Cara Membuat Navbar Menu Bertingkat ke2”

  1. Bang, kalo navbarnya kaya abang gimana..?
    biar ikut ke bawah waktu scroll..
    email ke aku ya bang mmz.mhd@gmail.com

    MAKASIH KALO ABANG MAU JAWAB.. ^^

    BalasHapus
    Balasan
    1. semuanya itu saya tambahin position:fixed; dan seterusnya supaya tak bergerak :z;
      Kalau jawaban lewat email bisa saja, tapi tak berguna karena komentar langsung bisa mengecilkan traffic rank

      Hapus
    2. gan cara bikin site map kyk ente bgmn??

      Hapus
    3. Daftar Isi yang saya pakai silahkan baca, http://blogbego-creation.blogspot.com/2013/02/cara-membuat-daftar-isi-blog
      cuma ditambahin polesan background :q;

      Hapus
    4. kalo buat yg page yg diubah yg mana ajah bang bro?? aduh maap nih byk nanya ane hehe (y)

      Hapus
    5. Kalau kawan mau coba silahkan copas semua, baru di-edit
      contoh <li><a href='#'>Edit Page #E</a></li>
      selanjutnya tanda '#' diganti dengan URL / Link dan
      Edit Page #E diganti dengan Judul URL / Link tadi
      begitu seterusnya sesuai kebutuhan

      Hapus
    6. okeh gan makasih banyak http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif

      Hapus
  2. Makasih kawan bisa berbagi ilmu, tuk saya yang masih minim ilmu dan akan belajar, maklum udah udhur sukar memahami

    BalasHapus
    Balasan
    1. tengok sikik my blog kalo sempet ya
      http://timnasindonesia-mania.blogspot.com/
      makasih

      Hapus
  3. kode ]]> k' punya saya gk ada y? :p;

    BalasHapus
    Balasan
    1. ]]></b:skin> pada Blogger Template pasti ada :q; pakai saja ctrl+F untuk menemukan

      Hapus
  4. Info sangat menarik dan bermanfaat. Thanks so much Friend

    oya tengok juga blog saya ya
    http://timnasindonesia-mania.blogspot.com/

    BalasHapus
  5. Nice post gan,,, sangat bermanfaat terimakasih

    BalasHapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
    Balasan
    1. trims sudah mampir dan jangan lupa mampir lagi :f;

      Hapus
    2. udah di bookmark kok, perlu banyak belajar disini nih buat memperbaiki penampilan blog.. hehehe

      Hapus

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