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/AVvXsEgMY31iZKADSX1nxaap-bTMFQsB5h5zQv8ojam0-NTYZA1jsUosA32pwiirQbZOZUtP_YNzyQ-Fifa5JHJ8UejXXaMNoOVGjIAOM7apucGuwwtHK48Rx7aTmz3PJdVlSwkPdFrPcDChrUg/s1600/home.png);     }     ul#navixed .about a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiuEynaJFFImRA4IsSoXh3YDxzoX_C_9dcKtORPah7HeFK-frYNZLNhxpoGghhEX6vyXguli0gB9PMtsK1mLQfGEc5gS7NLUrjgdl8eJoTcc2RG58rSGrjQvtyiC1pqQMknj0LAbTlPs8/s1600/id_card.png);     }     ul#navixed .search a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoMTXMGakMDa0e0s1VtinIGI-fl3KtM85UbucJjQSFWZZS-bHdoqiuW4l-DiDLjfjZ8HIaBp7FaK1aBzgWcAuAOre7jx-4ToDfdI86zMLLQgC8g-CAcn0xKHv0EFykKYU5KMYUMmddzI4/s1600/search.png);     }     ul#navixed .podcasts a      {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidf-doQjvqaTCfV7bBmqNMtzm2yQz_gQp28d1Bx38sCIFuweO54r2LCku9BtVpcKSymcco-6K5-UvlJ27ZbiKnQ_hi_N1n0mJwG_LqXIzOcPEEJx2hBGoftbNceEDNq4h8EFLHdcrMSYQ/s1600/ipod.png);     }     ul#navixed .rssfeed a   {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcg-rEGytAZYE7uu0P-c7h69bk_pKnEit0Q7SJsGDLq9cn1lek99evhrER-T1WTWzBW-u75qjlWvLG_oNS9cwyw1wYiPFzzNyN-_ziJ4pU-dQZI-BlBzDp4RsVF-nk9OJQHTa9oFAk1cc/s1600/rss.png);     }     ul#navixed .photos a     {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgcGE22nIZ1hNe396qQICE_ujYIxo_yw2o6slXNmEq77GOeEY3fp-Be7CC_wjHrGW6lyJN1GVmuhw12_XyvWxZiG_jAY0kUR6ke0mP6HveCRP_YbKDyzsHihONTdM7ZBTNlbrlnPE7jjc/s1600/camera.png);     }     ul#navixed .contact a    {         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPyBaHWQTQJJSkJpkJo7hBEDqCj2R_cGQ44wpAtdREK4LU8tgewyW0vlwTRhajxcVuRoP-cjEvY9M0BB2A1O1WQXhnjc-vLOCUFX6pZ0K10EmZ1xQk3V-MSq07KjbImc93sshUW9Up2iQ/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