Cara Membuat Menu Horizontal Bercabang

Template default bawaan blogger, biasanya minim sekali dengan widget-widget termasuk Menu Navigasi. Menu Navigasi berfungsi untuk meningkatkan kunjungan pada blog kita, walaupun masih ada cara lain seperti Menambahkan Label, Recent Post, Related Post ataupun popular post Menu Navigasi terdiri dari dua macam yaitu Vertical dan Horizontal. Membuat menu navigasi bisa dilakukan dengan berbagai cara, bisa dengan memasukkan kode css kedalam template, bisa juga dengan menambahkan widget.

Pada artikel ini, saya akan mencoba membahas Cara Membuat Menu Secara Horizontal dan tentunya ada cabangnya...... (he...he...kaya perusahaan aja....ada cabangnya) dengan cara yang sangat mudah dan letaknya ada dibawah header. Oke, tanpa menunggu massa berdatangan lebih banyak lagi (ntar bisa babak belur), sobat ikuti saya untuk menyimak langkah-langkahnya :

1. Login ke Blogger

2. Pilih Tata Letak

3. Kemudian Tambahkan Gadget ( gadget yang ada di bawah header)

4. Lalu pilih HTML/JavaScript

5. Masukkan kode berikut dalam kolom HTML/JavaScript

    <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='http://hideungmaniz.blogspot.com/'>Home</a>
                </li>
                <li>
                  <a href='http://hideungmaniz.blogspot.com/'>Tentang Saya</a>
                </li>
                <li>
                  <a href='http://hideungmaniz.blogspot.com/'>Contact</a>
                     <ul>
                        <li><a href=’https://www.facebook.com/hideungmaniz’>Facebook</a></li>
                        <li><a href='#'>Twitter</a></li>
                     </ul>
                </li>
                <li>
                  <a href= ‘http://hideungmaniz.blogspot.com/'>Daftar Isi ▼</a>                 <ul>
                    <li><a href='Url'>Sub Menu 1</a></li>
                    <li><a href='Url'>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 

# Silahkan ganti warna background menu, ditandai dengan tanda #2E9AFE

# Untuk membuang cabang yang tidak dibutuhkan hapus script yang 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>                

atau, bisa juga sobat masukkan script tadi kedalam menu lainnya sesuai kebutuhan

# Masukkan URL sobat pada kode '#' yang berwarna merah

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

Demikian artikel saya tentang Cara Membuat Menu Horizontal Bercabang, semoga bisa membantu dan bermanfaat. Terimakasih atas kunjungannya.