Cara Membuat Navigasi menu Dengan Warna

2:46:00 PM | Label: Blogger

Menu navigasi atau menu tab adalah jantung dari setiap halaman web atau blog. Ini menyediakan cara jalan untuk semua halaman penting dari situs web. jadi bisa juga untuk memudahkan pengunjung untuk mencari kategori-kategori yang mereka cari .

Untuk menambahkan menu navigasi yang dipilih ke template blogger Anda ikuti langkah berikut:

1. Masuk Blogger> Tata Letak

2. Klik Tambah Gadget atau Tambah elemen Halaman

3. Pilih HTML / JavaScript widget

4. kemudian Paste Menu Navigation Kode dalam HTML / JavaScript widget

n Simpan

5. Tarik HTML / JavaScript widget dan letakan hanya di bawah header Blog Anda.

Untuk mengubah link, Edit ini bagian dari HTML di seluruh kode di bawah ini,

Berikut adalah kode-kode navigasi menu dengan contoh demo gambar nya.

Code : 1

Code : 2

Code : 3

Code : 4

Code : 5

Code : 6

Code : 7

Code : 8

Code : 9

Jika kode diatas tidak bekerja dengan semestinya silahkan copy dan masukan kode dibawah ini tepat diatas
]]></b:skin>
melalui edit template / edit HTML
khusus untuk membuat menu navigasi dropdown menu . cara membuat nya bisa dilihat

Code : 10

/*----- MBT Drop Down Menu ----*/

#mbtnavbar { 
    background: #060505; 
    width: 960px; 
    color: #FFF; 
        margin: 0px; 
        padding: 0; 
        position: relative; 
        border-top:0px solid #960100; 
        height:35px;
}

#mbtnav { 
    margin: 0; 
    padding: 0; 
} 
#mbtnav ul { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#mbtnav li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
        border-left:1px solid #333; 
        border-right:1px solid #333; 
        height:35px; 
} 
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { 
    color: #FFF; 
    display: block; 
   font:normal 12px Helvetica, sans-serif;    margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
        
} 
#mbtnav li a:hover, #mbtnav li a:active { 
    background: #BF0100; 
    color: #FFF; 
    display: block; 
    text-decoration: none; 
        margin: 0; 
    padding: 9px 12px 10px 12px; 
        
    
        
}
#mbtnav li { 
    float: left; 
    padding: 0; 
} 
#mbtnav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 160px; 
    margin: 0; 
    padding: 0; 
} 
#mbtnav li ul a { 
    width: 140px; 
} 
#mbtnav li ul ul { 
    margin: -25px 0 0 161px; 
} 
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { 
    left: -999em; 
} 
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { 
    left: auto; 
} 
#mbtnav li:hover, #mbtnav li.sfhover { 
    position: static; 
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { 
    background: #BF0100; 
    width: 120px; 
    color: #FFF; 
    display: block; 
    font:normal 12px Helvetica, sans-serif; 
    margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
z-index:9999; 
border-bottom:1px dotted #333;
    
} 
#mbtnav li li a:hover, #mbtnavli li a:active { 
    background: #060505; 
    color: #FFF; 
    display: block;     margin: 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
}

Ganti # dengan Link halaman Anda dan teks tebal dengan nama halaman yang relevan. Kode disorot kuning bertanggung jawab untuk menu drop down. Anda dapat menyalin dan tempel di bawah setiap tab yang Anda inginkan sebelum </ li>
Untuk menambahkan tab lain hanya menyisipkan kode ini di atas </ ul>

Jika ingin menggunakan menu dropdown yang dilengkapi dengan kotak pencarian silahkan lihat Di Sini

Download kode jika tidak bisa copy code dibawah ini

Atau bisa copy Disini

Judul: Cara Membuat Navigasi menu Dengan Warna
Rating: 100% based on 10 ratings. 5 user reviews.
Ditulis Oleh Unknown

Terimakasih atas kunjungan Sobat beserta kesediaan Anda membaca artikel ini. Kritik dan Saran sobat dapat sampaikan melalui Kotak komentar dibawah ini.

Anda sedang membaca tentang Cara Membuat Navigasi menu Dengan Warna dan bila berkenan Anda bisa share artikel Cara Membuat Navigasi menu Dengan Warna ini dengan tombol share di atas. Bila Anda bermaksud COPAS artikel Cara Membuat Navigasi menu Dengan Warna untuk dipublish di blog Anda, mohon sertakan link Cara Membuat Navigasi menu Dengan Warna sebagai Sumbernya dengan mengcopy kode di bawah ini.

Get this widget

Di ULas OLeh Unknown

2 komentar:

Uem Cuters said...: Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.; Monday, October 15, 2012
anget said...: trimakasih sangat membantu; Friday, November 23, 2012

Popular Posts

Blog Archive

Labels

StatisTik

LINK SAHABAT

Your Polling Here

Cara Membuat Navigasi menu Dengan Warna

Related Posts

2 komentar: