Sub menu sendiri berfungsi untuk mempertegas salah satu menu tersebut.
misalnya dalam satu menu berjudul sport, maka sub menunya bisa berisi
dari macam-macam olahraga semisal sepakbola,motogp,tinju,tennis dan
masih banyak lagi. contohnya bisa dilihat disini atau lihat gambar di bawah ini.
Cara membuatnya silahkan ikuti langkah langkah di bawah ini:
1. Login ke blogger2. Klik rancangan kemudiat edit html
3. Cari kode </head>
4. Copy dan paste kode dibawah ini sebelum atau diatas kode </head> kemudian simpan template
<style type='text/css'>
#foxmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg1rAKhFdqUIaz6R_CKwBc8XycGoE4GsOY47kUGfcrWfZhgLuQVk2ejw4wsBBDVPnJascnV0dAGbuJbOi6rjiLny4-wtQOdQRtvu0biX2FG_-j54PN-R7hYA4XP68kkbraahKr3C3z1Vf6/) repeat-x;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #474747;
font: 14px "Century gothic",verdana, Arial, sans-serif;
font-weight:normal;
}
#menu ,#menu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}
#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}
#menu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWt9sKsJKZrXKgdFvlNl_FGPFopJYzML54-doPZgHX-gZRdNVMiJnLS-y6JNL0OoPXInNqY_PbXR6ITS7UiZ7D4Hp0ZyF1oHElmJzSp1OJmnJZTo0i9t5LczYT-i_fy1TKax6PCusui9lw/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}
#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}
#menu li li {
float: left;
margin: px 0px 0px 5px;
padding: 0px;
width: 130px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg1rAKhFdqUIaz6R_CKwBc8XycGoE4GsOY47kUGfcrWfZhgLuQVk2ejw4wsBBDVPnJascnV0dAGbuJbOi6rjiLny4-wtQOdQRtvu0biX2FG_-j54PN-R7hYA4XP68kkbraahKr3C3z1Vf6/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
}
#menu li li a:hover, #menu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWt9sKsJKZrXKgdFvlNl_FGPFopJYzML54-doPZgHX-gZRdNVMiJnLS-y6JNL0OoPXInNqY_PbXR6ITS7UiZ7D4Hp0ZyF1oHElmJzSp1OJmnJZTo0i9t5LczYT-i_fy1TKax6PCusui9lw/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}
#menu li:hover ul {
left: auto;
display: block;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
</style>
5. Kembali lagi ke rancangan kemudian page html dan klik "Add a gadget"#foxmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg1rAKhFdqUIaz6R_CKwBc8XycGoE4GsOY47kUGfcrWfZhgLuQVk2ejw4wsBBDVPnJascnV0dAGbuJbOi6rjiLny4-wtQOdQRtvu0biX2FG_-j54PN-R7hYA4XP68kkbraahKr3C3z1Vf6/) repeat-x;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #474747;
font: 14px "Century gothic",verdana, Arial, sans-serif;
font-weight:normal;
}
#menu ,#menu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}
#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}
#menu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWt9sKsJKZrXKgdFvlNl_FGPFopJYzML54-doPZgHX-gZRdNVMiJnLS-y6JNL0OoPXInNqY_PbXR6ITS7UiZ7D4Hp0ZyF1oHElmJzSp1OJmnJZTo0i9t5LczYT-i_fy1TKax6PCusui9lw/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}
#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}
#menu li li {
float: left;
margin: px 0px 0px 5px;
padding: 0px;
width: 130px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg1rAKhFdqUIaz6R_CKwBc8XycGoE4GsOY47kUGfcrWfZhgLuQVk2ejw4wsBBDVPnJascnV0dAGbuJbOi6rjiLny4-wtQOdQRtvu0biX2FG_-j54PN-R7hYA4XP68kkbraahKr3C3z1Vf6/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
}
#menu li li a:hover, #menu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWt9sKsJKZrXKgdFvlNl_FGPFopJYzML54-doPZgHX-gZRdNVMiJnLS-y6JNL0OoPXInNqY_PbXR6ITS7UiZ7D4Hp0ZyF1oHElmJzSp1OJmnJZTo0i9t5LczYT-i_fy1TKax6PCusui9lw/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}
#menu li:hover ul {
left: auto;
display: block;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
</style>
6. Setelah terbuka pilih "html/java script" dan pastekan kode di bawah ini
<div id="foxmenucontainer">
<div id="menu">
<ul>
<li><a expr:href="data:blog.homepageUrl">Home</a></li>
<li><a href="#" title="#">About</a></li>
<li><a href="#" title="#">WebDesign</a>
<ul>
<li><a href="#" title="#">HTML</a></li>
<li><a href="#" title="#">CSS</a></li>
<li><a href="#" title="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#" title="#">Subscribe</a></li>
<li><a href="#" title="#">Register</a></li>
<li><a href="#" title="#">Contact</a></li>
</ul>
</div>
</div>
7. Simpan dan lihat hasilnya <div id="menu">
<ul>
<li><a expr:href="data:blog.homepageUrl">Home</a></li>
<li><a href="#" title="#">About</a></li>
<li><a href="#" title="#">WebDesign</a>
<ul>
<li><a href="#" title="#">HTML</a></li>
<li><a href="#" title="#">CSS</a></li>
<li><a href="#" title="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#" title="#">Subscribe</a></li>
<li><a href="#" title="#">Register</a></li>
<li><a href="#" title="#">Contact</a></li>
</ul>
</div>
</div>
apabila ada pertanyaan silahkan tinggalkan di dalam kotak komentar di bawah
0 komentar:
Posting Komentar
SILAKAN TINGGALKAN KOMENTAR KALIAN
TERIMAKASIH