Langsung saja berikut caranya :
1. Masuk/login dulu ke www.blogger.com anda.
2. Masuk ke Dashboard - Design - Edit HTML.
3. Kasih centang Expand Widget Templates.
4 . Cari kode ]]></b:skin> (Gunakan Ctrl+F biar cepet).
5. Copy dan Paste kode di bawah ini tepat di atas kode ]]></b:skin>.
/* Ini adalah kode untuk menu aselole - Mulai */6. Setelah itu cari Code dibawah ini :
#menu-asoy {
list-style-type:none; margin:-10px 0 0 0;
padding:0;
}
#menu-asoy li {
float:left;
padding-left:0;
margin:0 0px 0 0;
position:relative;
width:100px;
height:3em;
z-index:100;
background:transparent;
}
#menu-asoy li dl {
position:relative;
top:0;
left:0;
}
#menu-asoy li a, #menu-asoy li a:visited {text-decoration:none;}
#menu-asoy li dd {display:none;}
#menu-asoy li a:hover {border:0;}
#menu-asoy li:hover dd, #menu-asoy li a:hover dd {display:block;}
#menu-asoy li:hover dl, #menu-asoy li a:hover dl {padding-bottom:10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizx6AOmR7gM8VUVO-n3DNjankzZuGCydJx6YaeCRYql7a_tsWnudEL2iwdU0nAdUQOfWRT8rGQr5Mz_90lJ-ZuVSkKVJS0CxXJ91A4-5HvY5NzmBDoUNME_tP0vGjISG66zkPcRQ5fD2Or/s1600/over.png) no-repeat transparent;
}
#menu-asoy table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu-asoy dl {width: 100px; margin: 0; padding: 0;}
#menu-asoy dt {height:28px; width: 90px; margin:0; padding: 5px 5px 5px 5px; font-size: 17px; color: transparent; text-align:center;}
#menu-asoy dt a, #menu-asoy dt a:visited {display:block; color: #000000;}
#menu-asoy dt a, #menu-asoy dt a:hover {display:block; color: #000000;}
#menu-asoy dd {width: 110px; margin:0; padding:0; color: #000000; font-size: 1em; text-align:left; border-bottom: 1px solid #373737; border-right:
1px solid #373737; border-left: 1px solid #373737;
-webkit-box-shadow: 0px 3px 2px #000000;
-moz-box-shadow: 0px 3px 2px #000000;
box-shadow: 0px 3px 2px #000000;
}
#menu-asoy dd.last {border-bottom:10px solid #6b3d26;}
#menu-asoy dd a, #menu-asoy dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 5px; width:100px;
background:#242424;}
#menu-asoy dd a:hover {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 5px; width:100px; background:#6b3d26;}
#menu-asoy{
width: 100%;
padding-left:0px;
margin:0;
background:url(#) no-repeat center top;
}
/* akhir - Ini adalah kode untuk menu aselole */
<b:section class="main" id="main" showaddelement="no">kemudian ganti dengan kode
<b:section class="main" id="main" showaddelement="yes">7. Klik SAVE TEMPLATE.
8. Masuk ke Dashboard > Design > Page Elements.
9. Klik Add a Gadget.
10. Pilih Gadget baru : HTML/JavaScript.
11. Klik HTML/JavaScript, nanti mucul penampakan seperti ini .
12 Title kosongkan, kemudian Content isi dengan Code di bawah ini:
<div id='menu-asoy'><br/>13. Lalu SAVE TEMPLATE anda.
<ul id='menu-asoy'>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href='http://lora-malunk.blogspot.com/'>Home</a></dt>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href='#'>Arsip</a></dt>
<dd><a href='LinkSubMenu1'>SubMenu1</a></dd>
<dd><a href='LinkSubMenu1'>SubMenu1</a></dd>
<dd><a href='LinkSubMenu1'>SubMenu1</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href='#'>Conten</a></dt>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
<dd><a href='LinkSubMenu2'>SubMenu2</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><a href=''>Other</a></dt>
<dd><a href='LinkSubMenu3'>SubMenu3</a></dd>
<dd><a href='LinkSubMenu3'>SubMenu3</a></dd>
<dd><a href='LinkSubMenu3'>SubMenu3</a></dd>
<dd><a href='LinkSubMenu3'>SubMenu3</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br/><br/><br/><br/>
</div>
Semoga berhasil,
Sumber : http://lora-malunk.blogspot.com/2011/09/cara-membuat-menu-horizontal-dengan.html
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Membuat Menu Horizontal Keren. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
