Cara buat drop-down menu and submenu untuk blogger platform

Baru belajar cara nak buat dropdown menu dan submneu macam kat blog ni. By default, blogger platform takde built-in menu, so kena tambah sendiri. Actually, menu ni boleh guna untuk link to pages ataupun link to labels yang kita tag kat post kita tu.

Meh belajar sama-sama..

1. Kat Dashboard, klik "Layout"

2. Klik "Add A Gadget" kat layout yg atas tu

3. Select "Add HTML/JavaScript"

4. Kat content, paste jer kod ni..

<div id="menubar">

    <ul id="menus">

      <li>

        <a href="#">MenuItem</a>

      </li>

      <li>

        <a href="#">MenuItem</a>

      </li>

      <li>

        <a href="#">MenuItem</a>

      </li>

      <li>

        <a href="#">MenuItem</a>

        <ul>

          <li><a href="#">SubMenuItem</a></li>

          <li><a href="#">SubMenuItem</a></li>

          <li><a href="#">SubMenuItem</a></li>

        </ul>

      </li>

    </ul>

  </div>

• replace "MenuItem" dengan label/nama yang korang nak display
• replace # dengan url untuk label tu. Kalau kita nak letak label yang kita tag kat post tu, contohnya "<a href="http://yatiemn.blogspot.com/search/label/Islam">ISLAM</a>
• Klik "Save"
• Klik "Save Arrangement" kat Layout

5. Klik "Template" -> "Edit HTML"

6. Cari "]]></b:skin>" . Tekan Ctrl +F, masukkan ]]></b:skin>

7. Pastu copy paste kod bawah ni kat atas/sebelum line ]]></b:skin>

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

#menubar {

    background: #8E8E8E;

    width: 840px;

    color: #FFF;

        margin: 0px;

        padding: 0;

        position: relative;

        border-top:1px solid #B2FFFF;

        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:1px solid #1A6680;

        border-right:1px solid #1A6680;

        height:35px;

}

#menus li a, #menus li a:link, #menus li a:visited {

    color: #FFF;

    display: block;

   font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 0;

    padding: 9px 12px 10px 12px;

        text-decoration: none;

}

#menus li a:hover, #menus li a:active {

    background: #130000; /* Menu hover */

    color: #FFF;

    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: #B3B3B3; /* drop down background color */

    width: 120px;

    color: #FFF;

    display: block;

    font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;

    margin: 0;

    padding: 9px 12px 10px 12px;

        text-decoration: none;

z-index:9999;

border-bottom:1px solid #1A6680;

}

#menus li li a:hover, #menusli li a:active {

    background: #130000; /* Drop down hover */

    color: #FFF;

    display: block;     margin: 0;

    padding: 9px 12px 10px 12px;

        text-decoration: none;

}

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

8. Klik "Save Template". Close