Cara Membuat Beautiful Slide Out Navigation di Blog

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/AVvXsEiJVgaWqyI-cs5mui_sJ2HqTmiSioXLWjFahZrEHj5-U99nQTJ8PW5gbTj-6sUxV5TOesfcNoVhN3vv17OzYN-NkJ415Abuwc84c3ODpNlObnOec7SALvDn5OGRNvppnJ-cRBcwhUaZQZQ/s1600/home.png);     }     ul#navixed .about a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUddyijRW8rsxCox2zWal5c1OfTCqV7I03kjMwqAEbX28zechAGDCXoPNZd4A9XfnexRpaTqCWuFWS82m0gPHLQNuTqNFhwVrGDrv00IwhbWXmh8DiD35K3gXMdvv3a0jRd1So3Gdy5Y/s1600/id_card.png);     }     ul#navixed .search a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8QJD6OLizkGLmvaeqbxQpElyI3T6TZxkKvCkVYwcxnbhJgWfoMsrqxOl0eEA0p2YLTHmzB-fmHmP67jdNCsUEeVvALpJbUMgimMQOlIW1-KNIomm4xW_sJUYL_9JET-N5Oxorg6-8mt8/s1600/search.png);     }     ul#navixed .podcasts a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwWbESxRbiCvG_Ida4ZKVEqtNTB9eD3H0n0wLI0wMHBB9bXwI8EvkVgPtOBRb3-QACKS0Aa4GWcvG_SthF5usmdH5MAqAIqV4RczGVZPQWNgTHYWFl35Ve67wKX2xVC7KOsYRZvA9GFQw/s1600/ipod.png);     }     ul#navixed .rssfeed a   {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilIp6FgqFdcZhg8q-yJPHIDbaIg_vUlmD74Sz_PFNcsdd2WQXJIYx0ToEC3Fk9t5BEM1jMEEoJSyE0OuVUCVHPKRBzXfpY9y_tMet23k54c695onG51mpLIQiM_JuDuSRvVQPHeeoZ8CU/s1600/rss.png);     }     ul#navixed .photos a     {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWTLh5HyuzI6HpQ3YG_Qo4lmCjZttir9-_97Q5yeMy2108EbNFJRP0J8KLL0eH4m_oOdbI0dtpB9jO4BYYHfPU2oGhwtDf6JSDJF2JjSTMTEV9h4tJlUQdGNmfOPSMPqaRyOJ_5eCZndE/s1600/camera.png);     }     ul#navixed .contact a    {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_PTRFsfBy8KQvkm34-74nhrrxXwKm21VTI2CMf_iShpnoSFGPKU51DBMWosjG_4Rm2b-_TRp9E5EG2RC_FoLL3jHgt_i1Lb4KzGJZzp_VecCNtr-NmL6Crl96nw-6dqgcZX7L3syZLw/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