http://www.kangazis.com/search/label/BLOG

Cara Membuat Menu dengan Sub Menu di Blog

Cara membuat menu ini tidaklah terlalu sulit, setelah surfing beberapa kali akhirnya saya menemukan caranya dan sesuai dengan yang saya inginkan.
dimana tampilan menu nantinya akan seperti menu di blog saya ini, update : tampilan sudah beda/tidak sama dengan blog ini. apabila kursor mouse diarahkan ke menu utama maka akan keluar sub-sub menu di bawahnya.
berikut ini caranya:

1. Login dulu ke blog anda.
2. Pilih Template kemudian Edit Html.
3. kemudia beri tanda centang pada Expand template widget. (Update : Sudah Tidak ada tombol centang, langsung saja no 4.)
4. lalu cari kode berikut ]]></b:skin>. untuk mempermudah mencarinya gunakan  CTRL + F.
5. lalu copy pastekan kode/script ini (dibawah ini) tepat di atas/sebelum kode ]]></b:skin>.

#NavbarMenu { background: #808080; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #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 simpan template.
7. lalu kembali ke Rancangan/ Element laman dan tambah Gadget dibawah header lalu pilih Html/Java Script
8. lalu pastekan kode/script dibawah ini:

<div class='menuhorisontal'>
<ul id='nav'>

<li><a href='http://www.pengetahuanq-aziest.blogspot.com/'>HOME</a> </li>
<li><a href='http://pengetahuanq-aziest.blogspot.com/2011/12/islami.html'>ISLAMI</a>
<ul>
<li><a href='http://pengetahuanq-aziest.blogspot.com/2011/08/kebesaran-alloh.html'>NAMA</a> </li>
<li><a href='http://pengetahuanq-aziest.blogspot.com/2011/12/keutamaan-hari-jumat-sesuai-sunnah-nabi.html'>NAMA</a> </li>
<li><a href='http://pengetahuanq-aziest.blogspot.com/2011/12/shalat-malam-tahajud-adalah-kebiasaan.html'>NAMA</a> </li>
</ul> </li>

<li><a href='http://pengetahuanq-aziest.blogspot.com/2011/12/elektronika.html'>ELEKTRONIKA</a>
<ul>
<li><a href='http://pengetahuanq-aziest.blogspot.com/2011/10/bagian-bagian-flyback.html'>NAMA</a> </li>
<li><a href='http://pengetahuanq-aziest.blogspot.com/2011/08/kapasitor.html'>NAMA</a></li>
<li><a href='http://pengetahuanq-aziest.blogspot.com/2011/08/normal-0-false-false-false-en-us-x-none.html'>NAMA</a> </li>
</ul> </li>

<li><a href='http://www.blogger.com/profile/13499923304171328307'>ABOUT ME</a>
<ul>
<li><a href='http://www.facebook.com/profile.php?id=100000038095865&ref=tn_tnmn'>ME ON FACEBOOK</a> </li>
<li><a href='https://twitter.com/#!/aziestsembilant'>ME ON TWITTER</a> </li>
</ul> </li>
</ul>
</div>

KETERANGAN:
#warna merah merupakan URL untuk menu utama, dapat anda ganti dengan URL yang akan anda tujukan.
#warna biru merupakan URL untuk Sub-sub menunya, dapat anda ganti dengan URL yang akan anda tujukan.
#dan yang dicetak tebal merupkan Nama URL tersebut uang akan muncul di menunya, ganti sesuai keinginan.
apabila ingin menambah menunya, tinggal tambah saja, bisa dianalisa dari script diatas.

9. lalu simpan dan lihat hasilnya.
SELESAI

25 Responses to "Cara Membuat Menu dengan Sub Menu di Blog"

  1. mantap banget gan. bermanfaat banget. makasih.
    mampir juga gan http://piqryarmays.blogspot.com
    dan http://knghteleven.blogspot.com

    ReplyDelete
  2. mantap gan, ditunggu uya kunjungan ny ke http://ilmufirizky.blogspot.com/

    ReplyDelete
  3. ko di atas blog nya malah ada tulisan #navbar gitu gitu ?

    ReplyDelete
  4. makasih banyak mass buat infonya,, nice post

    http://toko661.com/pengobatan-tradisional-abses-anus/

    ReplyDelete
  5. kok nggk ada mas yang centang centang itu ?

    ReplyDelete
    Replies
    1. sekarang langsung saja tanpa centang gan, ini tutorial lama belom di update

      Delete
  6. mantap infonya
    jangan lupa berkunjung ke bloag ane
    http://automotivecars88.blogspot.com

    ReplyDelete
  7. nice infonya
    jangan lupa main ke blog ane http://automotivecars88.blogspot.com

    ReplyDelete
  8. thanks buat tutornya gan,, sangat memabantu sekali..

    ReplyDelete
  9. Bingung Berbisnis apa ?kami solusinya ..bisnis ppob loket resmi pembayaran listrik Telp 085322431295 taw kunjungi http://daanputra1.blogspot.com

    ReplyDelete
  10. nice posting....
    kunjungi blog sy http://fastudio28-jasa-arsitektur.blogspot.co.id/

    tksh

    ReplyDelete
  11. gan, gimana yah mengisi artikel di halaman lain, misal di home sudah di iisi artikel, lalu di halaman satu lagi misal tips n trick diisi artikel, caranya gimana yah ?

    mohon pencerahan nya mastah

    ReplyDelete

Terimaksih atas kunjungan anda
Mohon untuk berkomentar yang sopan, tidak mengandung kalimat yang berbau kekerasan atau kriminal
Dilarang menaruh Link Aktif di Komentar, disitu sudah tersedia Profil Name/Url silahkan dimanfaatkan