Bounce menu with jQuery

Demonya bisa kawan-kawan lihat disini

Cara membuatnya :

1. Login blogger


2. Rancangan, Edit Html, Cari kode ]]></b:skin>


3. Dan Simpan kode berikut diatasnya :

/* 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

Terima Kasih

Created By Syarief Hidayat



------------------------------------------------------------------------------------------