How To make Glowing Navigation Menu in Blogger

You want to try Glowing Navigation Menu with jQuery for Blogger, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Editt HTML
3. Copy the code below, and paste above ]]></b:skin>

kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2

}

.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}

.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg

);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}

#kwick1 a:hover{background-position:0 -50px!important}

#kwick2 a{background-position:-190px 0}

#kwick2 a:hover{background-position:-190px -50px!important}

#kwick3 a{background-position:-380px 0}

#kwick3 a:hover{background-position:-380px -50px!important}

#kwick4 a{background-position:-570px 0}

#kwick4 a:hover{background-position:-570px -50px!important}

#kwick5 a{background-position:-760px 0}

#kwick5 a:hover{background-position:-760px -50px!important}

#kwick6 a{background-position:-950px 0}

#kwick6 a:hover{background-position:-950px -50px!important}

.kwicks li ul a{float:left;width:12em}

.kwicks ul ul{top:auto}

.kwicks li ul ul{left:12em;margin:0 0 0 10px}

.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block

}

4. Then copy the code  below, and paste above </head>

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.2.3.js' type='text/javascript'/>

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

5. Click SAVE TEMPLATE
6. Now, go to Design --> Page Elements --> Add Gadget, choose "HTML/Java Script"
7. After that, add this code

<div class='kwickswrap'>

<ul class='kwicks'>

<li id='kwick1'><a href='#' title='Home'>Home</a></li>

<li id='kwick2'><a href='#' title='Contents'>Blog</a></li>

<li id='kwick3'><a href='#' title='About'>About</a></li>

<li id='kwick4'><a href='#' title='Futures'>Portfolio</a></li>

<li id='kwick5'><a href='#' title='Contact us'>Contact</a></li>

<li id='kwick6'><a href='#' title='Recomended links'>Resource</a></li>

</ul>

</div>

</td>

<script type="text/javascript">

$().ready(function() {

$('.kwicks').kwicks({

max : 190,

duration: 800,

easing: 'easeOutQuint'

});

});

</script>

=> You have to customize the URL first
8. Click SAVE