x Tutorial sweet menu pada blog | Anys NADHILAH

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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFTRe_aT7FiPGaOIiAGfVJp0EXSyX9G3mod5KTkBjEXo4udGGFW4p05M_-4RwCqx9T1IDfZZPn3Sbzjn_vikLsNiKY1qatfSCxN07i61uXIkIT951k62g14bCF1NJPgzKy1LdYVZ6NVzN1/s1600/2011-02-28_003024.png&#39;,
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHQ-qymLvChP_4EXucXVGAgM8MbDbtLVrEdYzUyBxbU56hPcavAb-6mvRNn6M1PP04EEWFxRD3eACkoYGspg2utrRHugSw9hdz8BJUd1jSVlIyMHXLplqXhF20mQHUNV0cDFj7EvccYtFi/s1600/Lockbox.png&#39;,
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh9e4SAfGWL09RfSiQVuxlRmOAG0O-musFVZvbmuz43teugGJ91eL3A0SJPi0HD-poJtsG7Rl8lUF4BpOxvjcDrEYLCiVwlsk_w6HIcGu3vcy1fJQikpxA5aoNT0cHJRbKxwVyYGHumYlv/s1600/Text.png&#39;,
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFHe-CcDkBIUC_9Jq3LZCD_xMon9kIyWxDe1-YP_BE5T0cngvdNqpzn3gFHc81yRVNHFna9C5MXgTbq0isovzaVxujr1iuCEiZq7AIJMf5BSjL-7B4RZQUsFqNIUxGdMYBGolz7muYK27/s1600/Customize.png&#39;,
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGGtj1VGRLAFy2sDRL-KoxZ15yTEKANAWSgY-6VCgwaE-2nmxHXIS4CHySr2J2sZRDNpuOAwDyNn48rrJxovlSsv55aeLj3qYJrlIC7y2MaD0WYP-lZMipiUCUsBWFcbQF9A9FMLjvQZvq/s1600/Sketches.png&#39;,
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhL7qbV4XCocY6FwStVzF9xOwQ38d_6Xxnoj6yBaLQSWsbPm45Wu7vRpGzN1chDkSN7pIdoUCy_s3Hv8s4u7tTc0-OMvmq0mZ66r0E2FDGmgolUJle6zl50AgucdAYKLLXkXPeSo0jH3QB/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

© Anys NADHILAH. Design by FCD.