Sunday, August 14, 2011

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 :)

26 comments:

  1. kak..apesal sy buat like box fb tu die kelua separuh je ek?
    ke mmg cmtu mule2?

    ReplyDelete
  2. @cik najihah

    pastikan dia punya lebar widget tu di kecilkan

    ReplyDelete
  3. @Yellow Scarf

    cth mcm top comentar, gambar, ucapan..mana2 widget y suka..or clock widget..bileh cr di adi widget

    ReplyDelete
  4. akk, saya dah try buat, tp lambat sgt dia nak tutup. even saya dah try close dia balik. tp dia tetap terbuka. mcmana ek?

    ReplyDelete
  5. mcm mne nk dpay about me pnye code/widget????

    ReplyDelete
  6. kak , kenape saye buat .
    dye terkeluar semua isi =__=
    heee ~

    ReplyDelete
  7. Akak, saya punya kenapa keluar semua? Ke ada yang saya salah buat :/

    ReplyDelete
  8. @emira

    Biarkan ia seketika, kalau still mcm tu mybe ada y silap

    ReplyDelete
  9. @Yellow Scarf
    kenapa saya buat ..bila cursor touch xnak turun.. how?

    ReplyDelete
  10. @Yellow Scarf
    kenapa saya buat ..bila cursor touch xnak turun.. how?

    ReplyDelete
  11. @Yellow Scarf
    kenapa saya buat ..bila cursor touch xnak turun.. how?

    ReplyDelete
  12. Assalamualaikum.. nak tnya.. knp sya buat tutorial 94 nie.. bile touch dgn cursor xnak trun pun... ? tolong plss

    ReplyDelete
  13. cik farah..
    belog saya tu nak ikut toturial yang mn satu kalo nak bagi ada link kat atas header tu...help me???plssssss... :(

    ReplyDelete
  14. Dah jadi tapi tak sama dalm gambar :(
    http://fairytaledream-cometrue.blogspot.com

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Terima kasih lepak sini, nanti datang lagi yer..
Sayang Korang...





Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2016 Blog Cik Nurfarah. All Rights Reserved. Designed by Blog Cik Nurfarah.