Cara Membuat Navbar Menu Bertingkat ke2

Kastaone - 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(http://1.bp.blogspot.com/-wp0DzI7xqh8/UEyNjZbDuDI/AAAAAAAAEtU/Hb_dpxxx9oI/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(http://3.bp.blogspot.com/-70-CZNgfB_I/UE23lDwWTbI/AAAAAAAAExo/U1EisTMCNPQ/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(http://3.bp.blogspot.com/-J31b0oQWCd0/UEywAnDZ0cI/AAAAAAAAEwU/Jl4gHLDDUOw/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(http://1.bp.blogspot.com/--I7I2qB7dSw/UEy3AlXW7uI/AAAAAAAAEw8/T9-CXeKvGIk/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....

19 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
    7. saya ingin berbagi cerita kepada semua teman-teman bahwa saya yg dulunya orang yg paling tersusah,walaupun mau makan itu pun harus hutang dulu sama tetangga dan syukur kalau ada yg mau kasi,semakin aku berusaha semakin jauh juga pekerjaan dan selama aku ingin berbuat baik kepada orang lain semakin banyak pula yg membenci saya karna saya cuma dianggap rendah sama orang lain karna saya tidak punya apa-apa,dan akhirnya saya berencana untuk pergi mencari dukun yg bisa menembus nomor dan disuatu hari saya bertemu sama orang yg pernah dibantu sama MBAH KABOIRENG dan dia memberikan nomor MBAH KABOIRENG,dia bilan kepada saya kalau MBAH KABOIRENG bisa membantu orang yg lagi kesusahan dan tidak berpikir panjang lebar lagi saya langsun menghubungi MBAH KABOIRENG dan dengan senan hati MBAH KABOIRENG ingin membantu saya,,alhamdulillah saya sudah menang togel yg ke5 kalinya dan rencana saya bersama keluarga ingin membuka usaha dan para teman-teman diluar sana yg ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085=260=482=111 saya sangat bersyukur kepada allah karna melalui bantuan MBAH KABOIRENG dan kini kehidupan saya sudah jauh lebih baik dari sebelumnya,ingat kesempatan tdk akan datan untuk yg kedua kalinya.. KLIK TOGEL 2D 3D 4D 6D DISINI













      saya ingin berbagi cerita kepada semua teman-teman bahwa saya yg dulunya orang yg paling tersusah,walaupun mau makan itu pun harus hutang dulu sama tetangga dan syukur kalau ada yg mau kasi,semakin aku berusaha semakin jauh juga pekerjaan dan selama aku ingin berbuat baik kepada orang lain semakin banyak pula yg membenci saya karna saya cuma dianggap rendah sama orang lain karna saya tidak punya apa-apa,dan akhirnya saya berencana untuk pergi mencari dukun yg bisa menembus nomor dan disuatu hari saya bertemu sama orang yg pernah dibantu sama MBAH KABOIRENG dan dia memberikan nomor MBAH KABOIRENG,dia bilan kepada saya kalau MBAH KABOIRENG bisa membantu orang yg lagi kesusahan dan tidak berpikir panjang lebar lagi saya langsun menghubungi MBAH KABOIRENG dan dengan senan hati MBAH KABOIRENG ingin membantu saya,,alhamdulillah saya sudah menang togel yg ke5 kalinya dan rencana saya bersama keluarga ingin membuka usaha dan para teman-teman diluar sana yg ingin seperti saya silahkan hubungi MBAH KABOIRENG di 085=260=482=111 saya sangat bersyukur kepada allah karna melalui bantuan MBAH KABOIRENG dan kini kehidupan saya sudah jauh lebih baik dari sebelumnya,ingat kesempatan tdk akan datan untuk yg kedua kalinya.. KLIK TOGEL 2D 3D 4D 6D DISINI

      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. Wah mantep banget gan..
    Info nya sangat bermanfaat.. saya coba dulu yah..
    sobat traveller yg butuh info travelling modal minim / backpacker / petualang mampir ke blog ane yah..
    http://visitindo.blogspot.com

    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