Cara Membuat Slide Out Navigation

K

etika Anda membuka halaman blog saya, tentunya Anda akan melihat beberapa menu navigasi berupa "Home", "About Me", "Bannerku" dan lain sebagainya yang tentunya unik dan menarik. Dan sering kali temen-temen blogger menyebutnya dengan istilah "Slide Out Navigation". Tuuhh...lihat yang paling atas tuhh.. Menarik kan..??? hehe5.. Saya yakin deh Anda pasti penasaran dengan menu navigasi tersebut dan bertanya dalam hati, bagaimana yaa cara membuatnya, yaa kan..?? Jangan bohong deehhh..!!! hehe5..

Tapi Anda jangan khawatir, kali ini saya akan mencoba untuk share ilmu dan pengalaman saya ini kepada Anda semua [kurang baik apa cobaa... hihi5..].

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/AVvXsEjTsyijKEhsc1coLtM4Q-2Pe70DUHJ9jKtMStEHrl3mjVD6lQQlpcqiAtOFX7zl21zCgSPZ-l02ZmkLJsDACslLRe8KNPeVNrWeNHMNmnZBWMUu3LVVQ0Cwf7Zu-S1DqQqdgZlqoNkvQbs/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBFJVt5ct26O21daJ_L2UL0oTLp3C8nv3BxrPZ6H4r_vvmkuucamyFq4d2bgFXkAXoYKPRb_Q8XpLoB5uQzOaHF-Didr0lYgBEEpoFqt-n3ZXTS9d7c0UfOS1mlZYUTq_J0OIFcUR5zeA/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiKB5HJmkH0LKUOnz3dIIhp_7eifclLZYaRzApxDsqS_IbDczIRGzPkbPeMznju7fvKE4n9JFuWJlNy6soMAdDB0oEln290fkBMEPYZ2Lr5uCGIBh00b_Ylw8HlaULDw1ATw3prgDkzkg/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrARR0juvLz5QwMFYJuAovX8lbNc-MTadcA7k9BJFoVm-4M91a1qhSIiRNGTcQJQnOF4zNNmidscKbtlIuoYFjlbHwi6pABGOQDe0VmMy9oeuXG34uuaZGhxwEtYB5xd5gWv9EE6GwnHg/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjKy_pxEj7V557N7loQXweSczk8b2TrPVBFnSoE5b4T1__tJePJgUM_bJUBtlxRryA4nxkhp1xy6rKdfH-m5cXdCq_Ne4iVxFcvMBI4QAWPDSHTkbT00Nds7cN2wH98MWxV9CFKk8imHo/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiwUF3EoiWBrYieuFUyiZq0-Uy1ZuP20a6N7dPGEno5Z2HepQkIU7tjonbRnGQvy6mOias50GwLbFCnA48bTL-BpI8SnMtNmdLixp_XKid2qlhJAUksCoKrAGddVzozmD1VkUjwuIXjxQ/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEHwasMlZko7HMkN0Bbgk_Q324iBIqLH7gE0CSCdPSz0a6aA0K_OHdg1aaDpFBvo6Z8G0GtM0_GWLqROwvPwWoYZ1ZcG08FbENUjqSqwhmLKfqw6tTLT0yegCDtZHsQ-ji4JX4SvG15O4/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..