Selasa, 09 Oktober 2012

Membuat Menu Navigasi horisontal dan sub menu nya


Sahabat blogger yg baik,kali ini saya akan mencoba posting tentang tips blogger yang mungkin bisa bermanfa’at buat sahabat semua,walaupun banyak postinga tips & trik di blog-blog atau web tutorial,namun kayaknya yang ngebahas tentang tutorial yang satu ini tidak begitu banyak,ini seperti yang saya alami ,setelah googling ke mana-mana akhirnya saya bisa membuatnya dengan tampilan yang lumayan serta manfaat yang besar,tentunya dengan cara-cara yang simple dan mudah di pahami bagi pemula seperti saya ini,
oke deh langsung saja kali ini tips nya tentang membuat navigasi horisontal dan sub menu nya,seperti yang bisa anda lihat pada blog saya :
di bagian atas,dengan sub menu yang lumayan banyak,tentunya akan mempermudah para blogger untuk memilah kategori postingan dengan label yang berbeda-beda,berikut kita ikuti saja langkahnya :
  1. Masuk pada akun blooger anda dan langsung menuju dasbort
  2. Klik tata letak pada dasbort anda
  3. Di bagian atas/tepatnya di bawah header/deskripsi blog anda klik tambahkan widged
  4. Setelah itu pilih Html/java scrip dan langsung masukkan kode 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='http://lenterasalaf.blogspot.com/'>Home</a>
                </li>
                <li>
                  <a href='http://lenterasalaf.blogspot.com/search/label/Info%20terkini'> Info Terkini </a>
                </li>
<li>
                  <a href='http://lenterasalaf.blogspot.com/search/label/Hasil%20Bahtsul%20Masa%27il'>Hasil Bahtsul Masa'il </a>
                </li>

                <li>
                  <a href='lenterasalaf.blogspot.com'> Kisah Hikmah </a>
                     <ul>
                        <li><a href='http://lenterasalaf.blogspot.com/search/label/Kisah%20Nabi'>Kisah Nabi</a></li>
                        <li><a href='http://lenterasalaf.blogspot.com/search/label/Para%20wali'>Para Wali</a></li>
                        <li><a href='lenterasalaf.blogspot.com'>Umum</a></li>
                      </ul>
                </li>
                <li>
                  <a href='lenterasalaf.blogspot.com'> Trik Tips </a>                
        <ul>
                     <li><a href=lenterasalaf.blogspot.com'>Blogger</a></li>
                     <li><a href='lenterasalaf.blogspot.com'>IT dll</a></li>             
                     <li><a href='lenterasalaf.blogspot.com'>Umum</a> </li>
                   </ul>
    </li>

                <li>
                  <a href='lenterasalaf.blogspot.com'> Download </a>                
        <ul>
                     <li><a href='http://lenterasalaf.blogspot.com/search/label/mp3'>MP3</a></li>
                     <li><a href='lenterasalaf.blogspot.com'>Teks penting</a></li>              
                     <li><a href='lenterasalaf.blogspot.com'>program</a> </li>
                   </ul>
    </li>


                <li>
                  <a href='lenterasalaf.blogspot.com'> Dokumentasi </a>                
        <ul>
                     <li><a href='http://lenterasalaf.blogspot.com/search/label/Islami'>Islami</a></li>                      <li><a href='http://lenterasalaf.blogspot.com/search/label/Makalah'>Makalah,skripsi,ptk</a></li>               
                     <li><a href='lenterasalaf.blogspot.com'>Umum</a> </li>
                   </ul>
    </li>

    <li>

                  <a href='enterasalaf.blogspot.com'> Link Ashab </a>
         <ul>            
                    <li><a href='lenterasalaf.blogspot.com'>Blogger</a></li>
                    <li><a href='lenterasalaf.blogspot.com'>Aswaja puool</a></li>
                    <li><a href='lenterasalaf.blogspot.com'>Umum</a></li>
<li>
                
                <ul>            
                  </ul>
                  </li>
                  </ul>            
          
        </li></ul></div>


  1. Save dan lihat hasilnya.
Selamat mencoba........

NB : warna merah adalah tampilan menu yang tampak
         Warna hijau adalah sub menu nya
         Ganti tulisan warna biru dengan url pada label yang di inginkan

2 komentar:

  1. sama2.....
    emang cara ini rumit dikit,cz setelah ane muter2 lom nemu yg simple n minim resiko...tanks dah mampir....

    BalasHapus

komentar anda atas blog kami sngat berguna buat perbaikan di kemudian hari.
tutur kata yang santun mencerminkan pribadi yg bijak.
terima kasih atas kunjungan dan komentarnya.