Cara Membuat Menu Navigasi Dengan JQuery

Cara Membuat Menu Navigasi Dengan JQuery

1.Login pada blog anda

2.buka tab Template

3.Klik edit HTML

4.Centang Expand 

5.Copy dan letakkan script di bawah ini tepat di atas code ]]></b:skin>

#menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif2rE3lUKoZx0nZjdPd02lbufUvZLUTTFZxruSfrRG7z-ozeMczld_PtcqHFN39bYM5808dcw-oF9HNhXTmB-xxS6MhBq6L7KUrxY7O5JlIaQDfJAye5k2WsLxa7hZ__5qkrnQvrwtVWMQ/s1600/menu_bg.gif);
font:normal 18px/36px Arial, Helvetica, sans-serif;
float:left;
width:980px;
padding:0;
}
#menu li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif2rE3lUKoZx0nZjdPd02lbufUvZLUTTFZxruSfrRG7z-ozeMczld_PtcqHFN39bYM5808dcw-oF9HNhXTmB-xxS6MhBq6L7KUrxY7O5JlIaQDfJAye5k2WsLxa7hZ__5qkrnQvrwtVWMQ/s1600/menu_bg.gif);
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}
#menu li a{
color:#bfbfbf;
text-decoration:none;
padding-left:15px;
padding-right:10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif2rE3lUKoZx0nZjdPd02lbufUvZLUTTFZxruSfrRG7z-ozeMczld_PtcqHFN39bYM5808dcw-oF9HNhXTmB-xxS6MhBq6L7KUrxY7O5JlIaQDfJAye5k2WsLxa7hZ__5qkrnQvrwtVWMQ/s1600/menu_bg.gif);
display:block;
float:left;
}
#menu li span{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw-6Madzr7_ZxvzcrOdmLfIfauQduYH_ZRe3yBLJBlhMLLH8b6IOB44dNAvO_FnF9_rdPKDrghYBRV5XsdvrwqqZmTI-LTRwJYFHO9tCaewqhhtCNYNRA6ntB5zMdPFNxdX069mSIu0xaK/s1600/arrow.png) no-repeat 0 12px ;
width:20px;
height:35px;
/*display:inline-block;*/
float:left;
/*top:-35px;*/
/*position:relative;*/
cursor:pointer;
}
#menu li ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ95n5DwB3sOsnzc7xcehm3hFLSdpo4sMQFiHGEZbKja5-BtgQMUJoJ2zRSZE5USdmSklATZunV03PXMTzUN4vn7QJXhaO4Qx8OYEoCulAva0BY2wSup7yC156GwhQMzNSkWx1mJ4QmA7F/s1600/submenu_bg.gif) no-repeat right bottom;
padding:0;
font-size:15px;
display:none;
width:250px;
z-index:5;
position:absolute;
margin:0;
float:left;
left:0;
top:36px;
}
#menu li ul li{
background:none;
width:250px;
overflow:hidden;
line-height:25px;
}
#menu li ul a{
background-image:none;
border-bottom:1px solid #171717;
border-top:1px solid #545454;
border-left:1px solid #171717;
width:237px;
}
#menu li:hover ul{
}
a:active, a:visited {
outline:none;
}
.overRed {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCj3g5pJQpJ7Xc9OVZgUKV32h56c9ALkwvNSodIamYs7tu_jcpsATHLHItCa-MHtX-U8VuuvHg1sWN0aaXz_CRBbOcffaI_ZS_4_gPW-plxYylMSATmMVbeUgo37QXjidjQnGVNUtM1K39/s1600/over_red.png) no-repeat left top !important;
color:#FFFFFF !important;
border-left:none !important;
border-right:none !important;
}

Kemudian copy code di bawah ini diatas code </head> namun jika sudah ada code jQuery 1.6.1,js nya jangan di copy lagi code nya ya

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("ul.submenu").parent().append("<span></span>");
$("ul#menu li a, ul#menu li span").click(function(){
$(this).parent().find("ul.submenu").animate({height: 'show', opacity: 'show'}, 'slow');
})
$("ul#menu li").not("ul#menu li ul li").hover(function(){
}, function(){
$(".submenu").animate({height: 'hide', opacity: 'hide'}, 'slow');
})
$(".submenu li a").hover(function(){
$(this).animate({paddingLeft: "30px"}, 'fast') ;
$(this).addClass("overRed") ;
},
function(){
$(this).animate({paddingLeft: "15px"}, 'fast') ;
$(this).removeClass("overRed") ;
}
)
})
</script>

Lalu save 
Kemudian buka tab tata letak 

klik tambah gadget lalu copy dan letakkan code berikut
 

<ul id='menu'>
<li><a href='alamat blog kamu'>Home</a></li>
<li><a href='#'>Top</a>
<ul class='submenu'>
<li><a href='#'>Design</a></li>
<li><a href='#'>Development</a></li>
<li><a href='#'>Freebies</a></li>
<li><a href='#'>Inspirasi</a></li>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Tutorials</a></li>
<li><a href='#'>Wordpress</a></li>
</ul>
</li>
<li><a href='#'>Lifestyle</a>
<ul class='submenu'>
<li><a href='#'>Food</a></li>
<li><a href='#'>Health</a></li>
<li><a href='#'>Travelling</a></li>
</ul>
</li>
<li><a href='#'>Entertainment</a>
<ul class='submenu'>
<li><a href='#'>Celebs</a></li>
<li><a href='#'>Music</a></li>
<li><a href='#'>Movie</a></li>
</ul>
</li>
<li><a href='#'>News</a>
<ul class='submenu'>
<li><a href='#'>Nasional</a></li>
<li><a href='#'>Internasional</a></li>
<li><a href='#'>Indonesiaku</a></li>
</ul>
</li>
<li><a href='#'>Sports</a>
<ul class='submenu'>
<li><a href='#'>Sepakbola</a></li>
<li><a href='#'>Basket</a></li>
<li><a href='#'>MotoGP</a></li>
</ul>
</li>
<li><a href='#'>Download</a>
<ul class='submenu'>
<li><a href='#'>Mp3</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Movie</a></li>
</ul>
</li>
<li><a href='#'>Technology</a>
<ul class='submenu'>
<li><a href='#'>Gadget</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Computer</a></li>
<li><a href='#'>Handphone</a></li>
</ul>
</li>
<li><a href='http://www.omseoli.com'>Blogger</a>
<ul class='submenu'>
<li><a href='#'>Tips Blog</a></li>
<li><a href='http://caramembuatsemua.blogspot.com'>Tutorial Blog</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>jQuery</a></li>
</ul>
</li>
</ul>

Lalu klik simpan