Hey hey hey!
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.
Lepas tu copy paste coding bawah ni plak selepas ]]></b:skin><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'/>
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.
Lepas tu copy paste coding bawah ni sebelum ]]></b:skin><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/AVvXsEjbkf6VKeqqUjeQxzi2jvm4TOTfpwJeOMF8yIhsUF5zBX5-At5RWqUTGDvygFPzCfhmK0zmjZtTgkE-2nlalxeIBX_sdfrzxCSBi9jM2qgufJMSy6Q_Z4r8XvIdkCTUpBPD_99p57BdnYUT/s1600/2011-02-28_003024.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdXFSLIwboeIQ_KEbt35ABHYmJ-E8nxx3oRcEXG93bb28p9gAeY9Z7UKSu_aVFVnr2s4n-LXHh-bfvRVLI3W6sbYKndVi3hlgl4qVToBw8D-QUYBXFXMKURMygRFcJjW8Te3qdNYmB17T/s1600/Lockbox.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSP-I-IkEoeEC_1omxlrmjHQ3mbomq-QADNLCaiQt56TUa2IFr2NWW13e64K_r9I1EQo5HNgpjSa8X-XnpfQYjcKdVjqffbr0hiRCOQbGoQn3ovriISsFashtGNt0txqBic2gYD7kWyZ0_/s1600/Text.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYanuSpfwXmyG7xsgOXr88YxRvqSPqM2N43C16dWSoQ5QalKhyphenhyphenJFh88QCxHwpCFSJxwdPJMMu96iljNweO8f8945mTii8V4j3q2DdGGfUUc5OMQCQkCko2aOTR60Y6d74VF1xOD6RlnbhJ/s1600/Customize.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjab6HGlzTmfQbQJNzvhZDhvM4WVaFBcwWcO0-UVw4eSzLohTLXy7w1fW7wit8VgC8fmblt1mtsfv66nAGK2VSw6hGmMHq2I3kYqkMOzG4uUbljTijgVEP3TrrWnV9F2lq98jSzVbOdrEfF/s1600/Sketches.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAEC2D7BI5HY156pPbS7vHp8xZSn2gVk4tF0kmqG4AGi4vNitopiCzaTImCFHwGdZYeh7KUucrKdzBt8mC5JBNo_G2vxnVIqA5ncmR3KVLZK-MzqvbEMd4QI2UjCHTAWVsE0z_lEuFjsxy/s1600/Kate.png'
]
});
});
</script>
Ini sebenarnya bahagian CSS lah. Kalau kau pandai CSS boleh lah edit sini.
Ini last step. Copy paste coding bawah ni betul betul atas </body>.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;
}
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.
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.<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>
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.
Tidak ada komentar:
Posting Komentar