Macam mana nak buat Drop-Down menu dalam Blogger

Ok.. hari ni kita out of topic sikit yea.

Memandangkan ada kawan Iza yang tanya macam mana nak buat menu turun bawah (drop-down menu) kat blogger, so Iza rasa baik share sekali kat blog ni dapat jugak Bloggiesta kat luar sana yang sedang mencari-cari cara nak buat drop-down menu ni gunakannya.

Apa yang korang nampak kat bawah ni nanti adalah hasil daripada pencarian demi pencarian Iza dari satu sarang lelabah ke sarang lelabah yang lain. Setelah segala info dapat kumpulkan dan diadunkan mengikut keperluan dan dengan sedikit pengubahsuaian ni dia cara membuat drop-down menu.

LANGKAH PERTAMA

Kita akan mulakan dengan code di bawah ni sebagai asas. Tak payah copy & paste. Cuba tengok, dan biasakan dengan struktur nya, dan teruskan membaca:

<div id= ' menubar '>
        <ul id= 'menus'>
           <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>

Code di atas akan memaparkan satu set tabs yang asas dalam bentuk horizontal.
Untuk dapatkan submenu items - menu yang akan drop down tu ... kita perlu masukkan sedikit lagi coding ke dalam "TabName" yang mana kita nak pilihan drop down menu keluar.

Code yang perlu kita tambah seperti di 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>

Nampak tak? Samakan ketiga-tiga baris coding ni. Coding ni memberi tiga pilihan drop down menu di tab yang kita telah pilih. Kalau rasa perlukan lebih banyak item untuk drop down menu, tambahkan jer baris coding dan delete jer baris kalau rasa tak perlu.

Ok...  macam ni, untuk memudahkan katakan kita nak gunakan TabName1, 2, dan 3 , tab yang biasa . Tiada menu pilihan yang lain, hanya tab yang boleh diklik untuk setiap satu bahagian. macam yang selalu blogger pakai tu. Kita biarkan saja HTML untuk ketiga-tiga tab tu.

Sebagai contoh, Iza akan gunakan TabName4 untuk drop down menu. Iza akan masukkan satu baris tambahan dalam code betul-betul sebelum penutup </li> pada TabName4.
Code dalam widget akan nampak macam ni ( code untuk kesemua tab4 ditandakan dengan warna oren, so uol akan nampak macam mana nak masukkan semua code):


<div id = 'menubar' >
       <ul id = 'menus' >
                 <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" dengan direct hyperlink/ url website atau post yang ingin dipaparkan. Kalau terdapat tab yang tidak memerlukan Link letakkan website homepage untuk menggantikan tempat "LINK".

Letakkan code dalam HTML/JavaScript widget (dari blog control panel, pilih Layout >> Add a Gadget >> HTML/JavaScript) tempat dimana kita nak menubar kita dipaparkan: biasanya menubar terletak betul-betul terletak di bawah title/header. Ingat yea Kita tak gunakan gadget "Pages". Kalau dah guna "Pages" mungkin ada yang akan membuangnya dari blog layout.

Sekarang ni mungkin paparan blog kelihatan tak tersusun, dan Tab pun masih tak ada sebarang drop down lagi.  Langkah yang seterusnya adalah langkah yang penting, dimana ia akan membentuk menu bar yang mempunyai fungsi drop-down.

BAHAGIAN KEDUA

Bahagian ini mungkin agak mengerikan sikit.. hehe.. Dari blog control panel, pilih Template.Dibahagian atas sebelah kanan, tekan butang "Backup/Restore". Sebagai langkah keselamatan adalah disarankan untuk buat backup template sedia ada, bukan apa takut kalau-kalau something goes wrong. 

ok, bila dah buat backup, tekan butang "Edit HTML" (dibawah "Live on Blog").

Nampak tak setiap baris code bermula dengan warna hijau, dan setiap baris ada nombor.

Sekarang cari baris yang ada perkataan: <b:skin>...</b:skin>
(kalau ditemplate Iza ada di baris no 13; yang ni mungkin tak sama yea)

Klik dibahagian dot yang kecil diantara tag.

Ia akan berkembang beribu-ribu code, dan code berwarna biru.

Scroll down, dan cari dimana ada code yang berwarna biru bertukar ke warna hijau. Disitu terdapat baris yang tertulis perkataan:  ]]></b:skin>
                                                     

Sekarang, copy & paste code ni, pastekan pada baris sebelum  ]]></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; /* utk tukar text color of visited links. */
    display: block;
   font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 5;  
           /* tukar margin value kepada 0 kalau tak mahu ada space antara tabs */
           /* tukar 14 kepada nombor lain utk besarkan atau kecilkan font size */ 
    padding: 9px 12px 10px 12px;
        text-decoration: none;
} 

#menus li a:hover, #menus li a:active {
    background: #424338; /*  main menu background color when a user hovers. */
    color: #FFFFFF; /*  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; /* background color utk drop down menu. */
    width: 120px;
    color: #FFFFFF; /* tukar text color. */
    display: block;
    font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;  
               /* tukarkan 14 ke nombor lain utk besarkan atau kecilkan 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; /*  background color untuk drop down menu bila  user hovers. */
    color: #FFFFFF; /* untuk tukar text color. */
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
} 

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

Selesai sudah! Klik butang oren "Save Template" dan jadi!

BONUS: CUSTOMIZING COLORS

Iza ada buat beberapa nota dalam code diatas untuk memaklumkan yang mana akan memberi kesan warna pada menu bar. Warna-warna ni boleh diubah mengikut kesesuaian rekabentuk blog masing-masing yea. Tukarkan jer nilai hex( gabungan 6 nombor/huruf yang muncul selepas tanda #). Contohnya, hitam adalah #000000 dan putih #FFFFFF.

Dalam blok code diatas, mana-mana teks yang ada tanda diantara  /*  dan  */  adalah komen dalam code. Komen adalah nota seorang programmer ( programmer ke?) termasuk untuk membantu orang lain memahami code. Dalam hal ni, Iza nak kawan-kawan semua tahu bahagian mana dalam code yang memberi kesan terhadap menu bar.. dengan harapan kawan-kawan semua dapat membuat pengubahsuaian dengan lebih yakin.

HTML Color Picker boleh dijadikan rujukan untuk mencari nilai hex bagi pelbagai warna. Selain itu Color Palette Generator juga boleh digunakan untuk menjana palet warna bagi menyesuaikan dengan tema blog

Kalau ada apa-apa persoalan bolehlah tinggalkan komen di bawah yea.. Iza akan cuba membantu.


Nak order produk Shaklee?
Nak Join Biz? Call/ Whatsapp jer

Fab SID ever Iza
@ 012 617 8480