Tampilan blog akan lebih cantik bila blog ada navigasi menu yang keren. Apalagi kalau menu itu buat dengan JQuery. Blog kamu akan terlihat lebih keren. Menu ini backgroundnya hitam, dengan tulisan dan ada gambar thumbnailnya diatasnya. Wah, langsung saja kita simak bagaimana scripnya untuk membuat navigasi menu yang keren ini.

1. Login ke akun blogger
2. Masuk ke dasbor, pilih menu Template
3. Klik Edit Template, pilih Edit HTML, klik Lanjutkan
4. Jangan lupa checklist kotak kecil pada Expand Widget Template
5. Cari kode ]]></b:skin>, gunakan ctrl + f untuk menggunakan pencarian cepat.
6. Paste kode berikut di atas ]]></b:skin>

/*----------------
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/AVvXsEiYM4k-gLRaI1LkO_TsklHY-2L4IAuRyOrlWKc3U4JsUtueaB6nYIMR1lvrNnW5wLU68stxoYM-lni6EteOrKtFspipB-lqPq344XA5INf0QPsGMCPvlOonk8cxodB5Dek5iXnMpzz0Tn4/s1600/home.png);
}
ul#navixed .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqag_uYkOsJ6MWZLd4l19us5wwxvF_PyuaWTmMvxY5n02ZhggDHGrobyGx2Wm503S72nuPhalUJja_J_b3MrCjvAO2FBQxW_y8rFD6q3wM4McmVqGY4eWEvkb3s2j8npIfbQbgFf41xJ4/s1600/id_card.png);
}
ul#navixed .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMYqxV2sQ7GCevnQ8VFLrmllK7jihU2_ynZ5MSQu3ISZElG_v7t9fbmPdSATSJZl-TiAi8yMR8zsI7yqZxdgZIgC1lW1hcY7eqOD0G_40pu1tmWwnHoAvBz5h5zMdaLSoayF3kNavprlg/s1600/search.png);
}
ul#navixed .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIqH5_5Jyc5cutc04t4PL4aHF0-EJqbE_0d0VPz2M0RKU7SFbpDUaV63ZudUo-jhlUCafVCqSq_dlMOBTxmFtb-9C4bx1jKZiLiUgumWBExAZLxAwjT8tcXfgBOhk4HbIUbO22McAKbuI/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaXLySA75HddWqOoRd-yPZ7-jyyHxwmgcacDKJNJt_u5u38bh_zXlpsfd1iLAh0ai4VjiM3vffrD_NBef3-Z4MqOdLBiJXw4Run15xQ23GzzcWVban6BY8ucr5pyLdxUeOo0ovXWMsTkE/s1600/rss.png);
}
ul#navixed .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCtqHkZprV0jQ5dNRnJGoYDjflSlpOeaNGIRmfYW9zYNwUy3k6mfB6822Nn-iWgKNb-vxHYoveFmG2OUT-vGZfa1LTfj2ALmwItDQ51EdND7aUo_ToplJnLQ74ZfGKbjtX3Cidubqf74I/s1600/camera.png);
}
ul#navixed .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioUyWFeJ7UxVae7XmSPAU2VNBbmL5zTzxAgVo-Yx2uroEVq0Gmqouno4AAQ7ZzgP050z3X-xNN-jCm1ewVv_auvfWlKYxdKBK621F3Bf0elvugA89lSu7mcC_YT3TsUcgGXP2hZ0QW1w4/s1600/mail.png); 

7. Cari kode </head>, kemudian copy kode berikut tepat diatas 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>

8. Cari kode </body>, kemudian copy kode berikut tepat diatas </body>

<ul id='navixed'>
            <li class='home'><a href='http://maskentir.blogspot.com'><span>Home</span></a></li>
            <li class='about'><a href='http://maskentir.blogspot.com/search/label/HTML'><span>About</span></a></li>
            <li class='search'><a href='http://maskentir.blogspot.com/search/label/Tutorial%20Blog'><span>Search</span></a></li>
            <li class='photos'><a href='http://maskentir.blogspot.com/search/label/JQuery'><span>Photos</span></a></li>
            <li class='rssfeed'><a href='http://maskentir.blogspot.com/search/label/SEO'><span>Rss Feed</span></a></li>
            <li class='podcasts'><a href='http://maskentir.blogspot.com/search/label/Bisnis%20Online'><span>Podcasts</span></a></li>
            <li class='contact'><a href='#'><span>Contact</span></a></li>
        </ul>

*Note : ganti tulisan yang berwarna merah dengan halaman atau url kamu.

Itulah tulisan tentang cara membuat menu yang keren menggunakan JQuery. Semoga bermanfaat buat kamu. Kalau kamu menyukai tulisan ini, mohon komentar dan follow blog.
Makasih,

Artikel Terkait: