How to make kwick jQuery on blogger

On Saturday, October 15, 2011 0 comments
Create a blog in order to appear more attractive is a must for a blogger. Method for the way done by bloggers. And this time I will share about how to make kwick menu navigation on blogger. Here's how it:


1. Log in to your blogger
2. Choose your blog
3. Go to the Design
4. Edit HTML
5. Then find this code: ]]></ b: skin> (use Ctrl + F on your keyboard sob), after find, put the following CSS code right above ]]></ b: skin>
.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(
#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

6. Then find <head> code, and put this jQuery code, right above <head>

<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>

7. Save the template.

Next go to Layout / Design, click the Add New Widget / Add a widget, then select HTML / Javascript. And put the following code :

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='' title='daftar isi.'>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>

<script type="text/javascript">
$().ready(function() {
max : 190,
duration: 800,
easing: 'easeOutQuint'
Remove <li id='kwick1'><a href='' title='halaman utama'>Home</a></li> with your post or your Url

Save / Save. And behold, that's how to make kwick blogger navigation menu with jQuery.

Best regards

More Article:


Post a Comment