Tutorial : Buat Drop down menu di header menu dalam blog

Tutorial kali ini ialah saya nak share dengan korang cara-cara untuk buat drop down menu di header menu macam gambar di bawah ni.

1. Pergi ke Dashboard > Design > Edit HTML>Expand Widget 

2. Cari kod berikut  </head>

3. Letakkan kod berikut sebelum kod yang korang cari di step 2 tadi.

  

<style>
#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
/*Font of menu top*/
font: bold 11px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
/*width of each menu top*/
width: 60px;
/*background color of main menu*/
background: #66CC00;

/*text color of main menu*/
color: #FFFFFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{

/*background color of main menu on hover*/
background: #00991A}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;

/*background color of drop down menu */
background: #66CC00;
/*border of the drop down menu*/
border: 1px solid #5970B2}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
/*background color of each menu element*/
background: #FFFFFF;
/*text color of each menu element*/
color: #00CC00;
/*font of each menu element*/
font: 11px arial}

#sddm div a:hover
{
/*background of each element on hover*/
background: #00991A;
/*font color of each menu item on hover*/
color: #FFFFFF}
</style>
<script type='text/javascript'>

var timeout = 500;
var closetimer = 500;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = &#39;visible&#39;;

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
</script>




Untuk menambahkan menu:

1. Pergi Dashboard > design > add a gadget > HTML/javascript
2. Letakkan kod berikut:

<ul id="sddm">

<li><a href="http://easy-xs.blogspot.com">Home</a></li>

<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Tutorial</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Nuffnang</a>
<a href="#">Blogspot</a>
<a href="#">Trafik Blog</a>
</div>
</li>

<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Tempat</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Percutian</a>
<a href="#">Tempat menarik</a>
</div>
</li>

<li><a href="#">Hiburan </a></li>
<li><a href="#">Dunia IT </a></li>
<li><a href="#">Sejarah </a></li>

</ul>

Note : 
i.  Tukar tajuk menu dan link ikut kesesuaian blog korang.
ii. Untuk menukar warna pada menu boleh rujuk kod warna berikut : colour
    
Sekiranya ada sebarang pertanyaan bolehlah komen di bahagian komen yer.....