Tips and Trick Blogging: Cara Membuat Menu Bar Dengan Sub-Sub Menunya

Dikarenakan banyak yang nanya melalui kontak admin soal cara membuat menu bar horisontal dilengkapi sub-sub menunya yang seperti ical pakai di blog ini, mending ical posting aja tutorialnya. Sebenarnya ical sudah pernah posting tentang membuat menu bar tapi yang dulu tidak pakai sub-sub menu , hanya menu utama yang bisa, tapi langkahnya tidak repot, tinggal add element saja, kalau yang ini harus masuk di Edit HTML blog, tapi mudah juga koq

Ini langkahnya ical paparkan sedemikian detail.

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

Tips and Trick Blogging

Selasa, 07 Desember 2010

Cara Membuat Menu Bar Dengan Sub-Sub Menunya

Tidak ada komentar:

Posting Komentar