Membuat Beautiful Slide Out Navigation

Cara membuat Menu “Beautiful Slide Out Navigation,Berikut akak adek rohmad bahas,dan selamat menikmati sobat,dan ini contoh menunya..

Cara membuatnya sebagai berikut:

1. Login ke blogger
2. Menuju menu Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Copy lalu Simpan kode berikut tepat diatasnya code ]]></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/AVvXsEjqSCwPfdEzTK7ihESAXwqR0l0MkUUWbk184CWSG1KldRWMj_0fDVZ61kBOCz-VGYx5wYmkhHMxaxp_BMWclN-6TM6nltGNTA4YqLBeehv3zocIOHSMgCB9rDspuTqukyOJtD4alx7MGOk/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYlx6dvy1cSCDDcel2DZOjx1MsTgVAEQI7lTVVf3lwnNz5hhskYAgTceEq9GLde9iVflwadGVXGbUvakrVGuNS92M3rVMM4WwEA4_PhYcIpVJLObFqkM0D3SY3SmETD9-CFZ1W-ErIFs/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUv7cpXMopUDJlmUqzBVQKN55ffDmRjv9EEl5RlTo8b5ff9aifQJdkXpGUo4eGIMm_oKEegOUl5L0y5yLwrp01Ib_ItLJgz935iTRUvC2jtG51XFVrle7efxgrOgU8a_SGYBuPUoc6_Mo/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Z_yd8uI-3AubVBv1dQG6mobRJZHuDxopjzmH1APomButl_By4JYidTSNwzdy0SCwBlQs_eD98Xm_rbVZ9jqH_KkjFbS-C-f69TIcyoXjVS97xJccovR0v2uAH1c8kppiiOi7IwHMtEI/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIwNgDrvBi-AN9cwKe9FAL-PTHr6TrrrMsbtD_AznHj1EOiq9c4D_gKmS_zP1T66WQxAEPy_4yOuwQwqoEMUZPg_oVsKsIbhNv29FQVk_YMPrdObbIkLhph5arWOxWtXic4fsGO1BQW7M/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSlgxJnpA_COPGEgGqXa5Wnpv7l4gHV9Aob88BqrsWRFyLBgIqJRiGBIr9LICSTSk5DGeIOjsHJ-uqFMjiroX3mFcbTQdixJvHiL1ajwKm9R6Iswq6tg9fNseDu_ZPyqdFONKiDDrzSQw/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibrYJnEIlMfhN4qyrDcb-U24bR2va4sNGqvlORk0ue4BcaNp9gDl277QgjabeBE6Zkzz06EA_Ge69HKqaohZmS_jnXvthqxaaqmb-8X5Mc1PgYQIloOBta8vyBkO1-oxTPqfGNDprOyDI/s1600/mail.png);

Keterangan: url yang berwarna merah adalah url gambar atau icon yang akan tampil pada menu Slidenya.

Jangan disave dulu brow,masih panjang nih langkahnya,yuk mari lanjutin..Kalau sudah sekarang tekan ctrl+f dan masukan code </head>dan tekan enter lalu copy code dibawah ini tepat diatas code </head> :

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/&gt;
    &lt;script src='http://kangdadang.googlecode.com/files/jcolor.js'/&gt;
&lt;script type='text/javascript'&gt;
            $(function() {
                var d=300;
                $(&amp;#39;#navixed a&amp;#39;).each(function(){
                    $(this).stop().animate({
                        &amp;#39;marginTop&amp;#39;:&amp;#39;-80px&amp;#39;
                    },d+=150);
                });

                $(&amp;#39;#navixed &amp;gt; li&amp;#39;).hover(
                function () {
                    $(&amp;#39;a&amp;#39;,$(this)).stop().animate({
                        &amp;#39;marginTop&amp;#39;:&amp;#39;-2px&amp;#39;
                    },200);
                },
                function () {
                    $(&amp;#39;a&amp;#39;,$(this)).stop().animate({
                        &amp;#39;marginTop&amp;#39;:&amp;#39;-80px&amp;#39;
                    },200);
                }
            );
            });
        &lt;/script&gt;

Eiiiiiizzzzzztttttttt Jangan keburu disimpen mas brow,nih ada langkah yang terakhir,,Dan yang terakhir copy code pemanggil/code untuk menempatkan linknya,lalu simpan cara pemanggilannya tepat 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>

keterangan : silahkan ganti # dengan link yang anda inginkan
Jangan lupa karena ccode diatas saya parse jadi sebelum mengunakan harus diparse kecode sebenarnya,caranya masuk link ini "http://www.blogcrowds.com/resources/parse_html.php"..

Lalu save templatenya brow,lalu view blognya dan mulailah tersenyum riang gembira sambil menunggu loading blog anda,taraaaaaaaaaaaaa “Beautiful Slide Out Navigation” anda sudah jadi brow,Nah segitu dulu tutor dari dek rohmad ya akang-akang yang ganteng,Semoga bermanfaat…