Assalamu'alaikum...
Selamat pagi semuaaaa..... :) Malas nak cakap mukadimah ni panjang panjang la...pagi ni ada mood nak ajak korang godek godek blog.
Kalau korang perasan, blog aku sekarang lebih kurang baru je selesai buat plastic surgery. Hahahaha...Perasan tak sidemenu bar tepi kiri blog aku seperti yang ditunjukkan contoh kat gambo atas. Actually menatam ni dipanggil Sweet Menu menggunakan codes jquery. Apa dia jquery? Jquery ni sebenarnya one of the Java language. Java language ni pelbagai. Bila dah campo aduk dengan benda alah lain boleh jadik javascript pulak. Macam macam spesis ada. Tapi untuk Sweet Menu ni bukan totally guna javascript semata. Dia guna CSS jugak. CSS pulak doh! CSS pun salah satu language jugak ye. Haaa. Ehhh aku bukan nak cerita pasal coding! Aku pun kongkang bab bab nih! Hehehe...
Macam mana nak buat ni? Haaa meh aku tolong korang yee...
STEP 1:
Of course la korang kena login blogspot korang. Masuk Dashboad. Caik Design.
(Seperti yang aku shot kan untuk korang kat bawah ni)
STEP 2:
Lepas tuuu..korang click pada tab Edit HTML (rasanya korang dah familiar kan part niii..). Aku dengan baik hatinya screenshot kan untuk korang lagi supaya lebih memudahkan korang nak follow.
*Make sure the check box Expand Widget Templates checked
STEP 3:
OK...sekarang part menjulingkan bijik mata korang dah tiba. Bawah check box tu ada satu ruang HTML korang. Bagi yang biasa InsyaAllah tak ada masalah. Bagi yang kurang biasa dan tak biasa, jangan risau. Pelan pelan follow semua steps kat sini pun InsyaAllah boleh :)
Selepas tag <head>, please copy and paste the below codes:
<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'/>
<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'/>
STEP 4:
Lepas tu caik pulak tag ]]></b:skin>
Please copy and paste the below codes under it:
*Korang boleh tuko icon lain dengan cara replace link yang aku italic dan bold tu...tanya Mr.Google..banyak icon yang comey homey...
<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/AVvXsEjt5xOVFPgcfCRn0wIzobdv1G2_rKDQv4qmeZ0XYJK_IqTNfzTJjHs8udoEanfbq2ZLGVGWoOCoOFPpbvJcJTpbHOn1X8UXC9MYFCAYUp7pm2hdKEtQoaX-_fpiFIBLqmwubjA_3Sh7gbal/s1600/2011-02-28_003024.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRXWHA2Cb5FxXIc-ouRNxzv0TjJ6M5x-eNRYMct7G-PjN8kcGTM1t7AB9XpfkCwsrxTSurrRX9joKRNFaUoqMsy2cjfAYDl7JgV90xojXH7JXTHBjEPJI6YB-rVhM3_dnaelQ6IaWR8gHI/s1600/Lockbox.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZac_MwWRxEQbKsBdr00z-370qdNuzlcWTyxcL7cfPhUkKqJk3_YU6b1Kq8k3Jk0kchOl-7D9GfJ8yRkbJEnuFJ5hwN9Q-jGEsRbsWHzAybCxBsWbDb21rMtKeHUszePFYm6lrMkj5Ghfc/s1600/Text.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9nUdeMCLccHVIvAOS8fdqheY5t0eIgcwhP6VCrBCTstLq5aJFYnweB9C8bmSi4JWj1vj9RX8cXlxW-Npbv0SQpynDLgKzJN1ivVVV-ILt03labCVS6eqvCRiThJVnXVYPhRNOnWys658i/s1600/Customize.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRoIHNkAwziX2hVpRmJZ9uoUg6lRetACSduWYv7aJtOvDGOwpSK4QvRONkJjTBYuYl4iuyh2WKW2lbf0k1y92Z_Qx6UCevRYvwxCU893fqTp5mcGY246SG3qo9uiaCDngeMNNcJsrVyWgY/s1600/Sketches.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit7Dckb-mepu9q2T0WuFmxR0FTf5OqNDDjBv0lmWvNyrItkcWFloEsHwiNNy80AmJuhnWHcXmkP8ANIHpiFC-pKYV85rzpOFHaeNqNKbgz75G_2CmhNuV9TazldSmEzI4M9IvUKaKT3k1k/s1600/Kate.png'
]
});
});
</script>
$(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/AVvXsEjt5xOVFPgcfCRn0wIzobdv1G2_rKDQv4qmeZ0XYJK_IqTNfzTJjHs8udoEanfbq2ZLGVGWoOCoOFPpbvJcJTpbHOn1X8UXC9MYFCAYUp7pm2hdKEtQoaX-_fpiFIBLqmwubjA_3Sh7gbal/s1600/2011-02-28_003024.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRXWHA2Cb5FxXIc-ouRNxzv0TjJ6M5x-eNRYMct7G-PjN8kcGTM1t7AB9XpfkCwsrxTSurrRX9joKRNFaUoqMsy2cjfAYDl7JgV90xojXH7JXTHBjEPJI6YB-rVhM3_dnaelQ6IaWR8gHI/s1600/Lockbox.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZac_MwWRxEQbKsBdr00z-370qdNuzlcWTyxcL7cfPhUkKqJk3_YU6b1Kq8k3Jk0kchOl-7D9GfJ8yRkbJEnuFJ5hwN9Q-jGEsRbsWHzAybCxBsWbDb21rMtKeHUszePFYm6lrMkj5Ghfc/s1600/Text.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9nUdeMCLccHVIvAOS8fdqheY5t0eIgcwhP6VCrBCTstLq5aJFYnweB9C8bmSi4JWj1vj9RX8cXlxW-Npbv0SQpynDLgKzJN1ivVVV-ILt03labCVS6eqvCRiThJVnXVYPhRNOnWys658i/s1600/Customize.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRoIHNkAwziX2hVpRmJZ9uoUg6lRetACSduWYv7aJtOvDGOwpSK4QvRONkJjTBYuYl4iuyh2WKW2lbf0k1y92Z_Qx6UCevRYvwxCU893fqTp5mcGY246SG3qo9uiaCDngeMNNcJsrVyWgY/s1600/Sketches.png',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit7Dckb-mepu9q2T0WuFmxR0FTf5OqNDDjBv0lmWvNyrItkcWFloEsHwiNNy80AmJuhnWHcXmkP8ANIHpiFC-pKYV85rzpOFHaeNqNKbgz75G_2CmhNuV9TazldSmEzI4M9IvUKaKT3k1k/s1600/Kate.png'
]
});
});
</script>
STEP 5:
Halamak...aku kata nak letak CSS dulu tadiiii...erkkk lupa! Tapi aku dah malas nak edit. Aku bubuh je lah kat sini ye korang. Harap paham..! Hee~
Sebelum ]]><b/:skin>, letak ni dulu sepatutnya:
.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;
}
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;
}
STEP 6:
Step terakhir. Copy and paste codes ni pulak atas pada </body>.
*Mana mana yang aku bold dan italic, korang leh replace dengan link korang sendiri dengan caption korang sendiri.
*Mana mana yang aku bold dan italic, korang leh replace dengan link korang sendiri dengan caption korang sendiri.
<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>
<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>
Selamat Mencuba! :-P
Credited to:
Amoi Rojak
(yang memperkenalkan aku dengan Sweet Menu)
Adam Becker
(pengasas kepada Sweet Menu - original post)
Cuya
(Nanti ajo para part CSS ok! Hee~)
*Aku dah test dalam Firefox, Opera, Chrome, IE8...Alhamdulillah berfungsi :)
Credited to:
Amoi Rojak
(yang memperkenalkan aku dengan Sweet Menu)
Adam Becker
(pengasas kepada Sweet Menu - original post)
Cuya
(Nanti ajo para part CSS ok! Hee~)
*Aku dah test dalam Firefox, Opera, Chrome, IE8...Alhamdulillah berfungsi :)
ohoo..suda hada kah ini post..den lak menanye terus ke para..dop bace pong..maklum le 2 3 hari ni bz bebeno..arini leh la start balik blog crawling xDD
ReplyDeletehehehe para dah tuko layout..hameekk paling simple xda benda terus! kakakaka...
ReplyDelete