Vertical Sliding Jquery Menu
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhky8FtgDQLVKR8JZTS5rjqOan7kingovhlr5UnNZdIKuCs5I-kYS-PggNqe_K0TBsP8LdatIPgMAL0X59FCsU7W5VKkL5WvCkPHo85WdjVU0oKVkLLa9FAeNCetrk83nb28SgR5pWDaTxO/) repeat-y;font-weight: normal;}#hide {position:absolute;top:30px;left:-190px;}ul#sliding-navigation{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcmpMTL1wlJEknz59tHjElQQ9oMjn6WLxyVUkgXQHHnNDtrHOirYZFSnTgJoTWwEPlURJyURRcH8eSVY4aKfq8j-jRLfY6NO_MPZFmuwbMIkUAOULpnGHLF5_8t3AHI5-FRaUx7WKULnHM/);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.
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.