1 Cara Membuat Beautiful Slide Out Navigation di Blog

ok langsung aja ya ...
Cara Membuat Beautiful Slide Out Navigation di Blog

1. Login ke akun Blogger
2. Rancangan > edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode dibawah ini dan paste 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/AVvXsEiXyXIaTDj0kBqtwfQdkO2lRjjOrlaB871ISR16NwMOwekpZZVg2K5ngX12sZmqZLFukaAkyaLHtsxDcWBjARuJrs_-AKiiQICmbMhYsJZS1JpwebMdfpTbbgdvmiIvKZ8HzUdJ_AIGDS8/s1600/home.png);     }     ul#navixed .about a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsdu_2YKHyIGIVOur9JZ3frBeCgb6yeDucSGhZxyvpZ2r34rfgSAdcRchA72w3GyUKOD1yZcAVfuLH-NDMokXd1P0Ue5f_Bw706HuTdKg5DfjhvOtrF9dCW6p9hEGfDd36G30Xxfa0Eb4/s1600/id_card.png);     }     ul#navixed .search a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZva89HRu5qjniRO2zF0GBizQ7oEnagKffpmyUv5vmeIdsv7HSrWrSknEMwxdh2myLksfxFewmk1q6f6FMw7AlL7L68N4G0-KVYlUTEgN020va9wpOFuSciwBgWJ6c7OsZaHGinfVuYX0/s1600/search.png);     }     ul#navixed .podcasts a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxTjW9iZPc57z8zC2wOWay0CfoPr9eX33fPyMnnOOVr-ri7EJyM6rOr0RRD1fFSwDn-xJ4f4n0dk27gpeaehgNm2kHXqn9pnRgWbhLyrx1DHy628DYlgAV7UYLk6JxqrV7mXrMmNtJBxw/s1600/ipod.png);     }     ul#navixed .rssfeed a   {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_W_-2MfMu0kstzxB092jyLtw64GVRDNnnG69nKWQlWBjfmYh4yn31zfJvWwBQf-PFxP6fkwoyLRbVS-qmwGfakqNhgSByxoxfssODe5IzeMwnGuRx7wTpR65szCpxymTul5xgZ8Ib420/s1600/rss.png);     }     ul#navixed .photos a     {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh11OjN6bKJFLdz5PhqLKNBa5W0xfOcEstxZYy8xbXFkHnlDHLJYAuN5sah37-rZ20N6P1BGwpPdIraEAoBFZxvEPM4OQA93WgKUwK-UQEyO83jghmQ9Re4wPlfbmCJXbV1afGFM5x5Y-E/s1600/camera.png);     }     ul#navixed .contact a    {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitPYabWKqvrE36NrflKIb2BlUldNFopmsSWPzah71LDSEYJ3BcOoi4JV7eRud8dHfAdRt00zPQ88-1KsoSt0qjP29ackgpEPwcCvGfcP2JegRi_8LwV6q9ITUjYvWvNP73YA1pqnNG0E0/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

Keterangan :
ganti # dengan link yang sobat inginkan

"Selamat Mencoba"