Sunday 21 March 2010

Membuat Menu Horizontal dengan Sub Menu Vertikal di Blog

Yah karena ada yang nanya caranya ya saya buatkan tutorialnya. Contoh Silahkan arahkan cursors anda ke menu yang bernama "free lirik lagu" punya saya diatas maka otomatis menu akan memanjang kebawah menampilkan menu lainnya.

Untuk membuatnya anda bisa menggunakan tutorial berikut:

  1. Login ke akun Blogspot pembaca
  2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
  3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
  4. JANGAN beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
  5. Setelah itu untuk menambah menu horizontal tinggal kopi kode berikut
<div id="nav">
<ul>
<li><a href="URL">NAMA</a></li>
<li><a href='URL'>NAMA</a>
          <ul>
            <li><a href='
URL tambahan'>NAMA tambahan</a></li>
            <li><a href='
URL tambahan'>NAMA tambahan</a></li>
          </ul>
        </li>

<li><a href='URL'>NAMA</a>
          <ul>
            <li><a href='
URL tambahan'>NAMA tambahan</a></li>
            <li><a href='
URL tambahan'>NAMA tambahan</a></li>
          </ul>
        </li>

<li><a href='URL'>NAMA </a>
          <ul>
            <li><a href='
URL tambahan'>NAMA tambahan</a></li>
            <li><a href='
URL tambahan'>NAMA tambahan</a></li>
          </ul>
        </li>

<li><a href='URL'>NAMA</a>
          <ul>
            <li><a href='
URL tambahan'>NAMA tambahan</a></li>
            <li><a href='
URL tambahan'>NAMA tambahan</a></li>
          </ul>
        </li>

</ul>
</div>
10.  Jangan lupa mengganti kode URL dan nama yang berwarna merah.
11.  Paste dibawah kode

<b:widget id='Header1' locked='false' .....dst.........'/>
</b:section>
</div>
 Langkah Selanjutnya Copy Kode Dibawah Ini:
#NavbarMenu {
background: #000;
width: 874px;
height: 35px;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
color: #fff;
font-weight: bold;
margin: 0px;
padding: 0px;
}

#NavbarMenuleft {
width: 874px;
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: #808080;
height: 24px;
color: #fff;
display: block;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: bold;
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: #c0c0c0;
color: #000;
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: #c0c0c0;
width: 150px;
color: #000;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
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: #000;
color: #fff;
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;

Untuk warna menu horizontal ini bisa diganti sendiri jika ingin menggunakan warna yang lain, silahkan menuju ke postingan saya tentang kode warna dan contohnya
Khusus kode "color:" ini adalah kode buat warna hurufnya, jadi silahkan diganti dengan kode warna lainnya dengan mengubah huruf yang saya warnai biru.

Setelah itu paste diatas
]]></b:skin>
lalu save template.

Lihat hasilnya.
 

Semoga berhasil dan sukses.



Semoga sukses!! Berhasil, jangan lupa komen jika gagal/berhasil

13 comments:

  1. ini yg saya cari, dicoba dulu ya, baru mau bikin nih, hihi

    ReplyDelete
  2. ini yg saya cari, dicoba dulu ya, baru mau bikin nih, hihi

    ReplyDelete
  3. good articel..please visit my blog..thank's

    ReplyDelete
  4. mantap article nya mas..
    apa cocok dengan semua browser mas?

    ReplyDelete
  5. browser hp java dan operamini tidak bisa. thx bro kunjungannya

    ReplyDelete
  6. template saya tidak ada kode " ]]> " bos
    adanya " " apakah sama saja? mhn pencerahannya, thx

    ReplyDelete
  7. saya udah coba pasang template di blogspot saya. tampilannya udah benar, tapi kenapa waktu sub menunya disorot langsung hilang ya..... shg tidak bisa masuk page sub menu yang diinginkan.
    Gimana caranya supaya sub menu tertahan sampai kita klik sub menu pilihan kita ya?
    Tolong bimbingannya bro....

    Terimakasih.

    ReplyDelete
  8. thank tutorialnya sob...

    www.gantatriplex.blogspot.com

    ReplyDelete
  9. lagi nyoba-nyoba nih gan tapi masih susah aja ternyata..hufftt..

    ReplyDelete