For the umpteenth time on themed tutorial blog seo blog and this blogger blogspot download jQuery tutorial in making menu navigation on the blogger.
If you have previously been published how to implement jQuery on blogspot within a few tricks to make a slide show widgets, sliding panels and slick tab view using jQuery, now there is another trick that is not less interesting.
Yes gan! Let's find out how the heck to make navigation menus for flatform blogger / blogspot with this jQuery.
Creating a Navigation Menu Kwicks Blogger with jQuery
Buddy had a look at some blogs or sites where the navigation menu it can hide the icon or image slide / slide when the mouse is above it?
Demos or examples of this jQuery navigation menu kwicks friend can look at:
http://www.jeremymartin.name/examples/kwicks.php?example=1
It is true, that the weakness of kwicks navigation menu can not be read by some browsers especially mobile phone or a browser that does not activate the navigation menu javascript.Namun kwicks jQuery may work very well in Google chrome browser mozilla and IE is also the latest.
Curious, come let us learn how to create a navigation menu with jQuery kwicks blogger tricks.
First step as always yes just select the Dashboard (gb.1), then Layout (gb.2) then tick writings Expands Widget Templates (gb.3).
Well, then find this code ]]></ b: skin> (use Ctrl + F on your keyboard sob), after the meet to stay put the following CSS code right above ]]></ b: skin> it.
. Kwicks {height: 50px; list-style: none; margin: 0; padding: 0; position: relative; width: 840px; z-index: 2
}
. Kwicks
. Kwicks li
# 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 ul li a {float: left; width: 12em}
. Kwicks ul ul {top: auto}
. Kwicks ul li 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
}
after that <head> search code, after the meet appropriate place the following jQuery code above:
<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'/>
Then save templates pal.
Well, to display it on the widget let's select the Layout / design as no image (1), and click on Add New Widget or Add Gadget, see Figure No. (4)
Next select the HTML / Javascript see Fig (5) and then place the following code:
<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'> <a href='http://pelajaran-blog.blogspot.com/' title='halaman utama'> Home </ a> </ li>
<li id='kwick2'> <a href='http://pelajaran-blog.blogspot.com/search' title='daftar isi.'> Blog </ a> </ li>
<li id='kwick3'> <a href='http://pelajaran-blog.blogspot.com/2009/02/profil.html' 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://pelajaran-blog.blogspot.com/' title='recomended links'> Resource </ a> </ li>
</ Ul>
</ Div>
</ Td>
<script type="text/javascript">
$ (). Ready (function () {
$ ('. Kwicks'). Kwicks ({
max: 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</ Script>
Save, finished already and my friend was able to see the results of this jquery navigation menu kwick.
Tidak ada komentar:
Posting Komentar