Home » » Bounce Menu With JQuery

Bounce Menu With 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>
7. 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;
  
}

8. 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'/>
9. Simpan template.

10. Cara menggunakan :
<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>

NB : 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
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .