<data:blog.pageTitle/>

Assalamualaikum... Hari ni saya nak share satu ilmu yang agak canggih bagi diri saya yang tak berapa nak reti IT ni..Hehehe... Iaitu cara nak buat DROP-DOWN MENU.. Apa itu Drop-Down Menu? List menu makanan ker...hehhe... Tengok gambar kat bawah contoh Drop-Down Menu kat blog saya..

Ni lah contoh drop-down menu..yang saya bulat merah tu.. Nampak macam canggih jer sket blog ambo ni... Contoh dalam blog saya ni; saya buat drop down menu untuk SENARAI PRODUK yang ada 3 pulak OPTION iaitu Vitamin, Penjagaan Muka dan Kediaman. Sape nak order vitamin boleh kontek saya yer.. Opppsss...sempat lagi promote.. hehe..

Ok...STOP MELALUT jap.. Continue sambung cara nak buat DROP-DOWN MENU ni yer...

PART ONE

First skali... Add a Gadget Untuk HTML/JAVASCRIPT kat bahagian Layout.

Dari blog kita, choose Layout >> Add A Gadget >> HTML/JavaScript

Gambar ni yang saya dah add widget untuk HTML/JAVASCRIPT.. Kita nak main dengan coding sikit untuk buat DropDown Menu ni..

Sebelum tu, meh kita tengok dan familiar dengan coding ni. Tak payah copy Paste lagi yer.. Pahamkan jer dulu dengan sruktur coding ni..

<li><a href='LINK'>TabName1</a></li>

<li><a href='LINK'>TabName2</a></li>

<li><a href='LINK'>TabName3</a></li>

<li><a href='LINK'>TabName4</a></li>

</ul>

</div>

Coding kat atas ni berikan kita Basic set of Tabs, yang displayed dalam horizontal row. Untuk buat submenu items, iaitu yang drop down menu tu, kita kena tambah sedikit kod kat dalam “TabName” yang mane yang kita nak tambah. Sedikit coding yang kita nak tambah tu adalah seperti dalam gambar kat bawah ni.

<ul>

<li><a href='LINK'>DropDownName1</a></li>

<li><a href='LINK'>DropDownName2</a></li>

<li><a href='LINK'>DropDownName3</a></li>

</ul>

Perasan tak, 3 lines yang kat atas ni sebenarnya sama sahaja? Contoh coding kat atas ni akan berikan kita 3 pilihan @ options untuk drop down menu. Kalo kita nak 2 sahaja option, just delete satu line tu jer.. kalo nak 4 ke 5ker, just tambah line tu yer.

Contohnye sekarang kita nak buat dropdown menu kat TabName4. Yang TabName 1, TabName2, TabName3 tu kita tak payah buat dropdown menu ek.. Ni contoh jer yer.. Untuk mudahkan uolls paham dulu..

So, sekarang kita nak tambah extra coding kat TabName4. Tapi, INGAT yer.. EXTRA LINES yang kita nak letak tu just before the closing </li> of TabName4.

Sekarang ni, Coding yang kita nak letak kat dalam Add Widget HTML/JAVASCRIPT tu akan jadi macam ni ( coding yang saya letak kat TabName4, saya highlitekan KALER MERAH supaya uolls boleh tengok macam mane coding tu diletakkan bersama yer)

<li><a href='LINK'>DropDownName1</a></li>

<li><a href='LINK'>DropDownName2</a></li>

<li><a href='LINK'>DropDownName3</a></li>

<li><a href='LINK'>TabName4</a>

<ul>

<li><a href='LINK'>DropDownName1</a></li>

<li><a href='LINK'>DropDownName2</a></li>

<li><a href='LINK'>DropDownName3</a></li>

</ul>

</li>

</ul>

</div>

Gantikan perkataan LINK itu dengan direct hyperlink dari blog kita atau entry post kita yang kita nak.

PART TWO

Bahagian kedua ni agak scary sikit. HEHHEH... Daripada blog control panel kita tu, pilih TEMPLATE.

Dekat bahagian atas belah kanan, click “BACKUP/RESTORE” button. Download backup untuk current template kita, in case something goes wrong. Mane tau kan.. Main dengan coding ni. Kalo salah letak sikit pengsan ler.

Sekarang, bila dah backup Template, click ‘Edit HTML” button (under “Live on Blog”)

Tapi kene pilih yang Picture punye Template tau. Macam yang kat bawah ni. Sebab kalau guna yang lain memang tak keluar. Saya dah godek2 dah.

Sekarang dah keluar coding banyak2 kan.. ade kaler merah, hijau, biru semua tu kan. Tengok nombor2 kat sebelah kiri. Tu untuk tau kat line mane coding tu diletakkan. Senang nak cari.. tak payah kira line ke brape.

Sekarang cari line yang ada tulis:

<b:skin>…</b:skin>

(Dalam template saya, coding tu duk line 13, kadang-kadang berbeza sket. Tapi dekat dekat tu jer. Cari ek).Pastu CLICK kat dotdotdot tu.

Bila Click ... tu, sekarang die akan keluar lagi banyak coding. Jangan kalut... sabar2...tapi be extra careful jangan pulak tersalah delete pulak. Kang anak duk main laptop tengok2 coding semua hilang.

Coding yang keluar tu kaler BIRU kan.

Scroll down, pastu cari coding yang dah start tukar kaler dari kaler BIRU kepada KALER HIJAU. Masa tu uolls akan jumpa satu line coding tulis macam ni

]]></b:skin>

Kalau dah jumpe, nanti Copy dan Paste coding yang saya letak kat bawah ni SEBELUM coding ni tau ]]></b:skin>

/*-------- Begin Drop Down Menu -------*/

#menubar {
    background-color: transparent;
    width: 840px;
    color: #424338;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid ##8C001A;
        height:35px;
}

#menus {
    margin: 0;
    padding: 0;
}

#menus ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menus li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:0px solid #1A6680;
        border-right:0px solid #1A6680;
        height:auto;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #FFFFFF; /* This changes the text color of visited links. */
    display: block;
   font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 5;
           /* change margin value to 0 if you want no space between tabs */
           /* change 14 to another number to increase or reduce font size */
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

#menus li a:hover, #menus li a:active {
    background: #424338; /* This is the main menu background color when a user hovers. */
    color: #FFFFFF; /* This changes the text color. */
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
}

#menus li {
    float: left;
    padding: 0;
}

#menus li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}

#menus li ul a {
    width: 140px;
}

#menus li ul ul {
    margin: -25px 0 0 160px;
}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
    left: -999em;
}

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li

li.sfhover ul, #menus li li li.sfhover ul {
    left: auto;
}

#menus li:hover, #menus li.sfhover {
    position: static;
}

#menus li li a, #menus li li a:link, #menus li li a:visited {
    background: #424338; /* This is the background color for the drop down menu. */
    width: 120px;
    color: #FFFFFF; /* This changes the text color. */
    display: block;
    font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
               /* change 14 to another number to increase or reduce font size */
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:0px solid #1A6680;
}

#menus li li a:hover, #menusli li a:active {
    background: #424338; /* This is the background color for the drop down menu when a user hovers. */
    color: #FFFFFF; /* This changes the text color. */
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

/*-------- End Drop Down Menu -------*/

Sekarang dah siap, Click ‘Save Template”.

This Page

Cara Simple Buat DROP-DOWN Menu Untuk Blogger