Cara membuat Slide Out Navigation

17 Januari 2012

Nih tutornya langsung aja masuk step...
Steps :
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/AVvXsEhnA8xMTXLMYnrwwy7AahfU6lfMhxBngF5PFzpyxit5qT-Dx2qKr3efLicIy0ZiQEQNrK4MWXU1K1Icb6_KqfmW30W18-3SsZoR6ccWwWayJZ8d9eSVTxepqFh2M_fou-pk4aZWfW4C9W8/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO3-McRJc-WFtK_tCj-v9QsXkby0koNOop1A0miUZbgVoQ3ef7prqztt_Yf-012hrmeJezijOTpsA-yMFz3KCo2TlMRjsF29rIE2_t146VZSsL-Z0zrPMtlkCIHDRQ_6H6q5Bgx7yurQg/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ5wu_3U9_H6qoFkHT3I2VQ08pnK_o2odxCk4wFqu8doYDbYSEks5Px3MyXbqV_INJpM7TiWpQp3lRkNfrfFWV5_XBv-gWHrDzU6AeMWjCi-jfaJSnJXlerY-yXgAXXUx3Se9okdBO7RM/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqGbGzXBiZr2pyBvOo1T_pn6fn3iIGPWsBQ4Kqvbp2Wami36mgMbvI7rjzXBMqaTPizHENCOZwVcwduB-I3zh6Z20onalhmv_aGzEMs06gIicdR84m98ya7SXPNXt_r7aVqHv1PjzlJDM/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiwihmiBVlgTou7_OpHURasM3_KWVJH0WhEebORT-zRXDwrx_bKxoQGJ_8uHvMS2PxR62dTQhBLbFGrIy1o4HSsaGavcbpnaRq0xDc2fdBAqtT9NLLmEQvG0MPMJEUsRK6KVSweXTA5jw/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBzuRNnekWnLXOIn4Uv1-Z_bWKJqWOdGGScAMa3wqaPfkPW_h0Si4nlxvlHu8Ygpp_ZTQz8hvLaH_KV0cC7KLXmHjGsidQ63ptXdadxdkO1JSJaka-gLgi76u_rLyv6OZLOFt2BAAHiYs/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKBkogsgxX9A9CHLQE9YS0FN7sstRuwptXVY23WOTPUNRZtdmkshu6iv35slLmhDD8ueRkFo0XxhNyQymepQoybjojSxBmysmhZgh1CLfbp1W_JXG-A0RTtx_UnqH4OjPaRV_6rpYu3Rg/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;
                $('#navixed a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });

                $('#navixed > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },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>