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!)
3.copy n paste kod ni bawah ]]></b:skin> pulak k ?
4. copy n paste kod ni ats ]]></b:skin> .
5. copy n paste cod ni ats </body>
kene hati2 sikitlah sebab dye banyak code. kalau jadi korang gtau ea. kalau x jadi pun, gtau!
kbye✿
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 ?
p/s: yang diboldkan bleh tukar pic yg korang suke!<script type='text/javascript'>$(document).ready(function(){$('#backMenu').sweetMenu({top: 40,padding: 8,iconSize: 48,easing: 'easeOutBounce',duration: 500,icons: ['images/back.png']});$('#exampleMenu').sweetMenu({top: 100,padding: 8,iconSize:40,easing: 'easeOutBounce',duration: 500,icons: ['http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdUv3_mbGJDFs6SrJ65s0R6EZQwnrueZbLfLjrjQqzcue44k-i5340PnnGCUFNYOWC4oroYoSbZE2M3cCC7kqimHL1kJCbmzejiz4fHcq7LU0arkMLVelF9BlMUE7kjlcSpevi5DtMPKPl/s1600/2011-02-28_003024.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-0L5URNRewTiLS4m7J2Cck62q1LN4KQk0Z2g0XvXM-CQ0Y4ucXsxki182yfMuC41KmmKLsWev8d9YMImAERShTNtkwMdquPLMbM0QvFsyZQeoql0xJfWGy1ntA1SOaIu7TaDhct4DdDUu/s1600/Lockbox.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFLFnD8MwBuusbhYVWL6G5OYAVbQsEMwlroNKA75XPWw0pTR_g9DYy5YjZLRjCE70wAkpKz3ToBlLB0pMCKSRK_B6dB0QwUz6Tcc6YMqgxP5ktECVmmDAcem8KN69VHfyt0idmgiWQNgi/s1600/Text.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjljtbd6-0fHpuqBbrKatruU1ZNqbUFUOo0tzH-Sf6XZvzzyJHWlk4i0MKooQ6PjXYRwO1-nJjZI_a6zaPt6zBQ93c_72QF37a2qyObh4UkC0hJbv3zMTnOeZLGx476Lf1pClTDCnJQFO-a/s1600/Customize.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLl8IiNBHP3YFzvz_td5_atkva6qL9hqTTCcmTqNwUR5w4XS3PFLVVPRsSkpGZs56BhkTMRP0lh_6yKd-NYb6B9lLyDYfEh-SbzNuBJNUvlmEcrSdvjtmgjsYkprlWfzC2Q3dyXKUjgu8B/s1600/Sketches.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZHdQJaITWeIAn7wh-40oxTCghXJRqOclhloq1oDF6ypem2DFGgEarCQKDfsQAYfSWWgIr2ysYVxwG6Vm3wwqJUTPTLfLTYqJ7YohcCg47qlaoep8gZ9F3Yj8-DE45J69RV_Jtqr-R6CV/s1600/Kate.png']});});</script>
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