Cara Membuat navigasi menu keren di Blog

Cara Membuat navigasi menu keren di Blog - kali ini saya akan membahas tutorial mempercantik blog yaitu Cara Membuat navigasi menu keren di Blog, yang seperti anda lihat gambar di samping adalah sebuah screen shoot dari menu navigasi tersebut

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. 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/AVvXsEjlQW4dPPl5xsdvYblLpaLLbpcN1iBzPGgR0WApjPUzvPYtq3orIfW1hybnJ4Cood6nbAbtNu2q-eWrDRAV-hopxnlBdYs-6IHyB-AgtS95WmdDUdJqVQ12tjOXpcg-FemXvG_E_vAPZA0/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip6gyI4T360GBBxDL00eG-QgtKDaMx_2yVeZuZlVuPgaWwTYt0J2Yi7kupgeYyPSrzLcfJOnMYXgPAQgrXeVlLYFneG1zPiGmpCfhf7zsFImdO5XDGvyBevASfxuzcd6sq5_DgAkMFCuA/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMRBLmIvmc9aQhqUC5vpXf1pU97-KbBufTNuxc7YfJavy9L444FJ5_6Rm5juQ7szvpHO6Kl4zqUYcnzTcMKcH8avgmHYVGGNjVU313-JPMdtech6mdlfWiCGlvhaFk3w92NZ9dnL08jO8/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidXFkzGFi_KirP7w0N8sXtcYO0Tdg3b6nY5KVtb-Qk8g9l-xEWzz9K_xU0364FCXw3_DNkw3ndNmSoVTcgRc3MO1kVBDi9NlV_fl3MGwLTdBxiDZR3szd-TQ0L3sTtdQkL0yLHVBgJwPk/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHc-grhxwSHjkiuygWmCovTEkgmT00PBoqQ3c_rRRGU_OufUKZbvGrYozn73K0JP2mV0zeeywZha1bH21BQS4wYRM7HUFvgkxlnrJYXXQXKAiMx7zk3UjIcXvl0vt_SlpTG2Pn55zCGIY/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYO1QmXXuTrx8YvIIrPs80TB1SiBQxRsmBU5Sk1PI2wyHt06HfoWI7otJehlHK4ZXihV4zmjKA-nRCA8DjywLqdipxBjmhxwwGXVRxeQWa8xEtlqBv3ULnfki7mL_bCWSmeyECvTa-GiM/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJjBdAQRf2dWgg7UINHF8M1dIdy_b_2KoOVYfWYJ-zgE2C5vtCeyz-eO9RNrMPwCcEPYyltusKJ5PDA0JI620eyDlZ5bkadr0GPFLU8jwlqT9TxJ51giepw0tSBdvXe51zvh0tlQ9bvDs/s1600/mail.png);

dan simpan script 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>

terakhir simpan cara pemanggilannya 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>

ket : silahkan ganti # dengan link yang anda inginkan
selesai. Jangan lupa simpan template...

sekian artikel tentang Cara Membuat navigasi menu keren di Blog semoga bermanfaat dan menambah semangat blogging sobat yah...