Tutorial sweet menu pada blog

June 18, 2011

ok langkah nie agak pnjg , i xletak dlm blog coz blog i da nak gemok , myb next time :P

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 kaler ijau tu korang ubah la icon laen yang korang suke , law xde guna je yang diberi

 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='http://www.blogger.com/home' target='_blank' >Login</a></li>
<li><a href='http://blurrr4evablurr.blogspot.com/' target='_blank' >Links</a></li>
<li><a href='http://blurrr4evablurr.blogspot.com/' target='_blank' >Comel</a></li>
<li><a href='//blurrr4evablurr.blogspot.com/' target='_blank' >Disclaimer</a></li>
<li><a href='//blurrr4evablurr.blogspot.com/' target='_blank' >About</a></li>
</div> 

6. da siap ? ok gud , now boleh preview , law xde apa2 problem boleh save

7. ha ! comment lah satu tnda hargai jasa i kongsi tutorial femes ni :P

p/s xramai yang tahu , dan xramai yang tuto kan . so cepat lah buat sekarang :P

5 comments

  1. thanks 4 this tuto, saya nk try la..ngehehe

    ReplyDelete
  2. welcem , try la , jd bgtaw ye , hee :O

    ReplyDelete
  3. akak.. saye dah buat...cute sangat...tapi boleh saye tanye...yang bende nieh untuk ape ye?

    ReplyDelete

Latest Instagrams

© Anis Nadhilah. Design by Fearne.