Cara Membuat Slide Out Navigation

Oke.., berikut langkah-langkah cara membuat Slide Out Navigation :

[1]. Login Blogger

[2]. Klik Rancangan kemudian Edit HTML lalu cari kode ]]></b:skin>

[3]. Copas script berikut dan letakkan di atas kode ]]></b:skin> tadi :

/*----------------
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/AVvXsEiunVmrtnqDadzcxU4DsDN4jTo4yqnjzQG3Sgf8RX_lM7qSnYJIl_4QLqv5eKgFuc7hH1TgPJ6WM8dnNtwRx8fMNRPtZ4f4HSQv7-Qz_pEVhTsLBE38tQtAr53dRNVIPb6-cpqC5FGOYZk/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQwWAqkwaRbDQRmU_4MiHpQ3FilNi9wJ2UfaIHd9wVqMBWHDEfqAU_IcZ5RrJvQ6kjaLq8RWwutx4UxdxYvpn2TjX3sf7SU7zTf6a9iZJqXVXLNGGY-MfklwC6dOvjIQxnoXw1vzEl8Z8/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdoeuQuwS6FNaPJ2ZrXFRdjKdBklYBRvZX8kD6g8tqhniQkNek5VwLC9R2zxcrqfpizXuZ9UAnCPn335UMWOjaMBj7RdLW_JVcD9XY8web6DrewrpXNS8Plf_RRcfutaPuc9XbpDym_Nw/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTJLfznPOMGUYVpEjmAlFG2ke4WhjSe39D1194k__Mw8y_2YpUWegEdwlUrYkHPsoII-9C_nwIx5s6pPKmpqty5hxDjWC4aEqGyv0HuIy9GpAOHe-5gAuqRhzsDN5g94AZtFy_DxVTqI/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAbdnhnOK3iDwxuFFohtkSPXwR8mn57ez_w4FQpvRa8_8l_CFAeNOQmHD5JzmIlr3YiS_YYfl2ytjHBOUb4aE8CALLseftkRh1bypIkGqKu68RHRacr-1A1GqVjPdSDLoVTSkVfgzO-RU/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKBMmpxpcdXk4sDuxtPRzmhDOpp2zLVJt2ugvWli4URf2CpzCisuNaTUfJe74sk36BmnnLrccLUyX5vig2Rd2v7cgUtgcL9Jf7_aIirRdftN_5CqF_lfZKi182ikk9kpoBbb4Xc0rgtw/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz7rKaMDaNZGM-hP-kL_XSiDMdvj4CYcc5PaHvfGShio6v_BKjDznQmN5UmfRXZ8Dr_VTNwWAYIKPrtYTzdSsIH19vvbZ5LhP8doqW3y0XZtvRz-vzi2uvDSPqrH9s1SJ_dwj-fCujGk0/s1600/mail.png);
}

[4]. Kemudian cari kode </head> dan letakkan script berikut ini di atas 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>

[5]. Terakhir, cari kode </body> dan letakkan script berikut ini di atas 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>

Catatan :
# : Silahkan Anda ganti dengan masing-masing link menu navigasi di blog Anda

[6]. Selesai deh.. dan jangan lupa Simpan Template

Bagaimana, mudah kah cara membuat Slide Out Navigation..??? Yakin deh Anda semua pasti bisa membuat SLide Out Navigation seperti yang saya terapkan di blog saya.

Selamat mencoba yaa dan semoga bermanfaat..