1. Login ke blog
2. Pilih blog yang ingin di tambahkan menu bar
3. Pilih Template/Layout -> Edit Html (jangan lupa ceklist expand widget template)
4. Cari kode yang mirip ini :
body {
margin: 0;
text-align: center;
min-width: 900px;
background: #000000) repeat-x $startSide top;
color: $textColor;
font-size: small;
}
yang penting ada kode body nya
5. Tempat kode dibawah ini pas dibawah kode langkah 4
#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. Setelah itu cari kode seperti ini:
<body>
7. Tempatkan kode dibawah ini, tepat dibawah kode langkah 6
<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 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    »</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>
Setelah itu preview, setelah tampilan bagus baru di save.
NB:
Untuk penyesuaian dengan warna template yang kamu gunakan silahkan edit kode pada langkah 5.
Untuk mengedit Menu-menu dan sudmenu apa saja yang ingin ditampilkan silahkan edit kode pada langkah 7
0 komentar:
Posting Komentar