Home » , » Cara Membuat Beautiful Slide Out Navigation di Blog

Cara Membuat Beautiful Slide Out Navigation di Blog

Tuesday, May 8, 2012 | 0 comments

Cara Membuat Beautiful Slide Out Navigation di Blog. Setelah sebelumnya dulu saya share mengenai Cara Membuat Navigasi Efek Slide Out dengan jQuery

2 cara diatas sebenernya tidak punya banyak perbedaan, karena cara diatas sama-sama menggunakan efek slide JQuery. Tapi yang saya share sekarang ini slidenya tempatnya bagian atas, lain halnya dengan yang sebelumnya yang letaknya disamping kiri.

ok langsung aja ya ...
Cara Membuat Beautiful Slide Out Navigation di Blog
  1. login blog
  2. rancangan -> edit HTML
  3. cari kode ]]></b:skin>
  4. taruh kode dibawah ini diatas kode ]]></b:skin>
  5.     /*----------------     Beautiful Slide Out 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Dc5hKHWdnqvIV06SnUf1GfSptkZcIIq6JfUWJuIOLy5PTdfN5aBtxGf7hUZ7ECBy9YSI2iGXGr9oDYJjCyJvzNCNXaf7eUu7CkEWZ765fNgxPJeKMqsZAEvDubED4cOcjMkUHMjnQb0/s1600/home.png);     }     ul#navixed .about a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgymR-dL-4k1ish1ax7lFHlL7ZoQg0bCS9WONZGXeA03OSMoqsvf0ih4m0GWoXYqkIHmhGY18-C-u4_58QSJR3KpW9hqL-bQl5KvoDxLZblxgp218O5ySrIA0uF4UMtRO0uFQccg-P6_Qo/s1600/id_card.png);     }     ul#navixed .search a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje2DyXME5Wdwu6vdUcjw0fZ5rBwmP3-bo68mz7kpShZ-NZSOVYn1u9NKh5xe7NJFVRIe_n7T77a6-WSFMB5AMbRZYbL21BdDTJoLIC5djmh2wzYbKiCjVnrq98cLKsKL-xfcHQAUZJJP4/s1600/search.png);     }     ul#navixed .podcasts a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU-VvnuF88kZW6Lk3fbkNFoK6PDnOABsyswLMeEbsYqGGKH72MZjJtJIL9JUIesj2gvOTdktsPr1BLrLJ8AbkJLjzkkSJ4WD_ZETJLBjQ-BfD0FOtiwcxwXg8tbs04lmv7WPMNbjffBc4/s1600/ipod.png);     }     ul#navixed .rssfeed a   {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpcmCtkqcgJB1ZmbMtTJLt97WLJo3oInGziBfHvGFxEkfSzCesZqZWd8BIn-7pggeySBUzRf4doKyq4BMbWfd9RaFSTNxuyek3Pw4hyS-H8RG9z-fwvpYbs0XFHg30f6SCGG-sb4dXZgg/s1600/rss.png);     }     ul#navixed .photos a     {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB6qD1e28hGfyT0IALKOlFwqhvWDa0OJAUVQK3a_c6Gb_3KPUnSpJaatal9KP5FZLydP_ez7vCoQBvfoDc7Qs2ncJHi9VEJFzzt2gDipKhxOjgjjLfusbejXpkhkayr9GyC-lbjHXZpAM/s1600/camera.png);     }     ul#navixed .contact a    {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0H1PpaYo4KYCLhomKH6OxjDilx-cyEiB6tb6xjaS1pNR3t53PMr77tKG1EqiHTYFEguwnPzo95ptuKs0Rw3CzW98iBr6y288UtQlTlvaUU2yvhWkikMAuA6q2XYawGA1JuIogKH43YfI/s1600/mail.png); 
  6. lalu cari kode </head>
  7. taruh kode dibawah ini diatas kode </head>
  8.     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>         <script src='http://kangdadang.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>
  9. cari lagi kode yang seperti ini <body>
  10. lalu taruh kode dibawah ini tepat diatas kode <body>
  11. <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>
  12. simpan

NB :
ganti # dengan link yang sobat inginkan

Good Luck ^_^

Related Post:

Share This Article :

0 comments:

Post a Comment

Saya tidak online 24 Jam dan hanya sendiri mengurus blog ini, mohon maaf bila komentar anda tidak di balas.
Mohon gunakan kata-kata yang sopan dalam memberikan komentar.
Komentar SPAM, SARA, dan sejenisnya tidak akan di tampilkan.

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. SURYA COMMUNITY SEVEN - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger