3 Script pembuat navigasi menu keren di Blog

inilah screen shotnya

CO-DIT - 3 Script pembuat navigasi menu keren di Blog - pada tutorial kali ini kita bahas yaitu tutorial mempercantik blog yaitu cuma 
3 Script pembuat navigasi menu keren di Blog
 untuk lebih jellasnya silahkan lihat dulu disini

Cara membuatnya mudah banget ikuti langkah2 nya sampai selesai karena kalaw tidak maka tidak akan selesai juga.............. :
1. Login blogger
2. Rancangan, Edit Html, 
3. download dulu template anda untuk jaga2
4. Cari kode ]]></b:skin>
5. Dan taruh ( sabe' ) kode berikut diatasnya kode ]]></b:skin> tadi, ne kodenya 

1

/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
        {
            width:800px;
            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:1000px;
}
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(http://i1094.photobucket.com/albums/i454/rikiyanto1/kapak-comunity-allfile.png);
}
ul#navixed .about a      {
    background-image: url(http://i1094.photobucket.com/albums/i454/rikiyanto1/kapak-comunity-facebookicon.png);
}
ul#navixed .search a      {
    background-image: url(http://i1094.photobucket.com/albums/i454/rikiyanto1/kapak-comunity-blogger.png);
}
ul#navixed .podcasts a      {
    background-image: url(http://i1094.photobucket.com/albums/i454/rikiyanto1/kapak-comunity-makalah.png);
}
ul#navixed .rssfeed a   {
    background-image: url(http://i1094.photobucket.com/albums/i454/rikiyanto1/kapak-comunity-agamaislam.png);
}
ul#navixed .photos a     {
    background-image: url(http://i1094.photobucket.com/albums/i454/rikiyanto1/kapak-comunity-software.png);
}
ul#navixed .contact a    {
    background-image: url(http://i1094.photobucket.com/albums/i454/rikiyanto1/kapak-comunity-seo.png);
}
ul#navixed .computer a    {
    background-image: url(http://i1094.photobucket.com/albums/i454/rikiyanto1/kapak-comunity-computer.png);
}
ul#navixed .photo a    {
    background-image: url(http://i1094.photobucket.com/albums/i454/rikiyanto1/kapak-comunity-photoshop.png);

6. taruh kode2 ini tepat bgt diatasnya kode </head>  

2

<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>

 7. terahir letakkan kode berikut ini tepat dia atasnya kode <body>

3

<ul id='navixed'>
            <li class='home'><a href='http://kapakcomunity.blogspot.com/search/label/INFORMASI'><span>All File</span></a></li>
            <li class='about'><a href='http://kapakcomunity.blogspot.com/search/label/FACEBOOK'><span>Facebook</span></a></li>
            <li class='search'><a href='http://kapakcomunity.blogspot.com/search/label/BLOGGER'><span>Blogger</span></a></li>
            <li class='photos'><a href='http://kapakcomunity.blogspot.com/search/label/SOFTWERE'><span>Software</span></a></li>
            <li class='rssfeed'><a href='http://kapakcomunity.blogspot.com/search/label/PELAJARAN%20AGAMA'><span>Agama</span></a></li>
            <li class='podcasts'><a href='http://kapakcomunity.blogspot.com/search/label/MAKALAH'><span>Makalah</span></a></li>
            <li class='contact'><a href='http://kapakcomunity.blogspot.com/search/label/SEO'><span>SEO</span></a></li>
            <li class='computer'><a href='http://kapakcomunity.blogspot.com/search/label/KOMPUTER'><span>Computer</span></a></li>
            <li class='photo'><a href='http://kapakcomunity.blogspot.com/search/label/EDITING%20PHOTO'><span>Editing Photo</span></a></li>
        </ul>

keterangan warna :

warna : kode yang harus di cari
warna : rubah sesuai template blog sobat
warna : link gambar sobat ganti sesuai keinginan
warna : judul
warna : link yang nantinya akan digunakan saat di klik

 saya cukupkan tutorial 3 Script pembuat navigasi menu keren di Blog semoga bisa bermanfaat buat anda.....