Saturday, May 14, 2011

Tab Menu Accordian( bila cursor sentuh akan terbuka)

Bismillahirrahmanirrahim..

hai korunk...
kali ni ieyza nak share tutorial Tab Menu Accordian..
tahu tak apa tue??hee.. ini dia..



 benda nie la..kebiasaannya ada kat sidebarkan..
bila cursor menyentuh tajuk tab nie . 
dia pun akan terbuka..
and nampak blog lebih kemas kan. xda panjang sangat nak scroll ke bawah kan..
kan korunk suka letak macam2. so, better buat benda ni k.

cara-caranya:

Dashboard > Design > Add Gadget > Html/Javascript

copy code kat bawah ni and paste je k..




<center><style type="text/css">


    h5 {


    font-family: Arial;


    font-size: 11px;


    padding: 0 0 1em;


    font-weight:;


    color: #000000;
-moz-border-radius: 10px 11px;
border-radius: 10px 11px;


    }


    .msg_list {


    list-style: none;


    margin: 0;


    padding: 0;


    width: 100%;


    }


    .msg_head {


    text-align: center;
  margin:1.0em 0 .55em;
border:5px groove #000000;
  -moz-border-radius: 10px 11px;
border-radius: 10px 12px;
  background:url('URL BACKGROUND')
}


    .msg_body {


    padding: 3px 5px 3px;


    background-color:;


    }


    </style>




    <script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>



    <script type="text/javascript">


    $(document).ready(function()


    {


    //hide the all of the element with class msg_body


    $(".msg_body").hide();


    //slides the element with class "msg_body" when paragraph with class "msg_head" is clicked


    $("#firstpane h5.msg_head").click(function()


    {


    $(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");


    });


    //slides the element with class "msg_body" when mouse is over the paragraph


    $("#secondpane h5.msg_head").mouseover(function()


    {


    $(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");


    });


    });


    </script>



    <div class="msg_list" id="secondpane">


    

<h5 class="msg_head">TAB 1</h5>


    <div class="msg_body">

CODE APA2 YANG KORUNK NAK LETAK
    

    </div>

<h5 class="msg_head">TAB 2</h5>


    <div class="msg_body">

CODE APA2 YANG KORUNK NAK LETAK

    </div>

<h5 class="msg_head">TAB 3</h5>


    <div class="msg_body">

CODE APA2 YANG KORUNK NAK LETAK

    </div></div></center>


yang patut korunk tukar:
 warna hijau tu tulisan. letakla nama apa2 tulisan yg korunk nak.
 warna oren tulisan punya saiz.ikut la nak besar or kecik
 warna purple untuk warna tajuk kat tab tu nanti.
 warna aqua tu untuk warna border korunk..
 URL BACKGROUND korunk leh gantikan dengan apa2 
url background yg korunk suka.
 TAB 1,TAB 2, TAB 3 actually tu tajuk untuk tab korunk..
 CODE APA2 YANG KORUNK NAK LETAK ni plak code yg
berkaitan dengan tajuk tab korunk tu.
contoh: kalu korunk nak letak FB korunk.
letak Tajuk FACEBOOK
pastu kat ruang CODE APA2 YANG KORUNK NAK LETAK tu letak la
code html facebook tue.

hope korunk faham. tak faham tanya k.^^
dapatkan code warna kat cnie.--->code warna



da guna hope tinggalkan komen..^^

Photobucket


10 000 kuceng marie:

GamUHU said...

nice. tapi tak sesuai ngan saya. HAHA!

ieyza afieyna said...

hehe.. thanx..
thanx..
ta sesuai? knapa lak?
blog mane2 pun sesuai but kene pndai match colour la..^^

Mazs said...

thank ! dah jadi .. tp tak secantik awk punya .. btw , camna nak letak url background tu ?

NATASYA ASSYIRA MOHAMMAD NAIM said...

thanks awak..saya try n menjadi..
yeahhh..a lot of thanks sbb bt tutorial cam nih..

ieyza afieyna said...

ok. welcome . ;)

iffgayah said...

hi mcm mne nk buat ni
file:///C:/Documents%20and%20Settings/XP/My%20Documents/My%20Pictures/lo.jpg

ieyza afieyna said...

@iffgayah

sory la buat sementara wktu kode nie tak mau menjadi la. xtau la npe. ieyzanye kat sidebar pun tak jadi. aritu okea je. myb ade prob kowt.sory k, t da mau ieyza gtau :)

NoR aiNatul AfifAh said...

akak mcm mane nak letak gmbar dlm tu???

ieyza afieyna said...

@NoR aiNatul AfifAh


adik masuk kan lah code dia.. ;)

nur amila said...

code image ka?cmna nk cri?