Cara membuat menu DROPDOWN

Membuat menu dropdown memang sedikit rumit,tapi jika kita memang benar-benar teliti,kerumitan itu dapat teratasi.

Sebagai contoh,lihat lah menu diatas.

Langsung saja ke cara-cara nya,karena sedikit panjang.

• Masuk ke blog anda.
• Masuk ke template.
• Klik edit HTML.
• Lalu cari kode ini ]]></b:skin> ,lalu seteleh ketemu letakan kode ini tepat diatas ]]></b:skin>. 

#DropdownMenu {     background:#FFFFFF; border-radius:6px;     width: 940px;     height: 15px;     font-size: 12px;     font-family: Arial, Tahoma, Verdana;     color:#0000FF;     font-weight: bold;     margin-bottom: 30px;     padding: 0px; } #Dropdownbox {     width: 940px; border-radius:6px;     float: left;     margin: 0;     padding: 0; } #strike { border-radius:6px;     margin: ;     padding: 0; } #strike ul { border-radius:6px;     float: left;     list-style: none;     margin: 0;     padding: 0; } #strike li { border-radius:6px;     list-style: none;     margin: 0;     padding: 0; } #strike li a, #strike li a:link, #strike li a:visited { border-radius:6px;     color:#0000FF;     display: block;     font-size: 16px;     font-family: Georgia, Times New Roman;     font-weight: normal;     margin: 0;     padding: 9px 15px 8px; } #strike li a:hover, #strike li a:active { border-radius:6px;     background:#00FFFF;     color:#0000FF;     margin: 0;     padding: 9px 15px 8px;     text-decoration: none; } #strike li li a, #strike li li a:link, #strike li li a:visited { border-radius:6px;       background:#C0C0C0;     width: 150px;     color:#0000FF;     font-size: 14px;     font-family: Georgia, Times New Roman;     font-weight: normal;     float: none;     margin: 0;     padding: 7px 10px;     border-bottom: 1px solid #FFF;     border-left: 1px solid #FFF;     border-right: 1px solid #FFF; } #strike li li a:hover, #strike li li a:active { border-radius:6px;      background:#C0C0C0;     color:#0000ff;     padding: 7px 10px; } #strike li { border-radius:6px;     float: left;     padding: 0; } #strike li ul { border-radius:6px;     z-index: 9999;     position: absolute;     left: -999em;     height: auto;     width: 170px;     margin: 0;     padding: 0; } #strike li ul a { border-radius:6px;     width: 140px; } #strike li ul ul { border-radius:6px;     margin: -32px 0 0 171px; } #strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul { border-radius:6px;     left: auto; } #strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul { border-radius:6px;     left: auto; } #strike li:hover, #strike li.sfhover { border-radius:6px;     position: static; }

Untuk yang berwarbna merah adalah kode warnanya,silahkan ganti sesuai keinginan.

• Lalu klik simpan template.

Langkah yang kedua anda tinggal pergi ke tata letak atau layout,dan klik add gadget.

Lalu pilih tambahkan HTML / javascript dan masukan kode dibawah ini.

<div id="DropdownMenu">        <div id="Dropdownbox">       <ul id="strike">         <li><a href=" http://finger21.blogspot.com/2013/03/beranda.html ">Home</a></li>          <li><a href=" http://finger21.blogspot.com/2013/02/kontak.html ">Kontak</a></li>         <li>           <a href="#">Kategori</a>           <ul>             <li>               <a href=" http://finger21.blogspot.com/search/label/TIPS ">Tips</a></li>             <li><a href=" http://finger21.blogspot.com/search/label/Facebook ">Facebook</a></li>             <li><a href=" http://finger21.blogspot.com/search/label/Sejarah ">Sejarah</a></li>                                                                                                                   </ul>         </li>         <li><a href=" http://finger21.blogspot.com/search/label/Software ">Software</a></li>       </ul>     </div>   </div>

Untuk yang berwarna merah adalah contohnya,silahkan ganti sesuai keinginan anda.