Apr 22, 2014

Cara Membuat Menu Navigasi Horisontal Bercabang / Drop Down Menu

Template default bawaan blogger biasanya minim sekali dengan widget-widget termasuk menu navigasi. Terkecuali jika kita mendownload sendiri template dari blog lain. Menu navigasi penting artinya untuk meningkatkan kunjungan ke blog kita, walaupun masih ada cara lain seperti menambahkan label, recent posts, related posts ataupun popular posts di blog kita. Menu navigasi biasanya terdiri dua macam; vertikal dan horisontal. Menu navigasi Vertikal atau menu navigasi lurus ke atas biasanya diletakkan di sidebar, sedangkan menu navigasi horisontal kita letakkan di atas judul posting atau di bawah header/judul blog.

memasang menu navigasi horizontal
menu navigasi horizontal bercabang

Membuat menu navigasi bisa dilakukan dengan berbagai cara, bisa memasukkan kode css ke dalam template, ini permanen tentunya, dan cara yang kedua cukup menambahkan widget dengan memasukkan kode tertentu ke dalam widget/gadget tersebut. Pada tutorial ini saya akan membuat menu navigasi horizontal dengan cara yang cukup mudah yang letaknya di bawah header.

Oke langsung saja bagaimana cara membuat menu navigasi horisontal bercabang,
Masuk ke akun blogger> Dasbor > tata letak > Tambahkan gadget > pilih HTML/Javascript, kemudian masukkan kode berikut ini. (Jangan lupa saat menambahkan gadget, pilih gadget yang di bawah header.)

cara menambahkan menu navigasi drop down bercabang
add menu navigasi



    <style>
    #menunavigasihorisontal {
        background: #848484;
        width: 100%;
   
        color: #FFF;
            margin: 10px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px; }

    #bb2nav {
        margin: 0;
        padding: 0;}
    #bb2nav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2navli {
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
        color: #FFF;
        display: block;
       font:bold 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
        background: #2E9AFE;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 12px;}

    #bb2nav li {
        float: left;
        padding: 0;}
    #bb2nav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;}
    #bb2nav li ul a {
        width: 140px;}
    #bb2nav li ul ul {
        margin: -25px 0 0 161px;}

    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
        left: -999em;}
    #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

li li li.sfhover ul {
        left: auto;}
    #bb2nav li:hover, #bb2nav li.sfhover {
        position: static;}
    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #bb2nav li li a:hover, #bb2nav li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0  -14px;}
    #bb2nav li li li a:hover, #bb2nav li li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}

    </style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
                <li>
                  <a href='#'>Home</a>
                </li>
                <li>
                  <a href='#'>Tentang Saya</a>
                </li>
                <li>
                  <a href='#'>Contact</a>
                     <ul>
                        <li><a href='#'>Sub Halaman 1</a></li>
                        <li><a href='#'>Sub Halaman 2</a></li>
                        <li><a href='#'>Sub Halaman 3</a></li>
                      </ul>
                </li>
                <li>
                  <a href='#'>Daftar Isi ▼</a>                 <ul>
                    <li><a href='URL'>
Sub Menu 1</a></li>
                    <li><a href='Ur
l'>Sub Menu 2</a></li>
                    <li><a href='
Url'>Sub Menu 3</a>
               
   <ul>
                    <li><a href='#'>Sub
Sub Menu 1</a></li>
                    <li><a href='#'>Sub
Sub Menu 2</a></li>
                    <li><a href='#'>Sub
Sub Menu 3</a></li>
                  </ul>

                  </li>
                  </ul>             </li>
          </ul>
        </div>



Pengaturan dan modifikasi;

1. Silahkan ubah warna background menu sesuai selera ditandai dengan kode seperti #2E9AFE

