Memasang Jquery Sweet Menu Pada Blog sumber: Klik Tujuh

Home »Jquery,TUTORIAL»Memasang Jquery Sweet Menu Pada Blog

Memasang Jquery Sweet Menu Pada Blog

Posted on 12:36 PM by Damar Yosa Aji

Hari ini aku akan tulis satu tutorial blogspot. Khas untuk template daripada blogspot. Side menu di belah kiri blog ni sebenarnya nama dia Sweet Menu. Bukan aku yang memandai kasi nama tu tau. Pencipta dia yang bagi nama itu. Kredit kepada Adam Becker for the jqeury sweet menu :D ! Aku galakkan template minima dipercubakan dalam tutorial ini.

Kalau nak tengok original demo daripada Adam Becker ni kau boleh view kat sini tau !

Mula mula kerja pertama mesti lah login Dashboard. Lepas tu masuk Design. Lepas tu Edit HTML dah akhir sekali tick pada Expand Widget Templates.

Lepas tu copy paste coding bawah ni selepas <head> ye.

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

Lepas tu copy paste coding bawah ni plak selepas ]]></b:skin>

Yang aku kalerkan dengan kaler hijau tu ialah direct link gambar icon kecik kecik tu nanti. Kalau kau ada icon lain nak letak kau gantikan je dengan link kaler hijau okey.

    <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: [
    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjgn1F0uNrW6ndujfwFNCLo83_uZgMxLSEiYgen2X3T-MGoUKJ2b1jLXcC_e3ZflgUw_TMQThyphenhyphenNINaz-TVHdyc4UYvHKVOiMzj_65qBO58B_a2qt98kI4JD59Sh6JSvT4IRSxFVIStPbJX/s1600/2011-02-28_003024.png',

    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaN3Fx4DpoHgNgB61SSN7qvnOnBxCpIe-kZuGv03lVGvNEcZaIkRewFosmSaLFT2mLxzxDNQGzcu480BAmRBh9lGNMMTHHDGFMvsb33f-7lNkh5VVoe493lMve90yaVpAfCedfyWUaUzIL/s1600/Lockbox.png',

    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNib9kq3l4VVz2ykmV-XiVN0384ILIkxKbBsX328loHIozqWqO13hhMFIU6-Zr8NYAPUzwx_nn0_7h7u8CsUj3kdblN2kys5MlE7eQg80gRAS2bJHXm_CzN-R_VxaS9EjVqcTQiPG2_9c8/s1600/Text.png',

    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijwbhskpmC41eC7Px-TjRZnuzCfrlUJobuT9duSL-ZBiH64QMq1fFkJ6TQtMCO5bnLmexk3yxwBRzv_p_hgzGP4vshv22PjtmVWbx1hehpeXAEvwm04RWkgbyGHAKXjhZ4mvbRPfQ_LHAL/s1600/Customize.png',

    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq7sVSKdWhuECa2ou9xlNt739R9al9nsIULTj7yL0aXzOIEL3Gpai_r4VsXlZaH2nEm6Q2tjxIh44nVF4dIq2Yi6AYPAPFwKa4XU9nbGg7Pv0zEC8It7A318qS7zS18ETDVaqfXclZfoZp/s1600/Sketches.png',

    'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6y40PTGDncPPm8FmNJp8pr6OkB1jNx3ks2xpd2-tAwoxjbIhDDojjgunXc7Yu8JL0gIsPF3Nz3wu_a4WN0glkFBFcbJTBVI1n4YhdcBWS5lJ2au3XTXvTiPRuJuKUG3jEjlm_2wzAddVK/s1600/Kate.png'
    ]
    });
    });
    </script>

Lepas tu copy paste coding bawah ni sebelum ]]></b:skin>

Ini sebenarnya bahagian CSS lah. Kalau kau pandai CSS boleh lah edit sini.

    .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;
    }

Ini last step. Copy paste coding bawah ni betul betul atas </body>

Yang aku kaler kan pakai merah kau ubah je link dia kepada link yang kau mahukan dan kaler purple tu ialah tajuk untuk display link kau.

    <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://linky-linko.blogspot.com/' target='_blank' >Links</a></li>

    <li><a href='http://rojakstory.blogspot.com/2009/08/banner.html' target='_blank' >Comel</a></li>

    <li><a href='http://rojakstory.blogspot.com/2007/05/disclaimer.html' target='_blank' >Disclaimer</a></li>

    <li><a href='http://rojakstory.blogspot.com/2007/12/about.html' target='_blank' >About</a></li>

    </div>

Lepas template kau dah ada semua coding ni semua kau preview dulu tau. Dah preview dah tengok hasilnya. Puas hati? Save Template sekarang jugak! Sangat cantik dilihat pada browser Firefox 2+ , Chrome dan Opera. Browser lain aku tak pasti macam mana hasilnya.

Sebenarnya kalau kau search jquery menu bar pun memang banyak lagi menu bar yang lagi cantik dihasilkan menggunakan jquery. Tak susah nak letak coding dia dalam blog selagi programmer tu ada sediakan coding jquery , css dan juga HTML dia. :D!

Untuk icon dia aku guna Android Icon kot. Tak ingat sangat.

Klik Tujuh