cara buat menu
mungkin pengunjung semua sudah tau menu yang kaya apa .....
langsung aja ke tkp
masuk ke edit html. tulis kode di bawah ini pada inline style
blogger di antara
<head>
...
.top-nav {
position:absolute;
top:326px;
margin:0;
padding:0;
}
.top-nav a:link, .top-nav a:visited {
display: block;
background:#3A7CD2;
padding-left: 1em;
text-decoration:none;
color:#FFFFFF;
}
.top-nav a:hover {
background:#A9C2DA;
color:#000;
text-decoration:none;
}
.top-nav ul {
margin:0;
padding:0;
list-style: none;
}
.nav ul {
display:none;
position:absolute;
margin:0;
padding:0;
}
.nav li {
float: left;
position: relative;
width: 9em;
background-color: #3A7CD2;
font-size: 110%;
color:#FFFFFF;
}
.nav ul li {
background-color: #A9C2DA;
font-size: 100%;
margin-bottom: -1px;
margin-top: 1px;
padding: 0;
color:#FFFFFF;
}
.nav li:hover ul {
display: block;
}
...
]]></b:skin>
</head>
terus tulis kode di bawah ini di bawah header wrapper:
...
<body>
...
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog Anda (Header)' type='Header'/>
</b:section>
<div class='top-nav'>
<ul class='nav'>
<li><a href='http://www.namadomainanda.com'>Home</a></li>
<li><a href='http://www.namadomainanda.com'>About</a></li>
<li>Ebook
<ul>
<li><a href='http://www.namadomainanda.com'>1. ehehhehehehhe</a></li>
<li><a href='http://www.namadomainanda.com'>2. djdjjdjdjdjd</a></li>
<li><a href='http://www.namadomainanda.com'>3. djdjjdjdjdjd</a></li>
</ul>
</li>
<li>Tutorial
<ul>
<li><a href='http://www.namadomainanda.com'>1. ehehhehehehhe</a></li>
<li><a href='http://www.namadomainanda.com'>2. djdjjdjdjdjd</a></li>
<li><a href='http://www.namadomainanda.com'>3. djdjjdjdjdjd</a></li>
</ul>
</li>
<li>Gimana
<ul>
<li><a href='http://www.namadomainanda.com'>1. ehehhehehehhe</a></li>
<li><a href='http://www.namadomainanda.com'>2. djdjjdjdjdjd</a></li>
<li><a href='http://www.namadomainanda.com'>3. djdjjdjdjdjd</a></li>
</ul>
</li>
</ul>
</div>
...
</body>
</html>
selamat mencoba. sebelum mencoba, backup dulu template blogger anda. jangan sampai nangis gara2 percobaan ini. atau anda coba dulu di blogger yang dibuat khusus untuk percobaan
<head>
...
.top-nav {
position:absolute;
top:326px;
margin:0;
padding:0;
}
.top-nav a:link, .top-nav a:visited {
display: block;
background:#3A7CD2;
padding-left: 1em;
text-decoration:none;
color:#FFFFFF;
}
.top-nav a:hover {
background:#A9C2DA;
color:#000;
text-decoration:none;
}
.top-nav ul {
margin:0;
padding:0;
list-style: none;
}
.nav ul {
display:none;
position:absolute;
margin:0;
padding:0;
}
.nav li {
float: left;
position: relative;
width: 9em;
background-color: #3A7CD2;
font-size: 110%;
color:#FFFFFF;
}
.nav ul li {
background-color: #A9C2DA;
font-size: 100%;
margin-bottom: -1px;
margin-top: 1px;
padding: 0;
color:#FFFFFF;
}
.nav li:hover ul {
display: block;
}
...
]]></b:skin>
</head>
terus tulis kode di bawah ini di bawah header wrapper:
...
<body>
...
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog Anda (Header)' type='Header'/>
</b:section>
<div class='top-nav'>
<ul class='nav'>
<li><a href='http://www.namadomainanda.com'>Home</a></li>
<li><a href='http://www.namadomainanda.com'>About</a></li>
<li>Ebook
<ul>
<li><a href='http://www.namadomainanda.com'>1. ehehhehehehhe</a></li>
<li><a href='http://www.namadomainanda.com'>2. djdjjdjdjdjd</a></li>
<li><a href='http://www.namadomainanda.com'>3. djdjjdjdjdjd</a></li>
</ul>
</li>
<li>Tutorial
<ul>
<li><a href='http://www.namadomainanda.com'>1. ehehhehehehhe</a></li>
<li><a href='http://www.namadomainanda.com'>2. djdjjdjdjdjd</a></li>
<li><a href='http://www.namadomainanda.com'>3. djdjjdjdjdjd</a></li>
</ul>
</li>
<li>Gimana
<ul>
<li><a href='http://www.namadomainanda.com'>1. ehehhehehehhe</a></li>
<li><a href='http://www.namadomainanda.com'>2. djdjjdjdjdjd</a></li>
<li><a href='http://www.namadomainanda.com'>3. djdjjdjdjdjd</a></li>
</ul>
</li>
</ul>
</div>
...
</body>
</html>
selamat mencoba. sebelum mencoba, backup dulu template blogger anda. jangan sampai nangis gara2 percobaan ini. atau anda coba dulu di blogger yang dibuat khusus untuk percobaan