2. Untuk membuang cabang yang tidak dibutuhkan (mungkin terlalu banyak lihat kode berwarna biru 
                  <ul>
                    <li><a href='#'>Sub Sub Menu 1</a></li>
                    <li><a href='#'>Sub
Sub Menu 2</a></li>
                    <li><a href='#'>Sub
Sub Menu 3</a></li>
                  </ul>
bisa juga sobat tambahkan di item menu lainnya jika ingin.

3.  Masukkan alamat halaman atau postingan blog yang dikehendaki pada kode # .

4.  Perhatikan kode-kode yang sudah diberi warna saat menambah atau membuang item menu tertentu agar tidak error.


Oke saya kira sudah cukup jelas dan mudah, untuk live  demo silahkan buka di sini

Selamat mencoba.  

Update:

Buat sobat yang bermasalah saat memasang di elemen header cari kode berikut ini (warna merah):
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Sample Blog (Header)' type='Header'>
<b:includable id='main'>
ganti 1 menjadi 3 no menjadi yes sehingga menjadi seperti ini. 
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
Setelah itu pindahkan kode HTML/javascriptnya diatas atau di bawah elemen header.


Buka juga CSS 3 drop down menu navigasi yang saya pakai ini

22 comments:

  1. Segera dicoba.
    Thanks gan n sukses selalu!

    ReplyDelete
  2. Makasih bro...
    Udah kelayapan kesana-kemari, ke blog ini - blog itu nyari cara bikin menu horizontal drop down, ngotak-ngatik, gonta-ganti kode html & css seharian tapi gagal maning gagal maning. Akhirnya pencarian gw bermuara disini. Caranya simpel, aman dan mudah, ga perlu ngotak-ngatik html di template, cukup di gadget aja... dan BERHASIL...!!! Kapan-kapan izin ambil link-nya yah bwat di-share ke newbie kayak gw... Bermanfaat.
    Thanks, SUKSES SELALU...!!!

    ReplyDelete
  3. tampilannya ketutup yang lain, gmana supaya submenu (dropdown) bisa posisinya diatas??

    ReplyDelete
    Replies
    1. cari kode html, header1 max widget angka 1 diganti 3, show addlement no di ganti yes

      Delete
    2. @ idul, silakan sdh saya update artikelnya

      Delete
  4. Bagaimana kalau mahu menukar tulisan putih menjadi warna lain?

    ReplyDelete
    Replies
    1. lihat kode color: #FFF; itu adalah kode warna putih, kalau mau ganti merah, color: red; hijau color: green; atau kunjungi
      http://blogbelajar2.blogspot.com/p/kode-warna.html untuk mengetahui kode warna yg lain

      Delete
  5. Gan,terlalu panjang dikit di blog ku, cara mendekinnya gamna??

    ReplyDelete
    Replies
    1. itu otomatis, tggl ubah lebar elemen gadget di template blog kamu.

      Delete
  6. Makasi gan.. Langsung dipraktekan. Mudah2an sukses...

    ReplyDelete
  7. terimakasih banyak gan, artikel ini sangat membantu saya, maklum saya blogger pemula

    ReplyDelete
  8. Baru nemu ni yg pas yg gw cari,, simple tapi benar2 bisa digunakan..,,
    thank u admin

    ReplyDelete
  9. untuk warna latarbelakangnya kok ga bisa berubah ya..?? padahal udah aq ubah kode warnanya...

    ReplyDelete
  10. Info Yang menarik nih Sobb

    Udh di follow sobb

    Di tunggu nie Folow Backnya

    By : http://fahrinuralim.blogspot.com/

    ReplyDelete
  11. luar biasa bos...info yang langusng saya dapatkan..kebetulan lagi browsing..

    ReplyDelete
  12. mantap bro makasih infonya.
    kapan ijin copas ya :D

    ReplyDelete
  13. Mantap Gan, ini yang ane cari-cari... maklmum masih newbie soalnya hehehe Gbu sob

    ReplyDelete
  14. a. Lihat kode warna Ungu itu untuk SUb Menu

    b. Kode warna BIRU itu SUB SUB MENU (alias cabangnya)

    ReplyDelete
  15. gan disamping menu2nya ada lingkaran kecil2 tp ga pas sama menunya.gimana caranya supaya pas?

    ReplyDelete
  16. waahh Nice info... :)
    Makasih ya informasi'y

    jangan lupa mampir kesini ya..
    http://quantamultimedia.com/


    terimakasih ^_^

    ReplyDelete

Anda harus menjadi follower blog ini jika ingin memberikan komentar. Terima Kasih