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.

<br /> #kwick {background: 000000px;<br /> width:800px;<br /> height:200px;<br /> overflow:hidden;<br /> position:relative;<br /> padding:0;<br /> margin:0pt auto;<br /> }<br /> #kwick ul {<br /> list-style-image:none;<br /> list-style-position:outside;<br /> list-style-type:none;<br /> display:block;<br /> width:800px;<br /> height:200px;<br /> padding:0;<br /> margin:0px;<br /> }<br /> # .kwicks {<br /> display: block;<br /> height: 200px;<br /> margin: 0px;<br /> }<br /> #kwick li {<br /> float: left;<br /> }<br /> li:after {<br /> content: "";<br /> }<br /> #kwick .kwick {<br /> display: block;<br /> cursor: pointer;<br /> overflow: hidden;<br /> height: 200px;<br /> width: 155px;<br /> /*padding: 10px;*/<br /> background: #000;<br /> /*border-right: 5px solid #000;*/<br /> border-right: 2px solid #000;<br /> }<br /> #kwick .kwick span {<br /> display: none;<br /> }<br /> #kwick .opt2 {<br /> outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEzfcPYu9MEZ7uy3Jg0DTnTGxAncEL_IX3WDQnS0A02ULfORbwqHNNikQcWb63zBB6wnxSGdcr1ULl4hMZUbFg2_5aWRNinWqZU8ne94H36tKWq0GZFS9eO0iBZSvo6wEm_UZgoZ-PU50/s1600/roma1.jpg) ;<br /> }<br /> #kwick .opt4 {<br /> outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMMsqybqidK9oSLuQIEv1_19XxgE5mfkewKuFJ703SzlXz2YARnLXDqnlQg2ThCCG1XEixd6tMyS8dBCEROdwZlxYdK5dOplYDK-NKOeDL3a9VQIEm8hroknwPyKTP_xMo89nwdrdFAxY/s1600/roma2.jpg);<br /> }<br /> #kwick .opt5 {<br /> outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDAkRj9ZCUdNVAmfUVHAmDO4lzeiGV_WnTxW2AVu0GUJOf1SpzZYx5IeTWJIlvsM98hkf8I0LzC0NXmfLBAisfD5KOckajNoBJFayMbMYxLHBge-T9fbH9xOvpQD5-N9I_0QuQqbPaMI/s1600/roma3.jpg);<br /> }<br /> #kwick .opt3 {<br /> outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjazlFV7lMHRzUx_V0itVaPorLfKox4_VgCk6iuNxceBuryhxco-YvnS6IMKeLyFl4E6xy3YlQLfOWJmUUJ-2e2ulag-mKtXbLirhIihbT4Oteq8uxYZ_cKd5vwP2yIcpt_mOrP5mu6RVQ/s1600/roma4.jpg);<br /> }<br /> #kwick .opt1{<br /> outline: 0; background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2eNovxWH-kITtTrk9uiedmQyP2N-ECHmdNd30GG2OQLWI9tlvz59WnrmpIGM5b7EJHO2OfMJe_vDbnz_GIUYRamxpte5VOFRySQCHWn1RREskM9zaZSBA5v3oZI0tdndMr8J8P4ReB3g/s1600/roma5.jpg);<br /> border-right:1;<br /> }<br />

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.