Membuat Menu Navigasi Dengan jQuery

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>dan simpan kode berikut tepat diatas kode tadi :

/* Menu Navigasi Dengan JQuery ------------------------------------ */
.menu {
width: 100%;
margin-top:-10px;
}
ul, li {
margin: 0;
padding: 0;
}
#blob {
background: #0b2b61;
position: absolute;
z-index: 1;
top: 0;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 2px #ccc;
-webkit-box-shadow: 0px 0px 2px #ccc;
}
#nav {
padding:5px;
position: relative;
float: left;
width: 600px;
margin-bottom: 5px;
}
#nav li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 1px solid black;
}
#nav li a {
color: #e3e3e3;
z-index: 2;
position: relative;
cursor: pointer;
float: center;
font-size: 12px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 20px 20px;
width: 100%;
text-transform:uppercase;
font-weight:bold;
}

7. Simpan kode ini diatas kode </body>  :

<!-- Header Navbar -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://hapiajavascript.googlecode.com/files/NavScript.txt"></script>
<script type="text/javascript">
$('#nav').spasticNav();
</script>

8. kemudian kembali masuk pada menu Rancangan, edit html dan cari kode :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

9. Simpan kode berikut tepat dibawah kode diatas tadi (bisa berbeda sesuai tema blog anda) :

<ul id="nav">
<li id="selected"><a href="/">Home</a></li>
<li><a href="about.html">Mobile Download</a></li>
<li><a href="#">Blogging Tips</a></li>
<li><a href="#">Menu Navigasi</a></li>
<li><a href="#">Contact</a></li>
</ul>

NB : jika ada id dengan nama Nav silahkan hapus terlebih dahulu id Nav sebelumnya agar tidak terjadi bentrok id

10. Save  

Related Post