Slide Menu Navigation Dengan JQuery

Pada kesempatan kali ini saya akan Berbagi Tips And Trik Blogger Yaitu Cara Membuat Slide Menu Navigation Dengan JQuery Dan Sebagai Contoh Saya Tidak Bisa Yang Menjelaskannya Dan Sebagai gantinya Sobat semua bisa melihat gambar Dibawah ini

Mungkin dengan melihat gambar di atas sobat sudah paham apa itu Slide Menu Navigation Dengan JQuery. Nah buat sobat yang berminat memasang di blog nya, sobat bisa ikuti Tutorial dibawah ini.

1. Silahkan Sobat Login Ke Akun Blogger
2. Klik Rancangan kemudian Pilih Edit HTML lalu cari kode ]]></b:skin>
3. Copas script berikut dan letakkan di atas kode ]]></b:skin> tadi.
   
   /*-- Slide Menu Navigation --*/
   .headerfixed
   {
   width:600px;
   height:56px;
   position:absolute;
   top:50%;
   left:10px;
   background:#fff url(title.png) no-repeat top left;
   }
   ul#navixed {
   position: fixed;
   margin: 0px;
   padding: 0px;
   top: 0px;
   right: 10px;
   list-style: none;
   z-index:999999;
   width:721px;
   }
   ul#navixed li {
   width: 103px;
   display:inline;
   float:left;
   }
   ul#navixed li a {
   display: block;
   float:left;
   margin-top: -2px;
   width: 100px;
   height: 25px;
   background-color:#000;
   background-repeat:no-repeat;
   background-position:50% 10px;
   border:1px solid #BDDCEF;
   -moz-border-radius:0px 0px 10px 10px;
   -webkit-border-bottom-right-radius: 10px;
   -webkit-border-bottom-left-radius: 10px;
   -khtml-border-bottom-right-radius: 10px;
   -khtml-border-bottom-left-radius: 10px;
   text-decoration:none;
   text-align:center;
   padding-top:80px;
   opacity: 0.7;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
   }
   ul#navixed li a:hover{
   background-color:#000;
   }
   ul#navixed li a span{
   letter-spacing:2px;
   font-size:11px;
   color:#FFF;
   
   }
   ul#navixed .home a{
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-home.png);
   }
   ul#navixed .about a {
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-card.png);
   }
   ul#navixed .search a {
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-search.png);
   }
   ul#navixed .podcasts a {
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-ipod.png);
   }
   ul#navixed .rssfeed a {
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-rss.png);
   }
   ul#navixed .photos a {
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-camera.png);
   }
   ul#navixed .contact a {
   background-image: url(http://i1090.photobucket.com/albums/i367/bandiets/filiex-mail.png);
   }
   
   4.Selanjutnya Sobat cari kode </head> dan letakkan script berikut ini di atas kode </head> :
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
   <script src='http://filiex.googlecode.com/files/jcolor.js'/>
   <script type='text/javascript'>
   $(function() {
   var d=300;
   $(&#39;#navixed a&#39;).each(function(){
   $(this).stop().animate({
   &#39;marginTop&#39;:&#39;-80px&#39;
   },d+=150);
   });
   
   $(&#39;#navixed &gt; li&#39;).hover(
   function () {
   $(&#39;a&#39;,$(this)).stop().animate({
   &#39;marginTop&#39;:&#39;-2px&#39;
   },200);
   },
   function () {
   $(&#39;a&#39;,$(this)).stop().animate({
   &#39;marginTop&#39;:&#39;-80px&#39;
   },200);
   }
   );
   });
   </script>
   5. sekarang cari kode </body> dan letakkan script berikut ini di atas kode </body>
   <ul id='navixed'>
   <li class='home'><a href='#'><span>Home</span></a></li>
   <li class='about'><a href='#'><span>About</span></a></li>
   <li class='search'><a href='#'><span>Search</span></a></li>
   <li class='photos'><a href='#'><span>Photos</span></a></li>
   <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
   <li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
   <li class='contact'><a href='#'><span>Contact</span></a></li>
   </ul>
   
   RUBAHLAH TANDA # DENGAN URL SOBAT MASING MASING
   
   6. Simpan Template anda .. Dan Liat hasilnya
   
   Semoga BermanfaaT..~~~~~>>>>>