3 Langkah Membuat Navigasi Menu Keren di Blog

• Share
• Tweet

CO-DIT - 3 Langkah Membuat navigasi menu keren di Blog - pada tutorial kali ini yaitu tentang mepercantik blog kita yang akan kita bahas yaitu tutorial mempercantik blog yaitu cuma 3 Langkah Membuat 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 :

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

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

<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

oke karena mata saya sudah tinggal 5 Watt lagi maka saya cukupkan tutorial 3 Langkah Membuat navigasi menu keren di Blog semoga sukses dan bisa bermanfaat buat anda.....