18 April 2010
Sub Navigation Bar / Menu Bar
hak milik
Sue
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("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', 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'>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 .
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("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', 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'>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 .
Tinggalkan Komen Anda Disini