Label Cloud

Search This Blog

18 April 2010

online counter Sub Navigation Bar / Menu Bar

Assamualaikum , Msue nak kongsi ngan korang sume bagaimana nak buat Sub Navigation Bar / Menu Bar .





1. Login ke Blogspot .

2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)

3. Cari kodseumpama dibawah atau yang berkaitan dengan header .


/* Header
----------------------------------------------- */


4. Copy kod dibawah ini


#NavbarMenu{
background:#3366CC;
width:950px;
height:40px;
color:#3366CC;
margin:0 auto;
padding:0;
font-family:Verdana;
font-weight:bold;
text-decoration:none
}

#NavbarMenuleft{
width:950px;
float:$startSide;
margin:0;
padding:0;
text-decoration:none
}

#nav{
margin:0;
padding-top:3px;
padding-left:3px
}

#nav ul{
float:$startSide;
list-style:none;
margin:0;
padding:0;
text-decoration:none;
}

#nav li{
list-style:none;
margin:0;
padding:0;
text-decoration:none;
}

#nav li a, #nav li a:link, #nav li a:visited{
color:#FFFFFF;
display:block;
text-transform:uppercase;
margin-left:0;
padding:9px 15px 8px;
font-familyVerdana;
text-decoration:none;
}

#nav li a:hover, #nav li a:active{
background:#6699ff;
color:#FF0000;
margin:0;
padding:9px 15px 8px;
text-decoration:none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited{
background:#3366CC;
width:150px;
color:#FFFFFF;
text-transform:lowercase;
float:none;
margin:0;
padding:7px 10px;
border-bottom:1px solid #6699ff;
border-left:1px solid #6699ff;
border-right:1px solid #6699ff;
font-family:Verdana;
text-decoration:none;
}

#nav li li a:hover, #nav li li a:active{
background:#6699ff;
color:#FF0000;
padding:7px 10px;
text-decoration:none;
}

#nav li{
float:$startSide;
padding:0;
text-decoration:none;
}

#nav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0;
padding:0;
text-decoration:none;
}

#nav li ul a{
width:140px;
text-decoration:none;
}

#nav li ul ul{
margin:-32px 0 0 171px;
}

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

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

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


4. Pastekan di akhir content header

5. Cari kod dibawah ini


<div id='content-wrapper'>


6. Copy kod dibawah ini


<div id='NavbarMenu'>
<div id='NavbarMenuleft'><script type='text/javascript'>
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener(&quot;load&quot;,
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
}
}
</script>

<ul id='nav'>
<li><a href='http://msueroomz.blogspot.com/'>HOME</a></li>
<li><a href='http://msueroomz.blogspot.com/' target='_blank'>ABOUT ME</a></li>

<li><a href='#'>MENU A</a>
<ul><li><a href='http://URL SUB MENU A1' target='_blank'>SUB MENU A1</a></li>
<li><a href='http://URL SUB MENU A2' target='_blank'>SUB MENU A2</a></li>
<li><a href='http://URL SUB MENU A3' target='_blank'>SUB MENU A3</a></li>
<li><a href='http://URL SUB MENU A4' target='_blank'>SUB MENU A4</a></li>
<li><a href='http://URL SUB MENU A5' target='_blank'>SUB MENU A5</a></li>
</ul>
</li>

<li><a href='#'>MENU B</a>
<ul><li><a href='http://URL SUB MENU B1' target='_blank'>SUB MENU B1</a></li>
<li><a href='http://URL SUB MENU B2' target='_blank'>SUB MENU B2</a></li>
<li><a href='http://URL SUB MENU B3' target='_blank'>SUB MENU B3</a></li>
<li><a href='http://URL SUB MENU B4' target='_blank'>SUB MENU B4</a></li>
<li><a href='http://URL SUB MENU B5' target='_blank'>SUB MENU B5</a></li>
</ul>
</li>

<li><a href='#'>MENU C</a>
<ul><li><a href='http://URL SUB MENU C1' target='_blank'>SUB MENU C1</a></li>
<li><a href='http://URL SUB MENU C2' target='_blank'&gt;SUB MENU C2</a></li>
<li><a href='http://URL SUB MENU C3' target='_blank'>SUB MENU C3</a></li>
<li><a href='http://URL SUB MENU C4' target='_blank'>SUB MENU C4</a></li>
<li><a href='http://URL SUB MENU C5' target='_blank'>SUB MENU C5</a></li>
</ul>
</li>

<li><a href='#'>MENU D</a>
<ul><li><a href='http://URL SUB MENU D1' target='_blank'>SUB MENU D1</a></li>
<li><a href='http://URL SUB MENU D2' target='_blank'>SUB MENU D2</a></li>
<li><a href='http://URL SUB MENU D3' target='_blank'>SUB MENU D3</a></li>
<li><a href='http://URL SUB MENU D4' target='_blank'>SUB MENU D4</a></li>
<li><a href='http://URL SUB MENU D5' target='_blank'>SUB MENU D5</a></li>
</ul>
</li>

</ul>
</div>
</div>



Note: Tukarkan yang dihighlight .


7. Pastekan diatasnya

8. Preview dan Save template .:okay:yahoo
Tinggalkan Komen Anda Disini