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

SHARE:

25 comments

  1. code tu nak dpt dekat mane ekh ?

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

    ReplyDelete
  3. @cik najihah

    pastikan dia punya lebar widget tu di kecilkan

    ReplyDelete
  4. @Yellow Scarf

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

    ReplyDelete
  5. alhamdulilah ,.. thanx akak :)

    ReplyDelete
  6. 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
  7. mcm mne nk dpay about me pnye code/widget????

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

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

    ReplyDelete
  10. @emira

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

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

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

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

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

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

    ReplyDelete
  16. akak. mcm mana nak letak link ?

    ReplyDelete
  17. @Cik Lyza Dah jadi tapi tak sama dalam gambar :(

    ReplyDelete
  18. 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 :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH