Cara Membuat Beautiful Slide Out Navigation diblog

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>

    /*----------------     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/AVvXsEgn7eJDm5hCkjXue01ZzTidQiywqWiA0cEwyw197SGL3Mii7imBQYBlr5Ef0yugCFVOp4EyADQbXWt4MTn1NtxAcaJc8Ya6yh7Jzv3-uXW32PgrADlw5REUNDx0xoTbeuryNEzdAK-pfgM/s1600/home.png);     }     ul#navixed .about a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilXj0lNUb56CEm4aEzN49atn4alk43HBbucYu-ZF1PkPxgleDg5e3MgyMvYXGP0KiQSpQ0ShFrX_KZgmPthq8wSyhaWk1fQlzHkqwjeDJEBgdC1I-168_jq9qRLoLbO8T5PAJRoHkB2No/s1600/id_card.png);     }     ul#navixed .search a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigK6-C2YgRgSqB3b0Zx4gPndvMcMWMLwqz8oTOWwkELivpBXKKMnxwfCObEd6nGoWhLcfXVon6JK7RDGLiJ4xYhPT_dlm-RJH_pLPUSRMcPsDeP8IhR7wv2WHMCb39Zk4pvPIOQVZV6xk/s1600/search.png);     }     ul#navixed .podcasts a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyZx1OpkYePjo40vuyocmD3wTULvG3ulB5GjBMtavKpsRtcrGqF9FMFtKQNK4hke8ZoOaLO1vPP7zQxg4Dznfpm33B94GCsLs2I9rFmc9Bj0AbTPMEq8YDRYjffuM6OJeInZGdFTstUJM/s1600/ipod.png);     }     ul#navixed .rssfeed a   {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYke1ge9aUdF501HvPbcvRNt7GenjV0McSyKz0iq29QPKVarDumnhDdvoypiIwaCvElAqppTrnyWFKKVrotokQIB1znMX-S9shz7vhsYFDIXBrpPsz7TPf1_2qtYCHtQkL843t44P7UBM/s1600/rss.png);     }     ul#navixed .photos a     {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv1QKbRkfFIOaXdc92OXNiAs-OV72wgUqmU1AMd-0fgKI041vhPn4Ivy2XrsZroLTOHg14eyIyE4o_1J-PQRgB2skLD-A81Y8jfij4VECKcIvBsMe6z87x4SoiFPf9OiokrlpHLvEckhA/s1600/camera.png);     }     ul#navixed .contact a    {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfccroca74PkegcFDGqD69gElOWJ7cd_gKxIVLCPFFnV5PIKUH9Gm7VPSQFvdt2udoSqUirGXLhbrPtpo5puraQ_LZIWsZAsysgT-3EzVJOj8NYmbzwDj3Db9bzIF4zLZpAqsoz9tu49A/s1600/mail.png); 

5. lalu cari kode </head>
6. taruh kode dibawah ini diatas kode </head>

    <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>

7. cari lagi kode yang seperti ini <body>
8. lalu taruh kode dibawah ini tepat diatas 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>

9. simpan

NB :
ganti # dengan link yang sobat inginkan