Cara Membuat Menu Horizontal dan Sub Menu Horizontal dengan bertabur bintang || FORUM PUBLIK

( Postingan telah diperbarui )
Bingung mau posting apa eh sewaktu mengotak-atik blog, ada teman yang bertanya masalah menu horizontal dan submenunya seperti pada blog ini

akhirnya saya mempostingkan artikel ini supaya dapat membantu teman saya tersebut dan semua pengguna blogger
langsung saja pada intinya.. . .
Untuk membuatnya, langkahnya seperti ini:
1. Masuk pada akun Blog anda
2. pilih Rancangan->Edit HTML -> beri tanda centang pada Expand Template Widget

3. cari kode ]]>
4. Copas (Copy Paste) kode di bawah ini sebelum kode ]]>,

#NavbarMenu {

float: center;

width: 100%px;

height: 35px;

background:#005ae1 ;

color: #ffffff

margin: 0 auto 0;

padding: 0;

font: bold 11px Algerian;
border: 3px groove #ed070d; -moz-border-radius: 10px 10px 10px 10px;

}

#NavbarMenuleft {

width: 1000px;

float: center;

margin: 0;

padding: 0;

}

#nav {

margin: 0;
color: #0000FF;
padding: 0;

}

#nav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#nav li {

list-style: none;
background:#005ae1 ;
margin: 0;
border: 1px solid #ed070d;

padding: 0;

}

#nav li a, #nav li a:link, #nav li a:visited {

color: #ffffff;

display: block;

text-transform: capitalize;

margin: 0;

padding: 7px 9px 8px;

font: normal 15px Georgia, Times New Roman;

}

#nav li a:hover{ color: #transparant; text-transform: uppercase; font-weight: bolder; font-size: 14px; background: #000080 url(http://i27.tinypic.com/2626vyh.jpg);text-shadow: 0 0 3px #ccc, 0 -5px 5px #ff3, 2px -6px 7px #fd3, -2px -8px 10px #f40, 2px -10px 11px #f10; }
#nav li a:active {

background: #FF6600;

color: #ffffff;

margin: 0;

padding: 4px 4px 4px;

text-decoration: none;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #0000FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAZ_GUNrtpKzkW7AeYiX_gWVGgCUt52EirzcwxF8vG-SMU95v4L1YyN-eEoaa-lx9IJxF9ycR_rpVrEJ53_pC1sKgyKukdYWJgIau7Q-YOx6jzaIjfG7oO7b6lzgixP3hmiC0BvRoDk4gL/s1600/navbg.png) repeat-x top;

width: 240px;

color: #ffffff;

text-transform: lowercase;

float: none;

margin: 0;

padding: 5px 5px;

border-bottom: 1px solid #ffffff;

border-left: 1px solid #ffffff;

border-right: 1px solid #ffffff;

font: normal 14px Georgia, Times New Roman;

}

#nav li li a:hover{ color: #00FF00; text-transform: uppercase; font-weight: bolder; font-size: 15px; background-image: url(http://i27.tinypic.com/2626vyh.jpg); }
#nav li li a:active {

background: #FF6600;

color: #ffffff;

padding: 5px 5px;

}

#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: -35px 0 0 251px;

}

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

}

5. klik Simpan Template nah,sekarang tinggal menentukan letak menu yang akan di buat. . .

Menggunakan HTML,langkahnya:

1. pilih Rancangan -> Elemen Laman
2. Klik tambah gadget ->plih HTML/JavaScript
3. masukan kode berikut:
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu1</a>
<ul>
<li><a href='alamat Sub menu1'>Sub menu1.1</a></li>
<li><a href='alamat Sub menu1'>Sub menu1.2</a></li>
<li><a href='alamat Sub menu1'>Sub menu1.3</a></li>
<li><a href='alamat Sub menu1'>Sub menu1.4</a></li>
</ul></li>
<li><a href='#'>menu2</a>
<ul>
<li><a href='alamat Sub menu2'>Sub menu2.1</a></li>
<li><a href='alamat Sub menu2'>Sub menu2.2</a></li></ul>
</li>
<li><a href='#'>Menu3</a></li>
</ul>
</div>
</div>
4. klik simpan
Diletakan pada Template,langkahnya:
1. pilih Rancangan ->Edit HTML -> beri tanda centang pada Expand Template Widget

2. cari kode berikut atau yang mirip:
<div id='header'> <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'> <b:widget id='HTML2' locked='false' title='' type='HTML'> <b:includable id='main'>  <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </div>
3. masukan kode berikut setelah kode di atas:
<div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a href='#'>Home</a></li> <li><a href='#'>Menu1</a> <ul> <li><a href='alamat Sub menu1'>Sub menu1.1</a></li> <li><a href='alamat Sub menu1'>Sub menu1.2</a></li> <li><a href='alamat Sub menu1'>Sub menu1.3</a></li> <li><a href='alamat Sub menu1'>Sub menu1.4</a></li> </ul></li> <li><a href='#'>menu2</a> <ul> <li><a href='alamat Sub menu2'>Sub menu2.1</a></li> <li><a href='alamat Sub menu2'>Sub menu2.2</a></li></ul> </li> <li><a href='#'>Menu3</a></li> </ul> </div> </div>

4. Simpan Template dan lihat hasilnya. . . .
catatan: untuk yang ber warna biru, ganti dengan background yang anda inginkan
Untuk Menu dan Sub menu, ganti dengan menu yang anda inginkan kode di atas dapat anda edit sendiri seperti warna, ukuran dan lain-lain selamat mencoba....
Admin