0 Cara Membuat Menu Horizontal Dengan Model Aselole

1. Masuk/login dulu ke www.blogger.com dengan akun masing2.
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 */
#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/AVvXsEi1Cords2SA8jtem6bJt21f878ERE28V_4hZB8UZbYDWHAtk98O1C0vS0NVgViqeH6pQhMwTvBu0AcNpQcST7gHlapfLHL1euWzQtMipXQO1T0HFYvFDku7y8aaMJQCjFEsbM9nFCnVRCn4/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 */

6. Setelah itu cari Code dibawah ini

<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/>
<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>

13. Lalu SAVE TEMPLATE anda.

SEMPURNA......

Komentar →