Image Menu Slider.

Trik Blog

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.

Malaysia Blogger Hack

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(http://3.bp.blogspot.com/_izLr6S52mh8/S7vBz5yKu-I/AAAAAAAAADM/xNIMS5irHsk/s1600/roma1.jpg) ;
}
#kwick .opt4 {
outline: 0; background: #000000 url(http://3.bp.blogspot.com/_izLr6S52mh8/S7vB9SfIxRI/AAAAAAAAADU/7s_4aI7HiE4/s1600/roma2.jpg);
}
#kwick .opt5 {
outline: 0; background: #000000 url(http://4.bp.blogspot.com/_izLr6S52mh8/S7vCFdq9_VI/AAAAAAAAADc/14K3q7a1XkE/s1600/roma3.jpg);
}
#kwick .opt3 {
outline: 0; background: #000000 url(http://3.bp.blogspot.com/_izLr6S52mh8/S7vCM3gSscI/AAAAAAAAADk/ZaMgaQT57Ss/s1600/roma4.jpg);
}
#kwick .opt1{
outline: 0; background: #000000 url(http://2.bp.blogspot.com/_izLr6S52mh8/S7vCS_eR-eI/AAAAAAAAADs/vIvwQphNWUw/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.

9 comments:

Affan Ruslan said...

Salam.
Alhamdulillah.

Bro, tq banyak2.

Affan Ruslan said...

Erk, saya cuba try.
Alhamdulillah jadi.
Tapi position die mcm mana nk adjust?

Kalau boleh saya nk cuba letak bwh bar panjang tu yg ada menu, contact me sume tu.

Cuba tgk kat blog contoh saya http://contohdemo.blogspot.com/

SyamZone™ said...

@Affan : Try letak bwh kod ni <div id='navigator'>
<ul>
<li><a href='http://contohdemo.blogspot.com/'>Home</a></li>
<li class='page_item'><a href='http://affanruslan.blogspot.com/2009/05/contact-me.html' title='Contact Me'>Contact Me</a></li>
<li class='page_item'><a href='http://www.blogger.com' title='Blogger'>Blogger</a></li>
<li class='page_item'><a href='http://www.bloggertemplatesfree.com'>Download Blogger Templates</a></li>
</ul>
</div>

Affan Ruslan said...

Alhamdulillah ok menjadi.

Saya cuba design sket, try tukar background tu jadi (yg ni saya refer dlm original template):

background:url(http://dl.dropbox.com/u/1024578/Template/header_loop.jpg) repeat-y;

err, tapi mcm tak ubah pape pun?

Cmna nk buat jd cmni?
http://dl.dropbox.com/u/1024578/Template/nice-temp.png

Hotels in Venice said...

I really like this theme. I have never seen any blog theme which support the menus like this one. I am happy to find the image scroll menu. Thanks for posting it.

free enterprise software said...

These menu slider are really great for your blog..its feature is so attractive..all complicated steps for using this you explain so clearly...i never used this kind of things before ..ill try it now..thank u

gallery67 said...

Attractive color combination of your theme,I like it and forward to my friends,thanks.

wilhelmina said...

nice..but, i would like to put this, under header..
how can i adjust its position??
can u help me??

phen375 buy said...

I am very much pleased with the contents you have mentioned. I enjoyed every little bit part of it.
It contains truly information. I want to thank you for this informative read; I really appreciate sharing this great.

Post a Comment