Cara Membuat Menu Bar Dengan Sub-Sub Menunya

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

Cara Membuat Menu Bar Dengan Sub-Sub Menunya

0 Response to "Cara Membuat Menu Bar Dengan Sub-Sub Menunya"

Posting Komentar