Cara Mudah Membuat Menu Navigasi Pada Blog

Cara Mudah Membuat Menu Navigasi Pada Blog seperti punya saya terdapat menu navigasi horizontal,fungsi dari menu navigasi pada blog yaitu memudahkan kita atau pengunjung untuk mencari artikel dalam satu kelompok.

Nah saya akan bahas bagaimanakah Cara Mudah Membuat Menu Navigasi Pada Blog akan saya bahas disini tutorialnya dengan tambahan menu navigasi horizontal.
Mari kita simak bersam-sama.

1.Login blog anda
2.Kemudian klik Tataletak
3.Lalu anda klik Tambah Gedget
4.Anda pilih Html/Java scrip
5.Masikan kode Html yang ada di bawah 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='#'>Home</a>
                </li>
                <li>
                  <a href='#'>Komputer</a>
                </li>
<li>
                  <a href='#'>Sistem Operasi ▼</a>
                     <ul>
                        <li><a href='#'>Appel</a></li>
                        <li><a href='#'>Android</a></li>
                        <li><a href='#'>Blckberry</a></li>
                         <li><a href='#'>Symbian</a></li>
                        <li><a href='#'>Windows</a></li>
                        <li><a href='#'>Linux</a>
</li>
                      </ul>
                </li>
      <li>
                  <a href='#'>Kurt Cobain ▼</a>
                     <ul>
                        <li><a href='#'>Biografi</a></li>

                        <li><a href='#'>Video</a></li>
                        <li><a href='#'>Musik</a></li>
                      </ul>
                </li>
  
                <li>
                  <a href='#'>Materi ▼</a>
                     <ul>
                    <li><a href='#'>Pendidikan SD,SMP,SMA</a></li>
                        <li><a href='#'>Pemograman Visual</a></li>
                        <li><a href='#'>PBD</a></li>
                        <li><a href='#'>Etika Profesi</a></li>
                      </ul>
                </li>
                
         
<li>
                  <a href='#'>Tips Dan Trik ▼</a>                 
                    <ul> 
                    <li><a href='#'>Blog</a></li> 
                    <li><a href='#'>Perawatan</a></li>
                    <li><a href='#'>Kesehatan</a></li>  
                    

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






7.Terus anda ganti kode yang # berwarna merah dengan URL blog anda
8.Lalu anda klik simpan/save

Mudahkan dan anda langsung liat hasilnya 
SELAMAT MENCOBA