Tutorial 94 : Jquery Tab Menu.

Assalamualaikum..
Slot tutorial lagi!.
Kali ini nak ajar korang buat Jquery tab menu.


Jquery tab menu ni dapat menjimatkan ruang di blog korang sebab dia nampak compact. Kalau cursor korang sentuh jquery tab menu tu dia akan terbuka sendiri ( jatuh ke bawah ). Jadi blog korang nampak lebih smart.

Contohnya, kalau korang click about me dia akan turun ke bawah dan widget itu akan keluar. Begitu juga dengan widget lain yang berada dalam jquery tab menu.

Cara-caranya :

1. Sign in blogger > Design > Add Gadget > Html/JavaScript

2. Copy code di bawah dan paste ke dalam Html/Java Script

    <style type="text/css">
    h5 {
    font-family: trebuchet-ms, arial, tahoma;
    font-size: 13px;
    padding: 0 0 1em;
    font-weight:bold;
    color: #000000;
    }
    .msg_list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    }
    .msg_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    background-color:#F95EA2;
    margin:1px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    }
    .msg_body {
    padding: 5px 10px 15px;
    background-color:#FFFFFF;
    }
    </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">Tajuk 1</h5>
    <div class="msg_body">
    <center>
    Code/widget Tajuk 1</div>
    <h5 class="msg_head">Tajuk 2</h5>
    <div class="msg_body">
    Code/widget Tajuk 2
    </div>
    <h5 class="msg_head">Tajuk 3</h5>
    <div class="msg_body">
    Code/widget Tajuk 3</div>
    </div>

3. Korang boleh tukar :

#000000 untuk warna font
#F95EA2 untuk background jquery tab
#FFFFFF untuk background body dalam jquery
 Code warna sila ke SINI


Tajuk - Korang punya tajuk  utama cth : about me. bicara, arahan
Code/widget Tajuk - Code widget/Isi yang korang nak tulis dalam jquery. contoh korang boleh letak shoutbox.

Kalau korang nak bentuk macam di atas korang kekalkan code widget tersebut tapi kalau nak bentuk petak ( empat segi ) korang boleh buang code ini :

-moz-border-radius: 35px;
    border-radius: 35px;

4. Save dan tengok hasilnya.

# Ada sesetengah template lambat pick-up widget ni. Dia macam terkeluar semua isi tapi korang jangan  risau. Korang close blog beberapa minit dan try tengok semula..insyaallah menjadi. Selamat mencuba! Try buat dulu eh :)