Bounce menu with jQuery

1. Log in blogger
2. Masuk ke menu Rancangan, Edit Html,
3. Centang Menu Expand Template Widget
4. Simpan kode berikut Diatas kode ]]></b:skin> :

/* Bounce menu with jQuery
----------------------------------------------- */
#topad {
    width:465px;
    height:130px;
    padding-top:35px;
    padding-right:20px;
    float:right;
}
#vnav {
    width:300px;
    float:left;
}
#des {
    width:600px;
    float:right;
}
#des h1 {
    font-size:24px;
    text-shadow: 0 -1px 1px #CCC;
    color:#779ec2;
}
#bounce li {
    height:20px;
    width:200px;
    overflow:hidden;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px #999;
    -webkit-box-shadow: 0 1px 3px #999;
    text-shadow: 0 -1px 1px #222;
    border-bottom: 1px solid #222;
    padding: 7px 10px 6px;
    margin-top:5px;
    background-color:#a447cf;
}
#bounce li p {
    margin-top:10px;
    font-size:12px;
    color:#6CF;
  
}

selanjutnya simpan java script berikut tepat diatas kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='http://kangdadang.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://kangdadang.googlecode.com/files/custom.js' type='text/javascript'/>

simpan template......

cara pemanggilannya :

<div id="vnav">
<ul id="bounce">
<li><h1>
Home</h1>
<a href="#">Home page</a></li>
<li><h1>
About Us</h1>
<a href="#">Check our Portfolio</a>
</li>
<li><h1>
Portfolio</h1>
<a href="#">Check our Portfolio</a>
</li>
<li><h1>
Contact Us</h1>
<a href="#">Check our Portfolio</a>
</li>
</ul>
</div>

Keterangan : sebagai tambahan. jika script http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js  ini sudah ada pada template kawan-kawan, kawan semua tak perlu lagi mnambahkan script tadi pada template yang dipakai