Cara Membuat Menu Bar Dengan Sub-Sub Menunya

13 komentar
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, menu yang biasa saja, tapi langkahnya tidak repot, tinggal add element saja, untuk membuat menu lengkap dengan sub menu -nya harus ada sedikit pemahaman membaca kode-kode Edit HTML blog, yaitu dengan menambahkan kode CSS, tapi mudah juga kok cara membuar menu dan sub menu , tinggal copas aja kode yang sudah ada dibawah ini.

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(&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>

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

Related Posts

13 komentar

  1. terimakasih kode css dan html nya. tapi ada yang kurang tuh ketikannya, so ga bisa instan, harus di oprek lagi dah... by http://ddxrp.blogspot.com

    BalasHapus
  2. Thanks to post, udah lama aku nyari cara yang beginian ... baru dapat di blog ini..!!! sedikit koreksi ada sedikit kesalahan dari kode tersebut!!!

    BalasHapus
  3. tapi kok nama linknya yg ada link blog u?
    leh di ganti gk link blognya jadi http://dragons-rfdragons.co.cc/

    BalasHapus
  4. makasih gan tutornya..
    tapi ane mau nanya gan.. gimana cara geser menunya kebawah??
    ThxB4

    BalasHapus
  5. @All-In-One - geser menu apanya sob,,kalo sekarang ical lagi gak pake sob, coz ganti tema, ntar deh ical terapin lagi , hehehe

    BalasHapus
  6. MAkasih atas ilmunya...

    BalasHapus
  7. good post bro
    ane mau coba
    he...he...he

    BalasHapus
  8. gan , di langkah 4 ga ketemu tuh yang sama ...
    gmana tuh kalo gitu ???
    O.o

    BalasHapus
  9. untuk upload/nulis artikel untuk sub menu gimana...??? saya sudah mencoba, tetapi artikel tersebut hanya muncul di menu utama (Home/beranda).

    BalasHapus
  10. Wah, nice info banget gan.
    Ditunggu ya kunjungan baliknya www.stev-lim-teddy.blogspot.com

    BalasHapus

Posting Komentar

Subscribe Our Newsletter