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:
Preview
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>
6. Then find <head> code, and put this jQuery code, right above <head>
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 :
Save / Save. And behold, that's how to make kwick blogger navigation menu with jQuery.
Best regards
Preview
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{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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdS01EX9f4dEzLi186KGHob66jR1tQG26en1kF1tbnv0xSeYAjsd0jyoZlvi_t9BylF1YcePm2Fp_lhQ3_T4dxAxTATXM4Xh0RkkO4hzbCdUFiWEp0PE56SlvvhdfLBbBexrsxJVsi7zY-/s1600/menu+jquery+gchangetok.png
);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
}
6. Then find <head> code, and put this jQuery code, right above <head>
<script src='http://files-article-blogging.googlecode.com/files/jquery-1.2.3.js' type='text/javascript'/>
<script src='http://files-article-blogging.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>
<script src='http://files-article-blogging.googlecode.com/files/jquery.easing.1.3.js' 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'>Remove <li id='kwick1'><a href='http://article-blogging.blogspot.com/' title='halaman utama'>Home</a></li> with your post or your Url
<ul class='kwicks'>
<li id='kwick1'><a href='http://article-blogging.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://article-blogging.blogspot.com/' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://article-blogging.blogspot.com/' 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='http://article-blogging.blogspot.com/' title='recomended links'>Resource</a></li>
</ul>
</div>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>
Save / Save. And behold, that's how to make kwick blogger navigation menu with jQuery.
Best regards
0 comments:
Post a Comment