Saturday, June 13, 2009

Horizontal Accordeon Slide Tutorial



Live Preview
sorry guys...for not being able to post a new one back there...im a litle busy these few days,but im back right now :D...of course with the new one :))

this time i will teach you to make a Horizontal accordeon slide....
acctualy i got this Tutorial after surfing in this cyber world hehehe ,and right now i will share it what i've got to you
see the screenshot above if you want to know what it is...and the Live Preview included of course ^.^,see it up there too.
Features :
* handle aligned to the left
* animation is opening and closing content at the same time
* event trigger is mouse over
* cycling every 10 seconds from 1 to 4 and than from 4 to 1
* new event will only be allowed, once the first animation completed

Ok Lets begin....

First Paste This Css Code, above this Code

» Click to show CSS Code - click again to hide... «


Now For the JavaScript,Paste This Code Below


<script src='http://www.geocities.com/ziegey_clonesphare/jquery-1.3.2.js' type='text/javascript'/>

<script src='http://www.geocities.com/ziegey_clonesphare/jquery.easing.1.3.js' type='text/javascript'/>

<script src='http://www.geocities.com/ziegey_clonesphare/jquery.hrzAccordion.js' type='text/javascript'/>

<script src='http://www.geocities.com/ziegey_clonesphare/jquery.hrzAccordion.examples.js' type='text/javascript'/>



NOTE:you see js file URL right?? I suggest you download that file and reupload to your filehosting ,because im not responsible if that file removed from my account


Now The Last Thing you need to do...
Paste This Script Below

» Click to show Script Code - click again to hide... «




NOTE:If in your Header already had a widget then paste the code after </div> tag
Change As Needed...Text With Blue Color is Image Url,Text With Red Color Is Title For The Content,And with green color is the slide content

Ok Guys Thats all...(huff really tired after this)
Thx To http://www.1stwebdesigner.com
See Other Tutorial
Object Dock Navigation
Tabslide Navigation
Spoiler And Code Tutorial

15 comments:

  1. tip keren sob.....semangat ya....

    ReplyDelete
  2. makasih sob infonya...salam sukses slalu sob...bermanfaat

    ReplyDelete
  3. @rae_zen & Sastrocaster

    Thx sob..makasih yah dah mw mampir n ninggalin pesen :D

    @Dani
    Ok Sob pasang aj dlu link q...tar konfirmasi lg ksini...tar lngsung aq psang koq :)

    ReplyDelete
  4. mantaaaab sob blognya....
    aku ambil ya oleh-olehnya

    ReplyDelete
  5. morning friend...$$$mile for you in today please visiting to my blog..ok

    ReplyDelete
  6. @Agus
    Oke sob...monggo d ambil aj;;)

    @Erwin
    siip win 8-}

    @esurance
    ok...just wait:D

    ReplyDelete
  7. good morning, happy to run a successful activity always

    ReplyDelete
  8. good. copying now for my future reference. thanks for this pal.

    ReplyDelete
  9. nice blog.. thanks for yuor visiting me... succes forn u

    ReplyDelete
  10. @Reality ,Hill,Rusli
    Thx Buddy;)

    @Seri
    ur welcome buddy:D

    ReplyDelete
  11. infonya manfaat banget sob buat newbie kayak aku, makasih ya

    ReplyDelete

.