Search This Blog

Sunday, November 20, 2011

Cara Membuat Menu Bar Dengan Sub-Sub Menunya (how to make menu bar in blog)

this is the step :

  1.  login to you blog
  2. choose which one the blog yhat you want to add it
  3. goes to design, Edit HTML,( don't forget to give check in expand widget template)
  4. find thiis :
body {
margin: 0;
text-align: center;
min-width: 900px;
background: #000000) repeat-x $startSide top;
color: $textColor;
font-size: small;
}

not must like that, but just if there is body word..
5. take this script below that :
#navbar-iframe{display:none;height:0;visibility:hidden;}


#NavbarMenu{background:black; width:950px; height:40px; color:white; margin:0 auto; padding:0; font:bold 8px Arial,Tahoma,Verdana; 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:green; display:block; text-transform:uppercase; margin-left:0; padding:9px 15px 8px; font:bold 12px Arial,Times New Roman; text-decoration:none}

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

#nav li li a, #nav li li a:link, #nav li li a:visited{background:white; width:150px; color:#6699ff; 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:normal 14px Georgia,Times New Roman; text-decoration:none}

#nav li li a:hover, #nav li li a:active{background:#6699ff; color:#fff; 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}

6. and than find this code : <body>
7. Copy this code below that:
<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 expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='rss.xml'>Site Map</a></li>
<li><a href='http://icalcell.blogspot.com/search/label/Tutorial%20Blog?max-results=999'>Tutorial Blog</a></li>
<li>
<a href='#'>EDIT MENU INI</a>
<ul>
<li>
<a href='#'>EDIT SUB MENU INI&#160;&#160;&#160;&#160;&#187;</a>
<ul>
<li><a href='EDIT URL UNTU SUB SUB MENU ' target='_blank'>EDIT SUB SUB MENU INI/a>

</li>

</ul>
<li><a href='http://icalcell.blogspot.com/2009/11/program-ptc.html'>Program PTC</a></li>
</li>
<li><a href='http://icaltogel.blogspot.com' target='_blank'>Togel Mania

</a></li>

</ul>
</li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Tukar Link</a></li>
<li><a href='#'>Hubungi Saya</a></li>
<li><a href='#'>Ke</a>
<ul><li><a href='http://www.google.com' target='_blank'>Google</a></li>
<li><a href='http://www.yahoo.com' target='_blank'>Yahoo</a></li>
<li><a href='http://www.youtube.com' target='_blank'>Youtube</a></li>
<li><a href='http://www.facebook.com' target='_blank'>Facebook</a></li>
</ul>
</li>
</ul>
</div>
</div>


preview, and save that, you can modification this, what do you want..
take from:http://icalcell.blogspot.com/2010/04/cara-membuat-menu-bar-dengan-sub-sub.html


No comments:

Post a Comment

tinggalkan komentar


Popular Posts