Tuesday, June 23, 2009

Jquery Tab Menu Tutorial

Live Preview

hi guys...sorry im late again...got an exams in the last two weeks ,so little busy to create new post...yeah but somehow i managed to finishing the exams(i hope the result in very very goood...:P).
ah i almost forgot...for what reason i am being here...yeah to give you a little trick to beautify our template.look at the screensgot above and the Live Preview too,the name is Jquery TabMenu, cuz we will using jquery again.

in this TabMenu u can put anything (in HTML Of course)like links,comment,shoutbox and many more, and of course...with this tabMenu ur template will be a litle simple ^.^.

Now...Lets Start
Open ur template Edit HTML page....and found this code:

and paste this CSS code above it

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

and again paste this js below

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

NOTE:see the url jquery above that script...Download that and reupload to ur hosting for safety,cuz im not responsible if that file will be deleted from my geocities account

Save ur template and go to page element...add new gadget and choose HTML/javascript
Now the last u need to do....(sigh..finally)
paste this code to it...
» Click to show HTML Code - click again to hide... «

u can change the content if u want(see the Green text),for example i change the comment tab with shoutmix script,save ur gadget if ur finished...and....taraaaaa....enjoy ur tabmenu
Thx To http://www.1stwebdesigner.com
See Other Tutorial
Object Dock Navigation
Tabslide Navigation
Spoiler And Code Tutorial
Horizontal Accordeon Slide Tutorial


  1. sory, sbnrny saya ga mo ngomntarin tulisan anda, saya cmn mau ngjak krja sm bwt naikin PR web/blog qt,,,

    klo anda mau, Copy kode di bawah, dan letakkan di Sidebar blog anda, setelah itu hubungi saya lewat koment ntar saya link balik..

    <a href="http://www.coretandedi.com/" title="Cicks Computer" target="_blank"> <img src="http://www.coretandedi.com/wp-content/uploads/2009/06/coretan-deddy.gif" border="0" alt="Clcks-Computer"></a>

  2. salam knl sobat. mantep blog kamu keren tampilannya. ;)

  3. blognya bgus bgt..
    eh da Ais nya..;))

  4. @E_That
    wah sry y bro...klo banner kekny aq nda bs..cuz klo banner mo d taro dmn lg d sidebar q
    klo mo tukeran link pke link yg byasa aj
    klo berminat bilang aj...tar aq taro linknya d friends link aq :)

    @Awal sholeh & Aisyah
    Thx yah;)

  5. waw.. nice inpoo.. thnks for share yah..
    btw salam knal yah

  6. JOM JOM JOM JOM HEBOH HEBOH ,JOM JOM JOM JOM KE BLOG AKU I AM LEGEND I AM LEGEND http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif

  7. @Wildan
    oke bro...slam knal jg:)

    oke ntar aq mampir bro

    Sama2 bro :D

  8. mantabbbss infonya gan.....kunjungin blog gw gan di


    jangan lupa di follow ya gan blog gw