Membuat Menu Melayang Dengan Efek Fade Out

Malam sobat, ok artikel kali ini berjudul  Membuat Menu Melayang Dengan Efek Fade Out  menu ini mungkin belum banyak di share blog-blog mudah mudahan Cyber-JM yang pertama. Amin hehe menu ini terletak di bagian atas dan tetap. jika di scroll menu ini akan ber efek Fade out ha gimana gimana, mau? oh masih penasaran bentuknya langsung aja lihat demo ya



udah lihat kan ? mau ? oke ke proses langsung

Loggin blogger.com > Rancangan > Edithtml
Cari kode ]]></b:skin> dan pastekan kode berikut diatasnya

/*Nav Cyber-JM Start */
#nav{
    height:35px;
    border-bottom:1px solid #ddd;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background:#fff url() repeat-x center left;
    z-index:999999;
}
#nav ul{
    height:25px;
    list-style:none;
    margin:6px auto 0px auto;
    width:600px;
}
#nav ul li{
    display:inline;
    float:left;
    margin:0px 2px;
}
#nav a{
    font-size:11px;
    font-weight:bold;
    float:left;
    padding: 2px 4px;
    color:#999;
    text-decoration: none;
    border:1px solid #ccc;
    cursor: pointer;
    background:transparent url() repeat-x center left;
    height:16px;
    line-height:16px;
}
#nav a:hover{
    background:#D9D9DA none;
    color: #fff;
}
#nav a.top span, #nav a.bottom span{
    float:left;
    width:16px;
    height:16px;
}
#nav a.top span{
    background:transparent url(http://www.showofthemonth.com/images/top_button.gif) no-repeat center center;
}
#nav a.bottom span{
    background:transparent url(http://cdn1.iconfinder.com/data/icons/bnw/64x64/actions/bottom.png) no-repeat center center;
}
/*Nav Cyber-JM End */ 

Lalu cari kode <body> lalu pastekan kode berikut diatasnya

<div id='nav'>
 <ul>
  <li><a href='http://cyber-jm.blogspot.com/'>Link 1</a></li>
  <li><a href='http://cyber-jm.blogspot.com/'>Link 2 </a></li>
  <li><a href='http://cyber-jm.blogspot.com/'>Link  3</a></li>
  <li><a href='http://cyber-jm.blogspot.com/'>Link  4</a></li>
  <li><a href='http://cyber-jm.blogspot.com/'>Link  5</a></li>
   <li><a class='top' href='#top'><span/></a></li>
  <li><a class='bottom' href='#bottom'><span/></a></li>  
     
 </ul>
</div> 


Kalo sudah lalu  ya

Semoga Bermanfaat



Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Jasriman Sukri, Published at 05.28 and have 13 komentar

13 komentar:

  1. au au au kereeeennnn, coba di blog tester dulu :D \o/

    BalasHapus
  2. Wawww...asyik banget nih sob.. Kalo di pasang di Anak Gila Online pasti tambah keren hehe

    thanks udah share sob.

    BalasHapus
  3. . . bagus. tapi template aq udah ada . .

    BalasHapus
    Balasan
    1. . . emmmmmmmmmmm,, ada yg widget yg laen drpd yg laen gak?!? he..86x . .

      Hapus
    2. waduh nanya nya yg aneh banget

      Hapus
  4. gan pas aku coba itu efek fade out nya gk work gan.. :D gimana donk?? ada ksalahan script apa ya diatas?

    BalasHapus