Header Ads

Cara Membuat Menu Navigasi Horizontal dengan Sub Menu Vertikal

Cara Membuat Menu Navigasi Horizontal dengan Sub Menu Vertikal

Pada beberapa template Blogger hasil mengunduh dari layanan penyedia template Blogger gratisan kita dapat menemukan adanya menu navigasi horizontal dengan sub menu-sub menu vertikal. Namun, hal berbeda kita temui saat menggunakan template yang disediakan oleh pihak Blogger. Di sana belum tersedia menu navigasi yang dimaksud. Akan tetapi, kita dapat menambahkan menu navigasi horizontal dengan sub menu-sub menu vertikal pada template tersebut. Bagaimana cara membuatnya? Silakan simak langkah-langkahnya di bawah ini.

Sekadar mengingatkan, tutorial di bawah ini masih menggunakan antarmuka Blogger yang lama.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Backup template dulu dengan mengeklik Download Template Lengkap.

4. Cari kode ]]></b:skin> gunakan tombol Ctrl + F untuk mempercepat pencarian.

5. Selanjutnya copy kode di bawah ini dan paste di atas kode tersebut.

#NavbarMenu {
background: #000;
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. Klik tombol SIMPAN TEMPLATE.

7. Kemudian ke menu Elemen Laman dan klik Tambah Gadget yang ada di bawah header.

8. Pilih HTML/JavaScript.

9. Lalu copy kode di bawah ini dan paste di Konten.

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

<li><a href='url menu 1'>MENU 1</a></li>

<li><a href='url menu 2'>MENU 2</a>
<ul>
<li><a href='url sub menu 2.1'>SUB MENU 2.1</a></li>
<li><a href='url sub menu 2.2'>SUB MENU 2.2</a> </li>
<li><a href='url sub menu 2.dst'>SUB MENU 2.dst</a></li>
</ul>
</li>

<li><a href='url menu 3'>MENU 3</a>
<ul>
<li><a href='url sub menu 3.1'>SUB MENU 3.1</a></li>
<li><a href='url sub menu 3.2'>SUB MENU 3.2</a> </li>
<li><a href='url sub menu 3.dst'>SUB MENU 3.dst</a></li>
</ul>
</li>

<li><a href='url menu 4'>MENU 4</a>
<ul>
<li><a href='url sub menu 4.1'>SUB MENU 4.1</a></li>
<li><a href='url sub menu 4.2'>SUB MENU 4.2</a> </li>
<li><a href='url sub menu 4.dst'>SUB MENU 4.dst</a></li>
</ul>
</li>

<li><a href='url menu dst'>MENU dst</a></li>

</ul>
</div>
  • Silakan diganti tulisan-tulisan yang berwarna merah dengan yang Anda inginkan.
10. Klik tombol SIMPAN.


Sumber kode: Pelajaran Blog

8 comments:

  1. mantap artikelnya gan,templete yang dari google udah divermak semua yah top dah.........

    ReplyDelete
  2. klo kita ga' mau pake sub menu gmn gan?... warga baru nih masih butuh banyak pencerahan.
    my blog

    ReplyDelete
  3. @www.julidarmaputra.blogspot.com Terima kasih banyak gan..
    @iduy
    Kl gak mau pke sub menu hilangkan aja bagian:
    <ul>
    <li><a href='url sub menu 2.1'>SUB MENU 2.1</a></li>
    <li><a href='url sub menu 2.2'>SUB MENU 2.2</a> </li>
    <li><a href='url sub menu 2.dst'>SUB MENU 2.dst</a></li>
    </ul>

    ReplyDelete
  4. gk bisa di edit yah warnanya..mkasih..

    ReplyDelete
  5. azysforever.blogspot.com
    Disitu ada ebook,bokep plus software full version

    ReplyDelete
  6. Byk amat kode nya sob, bisa lamload nihh Blog q,,,, tapi di coba dulu lah siapa tahu hasilnya menarik.
    Ohh ya sob, cara membuat menu navigasi yg ada di bawah header blog sobat gimana ya?? (home buku tamu top komentator kode warna ...)
    tq, q harap sobat paham...!

    ReplyDelete
  7. Mas Klik Mas Munadi, bagaimana cara membuat top navigasi yang lebarnya seukuran dengan horizontal menunya. punya saya kok selebar dari maksimal browser ya? mohon pencerahannya.
    maturnuwun dan terimakasih brade.

    ReplyDelete
    Replies
    1. Perhatikan kode: #top{margin:auto;padding: 0;width: 100%;background:#eeeded;border-bottom:1px solid #ddd;}, kemudian ganti nilai 100% pada properti width: 100%; dengan lebar yang diinginkan, misalnya menjadi 970px atau 1014px

      Delete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.