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 this PostPin ThisEmail ThisShare on Google PlusShare on Tumblr
26 Comments for "Tutorial 94 : Jquery Tab Menu."

code tu nak dpt dekat mane ekh ?

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

@cik najihah

pastikan dia punya lebar widget tu di kecilkan

where I can find the widget code?

where can I find the widget code?

@Yellow Scarf

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

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

mcm mne nk dpay about me pnye code/widget????

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

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

@emira

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

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

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

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

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

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

akak. mcm mana nak letak link ?

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

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)
Pesanan:
Anda tidak dibenarkan sama sekali mengambil/menyalin/menyimpan/print screen mana-mana kandungan blog ini kecuali atas keizinan tuan punya blog. Tuan punya blog tidak teragak-agak untuk mengambil tindakan undang-undang jika hak persendirian ini dilanggar.

Pendapat penulis tidak semestinya kekal.
Cik Nurfarah

Related Posts Plugin for WordPress, Blogger...
Back To Top