F.cher site Headline Animator

Wednesday, January 26, 2011

Membuat Menu Horizontal Sub menu vertikal

Menu Horizntal Sub menu vertical adalah sebuah side bar yang ketika di klik ada menu selanjutnya yang menjadi bagian terkait dari Menu Utama.
Menu ini sangat praktis untuk digunakan karena dalam sat menu utama ada menu pendukung , jadi ga ribret kalo pengunjung datang melihat blog kita hanya tinggal klik saja sudah ada menu yang 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 Cari kode di bawah ini :
<b:widget id='Header1' locked='false' .....dst.........'/>
</b:section>
</div>
6.   Copy paste kode dibawah ini dibawah kode diatas
<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 akan ditampilkan

11.     Langkah Selanjutnya Copy Kode CSS Dibawah Ini diatas kode ]]></b:skin>

#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;



Kemudian Save template
Lihat hasilnya. 
Semoga berhasil dan sukses.


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

0 comments:

Post a Comment

silahkan tulis komentar anda untuk kemajuan blog ini......terimakasih untuk kunjungannya.

Stop pop-up windows instantly.
Click Here
Play Online Poker
Play Online Poker
Program Affiliate Indowebmaker