08 Februari 2011

Vertical Sliding Jquery Menu

Tiada ulasan:
 





Langkah 1
1.Log in ke Blogger Dashboard--->Design/Layout--->Edit HTML>>>Klik pada Mark Expand Widgets>>>Tekan Ctrl+F

Langkah 2
Cari kod </head>

Copy kod dibawah dan pastekan sebelum kod </head>

<script src='http://aidealfitri.webs.com/jquery.js' type='text/javascript'/><script src='http://aidealfitri.webs.com/sliding_effect.js' type='text/javascript'/>

*sila hosting skrip(kod ungu) sendiri kalau boleh.KlikDownloadskrip.

Langkah 3
Cari kod ]]></b:skin>

Copy kod dibawah dan pastekan sebelum kod ]]></b:skin>

ul#sliding-navigation li.sliding-element h3{color: #fff;background:url(http://3.bp.blogspot.com/_JUJEXEamsyU/Spj3mH2QXuI/AAAAAAAAAXc/8B5-cqwIAI8/heading_bg.jpg) repeat-y;font-weight: normal;}#hide {position:absolute;top:30px;left:-190px;}ul#sliding-navigation{background:url(http://1.bp.blogspot.com/_JUJEXEamsyU/Spj3llCYM9I/AAAAAAAAAXU/qft56tBlT0w/background.jpg);list-style: none;font-size: 14px;margin: 30px 0;}ul#sliding-navigation li.sliding-element h3,ul#sliding-navigation li.sliding-element a{display: block;width: 150px;padding: 5px 15px;margin: 0;margin-bottom: 5px;}ul#sliding-navigation li.sliding-element h3{color: #fff;background: #333;border: 1px solid #1a1a1a;font-weight: normal;}ul#sliding-navigation li.sliding-element a{color: #999;background: #222;border: 1px solid #1a1a1a;text-decoration: none;}ul#sliding-navigation li.sliding-element a:hover { color: #ffff66; }

Langkah 4
Klik "Save Templates"

Langkah 5
Sekarang pergi ke Layout/Design>>>Add a Gadget>>>Pilih HTML/Javascript>>>Paste kod dibawah.

<ul id="sliding-navigation"><li class="sliding-element"><h3>Navigation Title</h3></li><li class="sliding-element"><a href="#">Link 1</a></li><li class="sliding-element"><a href="#">Link 2</a></li><li class="sliding-element"><a href="#">Link 3</a></li><li class="sliding-element"><a href="#">Link 4</a></li><li class="sliding-element"><a href="#">Link 5</a></li></ul>

Klik save dan dah siap
*kod merah untuk korang edit.



Tiada ulasan:

Catat Ulasan

TERIMA KASIH UNTUK KOMENKOMEN TERBARU

 
© 1986. Aideal Fitri - fitri1986 Malaysian Blogger