Image Menu Slider.

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

#kwick {background: 000000px;
width:800px;
height:200px;
overflow:hidden;
position:relative;
padding:0;
margin:0pt auto;
}
#kwick ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
display:block;
width:800px;
height:200px;
padding:0;
margin:0px;
}
# .kwicks {
display: block;
height: 200px;
margin: 0px;
}
#kwick li {
float: left;
}
li:after {
content: "";
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 200px;
width: 155px;
/*padding: 10px;*/
background: #000;
/*border-right: 5px solid #000;*/
border-right: 2px solid #000;
}
#kwick .kwick span {
display: none;
}
#kwick .opt2 {
outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzSgaV3WPZeyfAVwM30h9dhWzN8TaGzYZeY1G0O7v3RKamNC7qIZ0eKXpGlwPuiEj6KkNvmYx7-B0JZbe8K3bg5rn-XmWKiYPNG4_SjmVMzfLXMfPxu9-bZsWtfZY9Lw5NzOyl1Xt2jhQ/s1600/roma1.jpg) ;
}
#kwick .opt4 {
outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9qrgjf-a1H_yoVA8ZoQC9zmi6fNJg3jojrEAW18b38rumB-8XX47myNeUbwv4iXZVLvci_Ww27fYs5QAamAca5FqbjQraOzmtk-j4RMC8t4owvgHdcTOHL_05bETSpXIV9XMAPvfcU9E/s1600/roma2.jpg);
}
#kwick .opt5 {
outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-aOvLvDcn6uBsicqwd3DShGOciL_vYE5DfdbsJ-z3nhN04wvUoBGO3ZEFqvdVstUidcEi43-84w0MTPgF47qDTosZMpWSlE3OCVUw8C8_A9wVEaGLIo4zG3X4c7nLecHIZejdpWdjaFY/s1600/roma3.jpg);
}
#kwick .opt3 {
outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVL06m3brfgr1czLZIs8tGFukEgTlDErFi7zQTC_oOwGC8j7OJRgVGeTo-borfe1GvYKuW4hGb6S7V0139ZCJdZ2r9NADQlX3eCO_TgJn3ufXlHUsGFxXJgZFoOpX8KN20KKRg9D6EV8U/s1600/roma4.jpg);
}
#kwick .opt1{
outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9Gm8fiUgSPF5dO16TKytYgNBD48-8ezt_nWJpFSQNlUW-IqurJcfxhkz2Wk5UgBQoBi2YzhhvJ8BngGTzsHWJJG6t4sFXoEa_dHLvhL4RqLGmFhNzYCd4_0vZLcOZF3QepijYw8G-qU/s1600/roma5.jpg);
border-right:1;
}

7. Cari kod ini sekali lagi.

]]></b:skin>

8. Copy kod di bawah dan letakkan di bawah kod tadi.

<script src='http://cdn.bitbucket.org/mr2r/r2r/downloads/mootools124.js' type='text/javascript'/>
<script src='http://cdn.bitbucket.org/mr2r/r2r/downloads/imageMenu.js' type='text/javascript'/>

9. Cari kod ini.

<div id='header-wrapper'>

10. Langkah terakhir copy kod di bawah dan letakkan di bawah kod tadi.

<div id='kwick'>
<ul class='kwicks'>
<li><a class='tipz kwick opt1' href='http://syamzone-bloguntukaku.blogspot.com/' title='Home::Done browsing? Return to the main page...'></a></li>
<li><a class='tipz kwick opt2' href='http://syamzone.blogspot.com/2009/03/membuat-link-exchange-box.html' title='Blogroll::On a reading mood? Visit my blog buddies...'></a></li>
<li><a class='tipz kwick opt3' href='http://twitter.com/bloguntukaku' title='Twitter::Are you also on Twitter?...'></a></li>
<li><a class='tipz kwick opt4' href='https://friendfeed.com/syamzone' title='FAQ::About me and answers to the most frequently asked questions'></a></li>
<li><a class='tipz kwick opt5' href='mailto:ymsgr:sendIM?syamzone@rocketmail.com' title='Contact::Thank you for visiting. Questions? Contact me...'></a></li></ul>
</div>
<script type='text/javascript'>
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:450});
</script>

Perhatian !!! Gantikan text/kod yang berwarna merah.

Sumber/Demo Teblet Desk.

READ MORE...