Glowing Navigation with Jquery ~ Easy HTML Tricks for Blogging

Hi guys! Today, we will try to create Glowing Navigation Menu with jQuery for Blogger. Maybe this trick is almost similar with Hide Show Social Bookmarks with Hover. But, I think Glowing Navigation is better. Want to see the DEMO? OK, now if 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>

<code>.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
}
</code>

4. Then copy the code below, and paste above

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

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

<code><div class='kwickswrap'><br /><ul class='kwicks'><br /><li id='kwick1'><a href='#' title='Home'>Home</a></li><br /><li id='kwick2'><a href='#' title='Contents'>Blog</a></li><br /><li id='kwick3'><a href='#' title='About'>About</a></li><br /><li id='kwick4'><a href='#' title='Futures'>Portfolio</a></li><br /><li id='kwick5'><a href='#' title='Contact us'>Contact</a></li><br /><li id='kwick6'><a href='#' title='Recomended links'>Resource</a></li><br /></ul><br /></div><br /></td><br /><script type="text/javascript"><br />$().ready(function() {<br />$('.kwicks').kwicks({<br />max : 190,<br />duration: 800,<br />easing: 'easeOutQuint'<br />});<br />});<br /></script><br /></code>

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