Skip to main content

tutorial: cara nak buat tab menu drop down (bila diesntuh cursor, tab menu terus jatuh ke bwh)

Tutorial: suka tak ada tab menu yang unik camni?hehe..kalau kurang jelas, sila gerakkan cursor ke sebelah gadget Butterfly kat sebelah kiri ni, kemudian biarkan cursor tu menyentuh menu-menu, jatuh ke bawah tak?jatuh kan?nak buat camtu tak?mehh saya kongsi tutorial cara nak buat tab menu drop down camtu..ada tutorial yg saya jumpa, tak boleh nak letak menu banyak-banyak, kalau letak nanti tak menjadik..tapi saya dah jumpa tutorial yg boleh letak jumlah menu yg kita nak. banyak2 pun takpa hehe credit to blog Suzuran89 !!

1. Login blogspot> Dashboard> Design> Page Element> Add Gadget> HTML/script

2. Tekan Ctrl+C (tekan serentak Ctrl dan huruf 'C' pada keyboard) untuk copy kod di bawah:

    <style type="text/css">
    h5 {
    font-family: trebuchet-ms, arial, tahoma;
    font-size: 13px;
    padding: 0 0 1em;
    font-weight:bold;
    color: #ffffff;
    }
    .msg_list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    }
    .msg_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    background-color:#6A287E;
    margin:1px;
    }
    .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">TITLE 1</h5>
    <div class="msg_body">

    MASUK KOD HTML/SCRIPT
    </div>

    <h5 class="msg_head">TITLE 2</h5>
    <div class="msg_body">

    MASUK KOD HTML/SCRIPT

    </div>

    <h5 class="msg_head">TITLE 3</h5>
    <div class="msg_body">

    MASUK KOD HTML/SCRIPT
    </div>
    </div>
 
MASUK KOD HTML/SCRIPT: kod html/script contohnya kod twitter button atau url link website
TITLE 1,2,3: tajuk untuk tab menu
warna hijau: warna untuk font tajuk menu
warna kuning: warna untuk background tempat kod ditampal
warna ungu: warna untuk background tajuk menu
untuk dapatkan kod warna yg lain, klik SINI.

3. kemudian, paste kan kod di atas tadi di gadget HTML/script dan save !!

4. kalau nak tab menu lebih dari tiga, boleh tambah kod di bawah selepas tab menu ketiga:

<h5 class="msg_head">TAJUK 4</h5>
<div class="msg_body">

MASUK KOD HTML/SCRIPT

</div>

<h5 class="msg_head">TAJUK 5</h5>
<div class="msg_body">

MASUK KOD HTML/SCRIPT

</div>
SELAMAT MENCUBA yeahhh :)
saya belajar tutorial ni dari SINI.

Comments

HonEyBuNNy said…
banyaknya coding....hehe...orang malas cm ila bila tengok dah fening2...ingat nak tukar layout,tp malas gila...biarkn klasik cm tu je..ihih
atiey azha said…
mak aih . panjangnye tajuk dear .. hehee ..
[sutera kasih] said…
@honeybunny: hehe tak byk tu..mungkin sbb saiz font tu bsr sgt..tu lah nmpk pjg hehe..layout ila yg skrg ni pun ok dah, nice bah soft brown :)
[sutera kasih] said…
@atiey: takut org tak fhm hihihi
Redbloodsnow said…
eee menarik tok yang, ada masa lak...kelak kak zie try polah ^_-
[sutera kasih] said…
@sis zie: hehe kelak ktk try k..menjimatkan space :)
tq. dh lama carik tutorial neyh. :)
[sutera kasih] said…
@Cik Khairyyna :): selamat mencuba, saya pun blaja tuto dr blog lain, so sy share :)
aduhh ! panjang sangat ! saked mate ! pening kepale , , susah lah nak buat . . :(
[sutera kasih] said…
@budak kechik sengal: sakit mata ekk dekk..ciannya, adik try klik SINI kt atas tu, maybe tuto dia, adik sng nk fhm :)
adeek said…
ala nak cube tapi x geti main gan kod2 nie la...
nur shahrina said…
x jadi lah ..saya dah masuk kan kod tapi ... x jadi ??? macam mane eh ??
.:: Schaz ::. said…
xjdik la. sbb benda tu statik je. ble sentuh x naek atau turun.

Popular posts from this blog

TIPS RUNCINGKAN DAGU DAN KURUSKAN PIPI DENGAN MUDAH

Bentuk-bentuk muka sumber: Google Image
PIPI DAN DAGU. Kedua-duanya saling berkaitan dan selalu menjadi masalah utama kepada wanita. Saya pun mengalaminya haha. Kita ni kan para wanita, memang paling pantang bila orang tegur bahagian pipi dan double chin iaitu bawah dagu kita. Betul tak? Jangan tipu jangan bohong. Biasalah, kita semua ni mahu sentiasa cantik dan indah di pandangan mata manusia lain terutamanya di mata orang yang kita sayang, lagi-lagi bagi yang sudah berkahwin mestilah nak sedapkan mata suami masing-masing. Kalau ada 'boyfriend belum sah taraf' (bukan suami sah) dah memandai tegur kau tu gemuk atau perut buncit atau pipi tembam dan sewaktu dengannya, janganlah kecil hati sangat. Maksudnya, dia belum dapat nak terima kau seadanya, kau suruh saja dia cari perempuan cantik sempurna yang boleh 'kenyangkan' mata dia haha. Rileks lah, ingat janji Allah Taala, setiap kita punya jodoh yang baik dan boleh terima kau seadanya. Oyeahhh ! Nak cerita pasal tips pipi …