Cara Membuat Beauty Slide Navigation

Y sobat blogger smuanya .. kali ini saya akan memberi taukan cara membuat slide navigation .. karena ada yang mananyakan cara membuatnya .. Ok langsung saja klo begitu ..

by: alex matz

Cara membuatnya :

Login blogger
Rancangan, Edit Html, Cari kode ]]>
Dan Simpan kode berikut diatasnya :

/*----------------
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/AVvXsEjlkzGdLUXRPThQ0XqcxS8tXWXHkpTyBv-YGgEM32k-Oe4P4Tg6GiNj62IIcPv1Xl3twLcK06YyrwWH6A9jb9hVSI39TbbNoehFTzmvbuVcbMaxGkCovbG21J3L-eCI8faJYemTZy6lKzk/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCxZShgXsdm9FjU_PHkeqAxIAEbJgSPCXDkqu3QlgNj-W7HtEeXb1FL9wW1DGtf1vwQz3_U5UJz4UfhWyhOdTIggyhJQPMGdib0w0rVWNGLwBQuy-1ypvQq7mqrMedWWe9D56EHxVgzok/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvPvdoqmCVsiS_BlhjAUvrdbkfyWc4LVPIrw83qq4wx0LPFe_vl_XLtxI_Uxh8PAfmazwbrCBgQSE4np5EwobEXhLflfwO2rih2KFq5hkG1cX9jN8yL7iuWg6R1j5NrgNlJ7eA_LwPNPw/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5kfFcnIr2boK4bsAmBOT0ZQJpRTy2XQ9EaIS-Hzn1Yo962rgQoilPSemNlQ7j3kObkMXL0HePzEYOq6Yum0Vd_Wme0fdcHjv7lR9SKGMOvK515pxzKP9C5SAE0dCtgqeuqn0YGD0Tnps/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixPEd_CkzCm2aBVwXaCQLiq3z5DcrUnNQir6hlqmSde2UttTjGL9_l-AsfUMGuFLsWUBuwbchq7NLtKi73meS9mGXugWv49Jj1JP-W750V0dpOAVxLoX60hhv-8XNursu7Xbmv0XoYYT0/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS9WDQyA943DrFiUxNCNrCAYbGAUshtyoqABLmhZToxrQ5AeXLVZlp1H31OWmaSlgukcfd3wu6IUmfqMbeZmq_Le5AABCORooweQ9LcQYoioB3PBqW3DKMkah7oKxgbauUgaCccdCS61g/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4SExxTc4Vd__RVob8qsEbbo7xDRaYIIRI3ez0ceeSuWXPx9e3g_LQfwE2cdXI-oWZQWfLlpA38V0hZ6seOION7ykJDMPeNgAyFtyzqaRoElnNr8C9ixBLuc6pfZnUwDQQtQqxtpSbL68/s1600/mail.png);
}

dan simpan script ini di atas kode :

[-] terakhir simpan cara pemanggilannya di atas kode :

Code di atas adalah code pemanggilannya .. ganti font yg berwana Biru dengan Link" sobat" blogger .

Selesai Jangan Lupa Simpan Template ... Selamat Mencoba~Good Luck ..

Jangan Lupa berikan Commentnya juga .. comment sobat" sangatlah berharga buat saya .. :D