Membuat Menu Navigasi dengan Jquery

Langsung saja,login ke blogger

masuk ke Rancangan (dulunya Tata Letak) => Edit HTML

Setelah itu cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya


#container {
width: 660px; /*dapat sobat sesuaikan dengan lebar halaman blog sobat*/
margin-top:-10px;
}

ul, li {
margin: 0;
padding: 0;
}

#blob {
background: #0b2b61;
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
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: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;
}

#nav {
padding:5px;
position: relative;
background: #292929;
float: left;
}

#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: 13px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 15px 26px;
width: 100%;
}

Setelah itu cari kode yang hampir mirip dengan kode di bawah ini


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

...:::Catatan >> semua template mempunyai kode html yang berbeda-beda, inti dari kode di atas adalah Header-wrapper atau bisa juga header:::...

Setelah ke temu kode seperti yang ada di atas, lalu tambahkan kode di bawah ini tepat di bawah-nya


<div id="container">
<ul id="nav">
<li id="selected"><a href="/">Home</a></li>
<li><a href="about.html">tulisan URL</a></li>
<li><a href="Alamat URL">tulisan URL</a></li>
<li><a href="Alamat URL">Tulisan URL</a></li>
<li><a href="Alamat URL">Tulisan URL</a></li>
</ul>
</div>
<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://oketrik.googlecode.com/files/Menusjquery.js"></script>

<script type="text/javascript">
$('#nav').spasticNav();
</script>

Setelah itu simpan dan lihat hasilnya.Selamat Mencoba,semoga berhasil!!