Membuat Menu Cantik dan Elegan Dengan jQuery dan CSS

Pada postingan ini kita akan belajar tentang tata cara menambah daya pikat blog kita dengan menu cantik yang elegan di blog menu ini berbentuk icon icon yang sangat indah dari hasil penambahan css
dan jQuery baiklah sobat lansung saja ke pembahasannya..

Masuk blog anda
pilih menu template
cari kode ]]></b:skin> gunakan ctrl + f untuk mempermudah anda
jika sudah ketemu letakan kode dibawah ini diatas tag ]]></b:skin>

/*----------------------------------------------------
{--------}  Menu {--------}
----------------------------------------------------*/
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.8;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#navigation .home a{
    background-image: url(http://img163.imageshack.us/img163/1473/homehc.png);
}
ul#navigation .about a      {
    background-image: url(http://img156.imageshack.us/img156/4176/idcardqx.png);
}
ul#navigation .search a      {
    background-image: url(http://img21.imageshack.us/img21/7365/searchl.png);
}
ul#navigation .podcasts a      {
    background-image: url(http://img834.imageshack.us/img834/8079/camerae.png);
}
ul#navigation .rssfeed a   {
    background-image: url(http://img263.imageshack.us/img263/5871/rssd.png);
}
ul#navigation .photos a     {
    background-image: url(http://img508.imageshack.us/img508/2226/ipodl.png);
}
ul#navigation .contact a    {
    background-image: url(http://img808.imageshack.us/img808/5498/mailos.png);
}

kemudian cari kode </head> tetap gunakan ctrl + f
jika sudah ketemu letakan kode dibawah ini diatas tag </head>

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script> 

Dan yang terakhir cari kode </body> biasanya kode ini berada pada deretan bawah
 atau gunakan ctrl + f  agar lebih mudah
jika sudah ketemu letakan kode dibawah ini diatas tag </body>

<ul id="navigation">

            <li class="home"><a href="Kode anda disini" title="Home"></a></li>

            <li class="about"><a href="Kode anda disini" title="About"></a></li>

            <li class="search"><a href="Kode anda disini" title="Search"></a></li>

            <li class="photos"><a href="Kode anda disini" title="Photos"></a></li>

            <li class="rssfeed"><a href="Kode anda disini" title="Rss Feed"></a></li>

            <li class="podcasts"><a href="Kode anda disini" title="Podcasts"></a></li>

            <li class="contact"><a href="Kode anda disini" title="Contact"></a></li>

        </ul> 

 Catatan : silahkan sesuaikan kode berwarna merah dengan kode anda masing masing

Saya kira penjelasannya sudah cukup jelas selamat mencoba semoga bermanfaat..