Tutorial: Floating Menu Bar Jquery

Assalammualaikum. (= hmm, Aind ade terima request dari kak michiko. dye nak buat   Floating Menu Bar Jquery. ala, yang bile kite letak cursor kat situ, keluar perktaan tu. macam nie:
 Ok, ni caranya: (perhatikan betul2 tau!)

1. Dashboard-design-edit HTML-tick expand widget
2. post kod ni BAWAH <head>

<script src='http://cikamoitutor.bravehost.com/jquery-1.4.2.min.js' type='text/javascript'/><script src='http://cikamoitutor.bravehost.com/jquery.easing.js' type='text/javascript'/><script src='http://cikamoitutor.bravehost.com/jquery.sweet-menu-1.0.js' type='text/javascript'/>

3.copy n paste kod ni bawah ]]></b:skin> pulak k ?

<script type='text/javascript'>
$(document).ready(function(){

$(&#39;#backMenu&#39;).sweetMenu({
top: 40,
padding: 8,
iconSize: 48,
easing: &#39;easeOutBounce&#39;,
duration: 500,
icons: [
&#39;images/back.png&#39;
]
});

$(&#39;#exampleMenu&#39;).sweetMenu({
top: 100,
padding: 8,
iconSize:40,
easing: &#39;easeOutBounce&#39;,
duration: 500,
icons: [
&#39;http://1.bp.blogspot.com/-8HPX3cRbEv4/TWqAKubiMlI/AAAAAAAAD-M/3vIzpvJOzHo/s1600/2011-02-28_003024.png&#39;,

&#39;http://1.bp.blogspot.com/-OE-a1ACRYvM/TWp-YDU4JAI/AAAAAAAAD98/AcK_uUbYiuU/s1600/Lockbox.png&#39;,

&#39;http://3.bp.blogspot.com/-D-iRR9UIz5k/TWp-9to863I/AAAAAAAAD-E/0dSNTvNoZJQ/s1600/Text.png&#39;,

&#39;http://1.bp.blogspot.com/-z-iw2XB4WUQ/TWqAK5_Z86I/AAAAAAAAD-U/mVSX7JI-1YY/s1600/Customize.png&#39;,

&#39;http://2.bp.blogspot.com/-YtXFVHsn9Yk/TWqALDHN4mI/AAAAAAAAD-c/qM-XY5PrDgg/s1600/Sketches.png&#39;,

&#39;http://3.bp.blogspot.com/-R9xU-Bj9Ye4/TWp9wCGKvKI/AAAAAAAAD90/U9jqZvY3ueA/s1600/Kate.png&#39;
]
});
});
</script>
 p/s: yang diboldkan bleh tukar pic yg korang suke!

 4. copy n paste kod ni ats ]]></b:skin> .



.sweetMenuAnchor{border-top: 1px solid #ffffff;border-right: 1px solid #ffffff;border-bottom: 1px solid #ffffff;border-top-right-radius: 4px;-moz-border-radius-topright: 4px;border-bottom-right-radius: 4px;-moz-border-radius-bottomright: 4px;color: #000000;font-size: 20px;font-weight: bold;text-align: right;text-transform: uppercase;font-family: Arial Narrow;text-decoration: none;background-color: #ACF3FD;opacity: 1.0;}
.sweetMenuAnchor span{display: block;padding-top: 10px;}

5. copy n paste cod ni ats </body> 

<div id='exampleMenu'>
<li><a expr:href='data:blog.homepageUrl' title='homepage'>Home</a></li><li><a href='LINK anda' target='_blank' >Tajuk1</a></li>
<li><a href='LINK anda' target='_blank' >tajuk2</a></li>
<li><a href='LINK anda' target='_blank' >tajuk3</a></li>
<li><a href='LINK anda' target='_blank' >tajuk4</a></li>
<li><a href='LINK anda' target='_blank' >tajuk5</a></li>
</div>

 kene hati2 sikitlah sebab dye banyak code. kalau jadi korang gtau ea. kalau x jadi pun, gtau!

kbye✿

Ulasan

Nurul NajwaAbuBakar berkata…
Ulasan ini telah dialihkan keluar oleh pengarang.
Nurul NajwaAbuBakar berkata…
@michiko: tengs syg..sbb sudi wat kan akk tuto ni..

Catatan popular daripada blog ini

Tutorial: Letak Facebook share button di blog

Resepi: Kek Batik Sarawak/Milo

Tutorial:Favicon@ icon di blog