Menu menurun

Inggin menghias blogger adalah yang di inginkan semua blogger, ketertarikan di pandang sehingga pengunjung tidak bosan ada di tempatnya. bagaimana caranya agar blog tampilan menu bisa menurun.

berikut ini adalah cara membuat menu menurun atau horizontal.

1. masuk ke blogger anda

2. klik di dasbor

3. Tata letak

4. tambahkan gadget di bawah header 

5. Cari HTML / Java script

6. Copykan kode dibawah ini

       <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://nurhajid.blogspot.com/'>Home</a>
                </li>
                <li>
                  <a href='http://nurhajid.blogspot.com/'>Tentang Saya</a>
                </li>
                <li>
                  <a href='http://nurhajid.blogspot.com/'>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='http://nurhajid.blogspot.com/'>Sub Menu 1</a></li>
                    <li><a href='http://nurhajid.blogspot.com/'>Sub Menu 2</a></li>
                    <li><a href='http://nurhajid.blogspot.com/'>Sub Menu 3</a>
                   <ul>
                    <li><a href='http://nurhajid.blogspot.com/'>Sub Sub Menu 1</a></li>
                    <li><a href='http://nurhajid.blogspot.com/'>Sub Sub Menu 2</a></li>
                    <li><a href='http://nurhajid.blogspot.com/'>Sub Sub Menu 3</a></li>
                  </ul>
                  </li>
                  </ul>          
 </li>

untuk color dan alamat URL anda bisa mengantinya dengan keinginan anda, dan silahkan untuk alamat URLnya di ganti dengan alamat anda sendiri, setalah anda save atau di simpan lihat hasilnya.

cara mengenal kodenya jika anda mengikuti cara membuat template pasti akan mengetahuinya.

Semoga bermanfaat :D