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 ygberkaitan dengan tajuk tab korunk tu.contoh: kalu korunk nak letak FB korunk.letak Tajuk FACEBOOKpastu kat ruang CODE APA2 YANG KORUNK NAK LETAK tu letak lacode html facebook tue.
hope korunk faham. tak faham tanya k.^^dapatkan code warna kat cnie.--->code warna

da guna hope tinggalkan komen..^^

---