Baru belajar cara nak buat
dropdown menu dan submneu macam kat blog ni. By default, blogger platform takde built-in menu, so kena tambah sendiri. Actually, menu ni boleh guna untuk link to pages ataupun link to labels yang kita tag kat post kita tu.
Meh belajar sama-sama..
1. Kat Dashboard, klik "
Layout"
2. Klik "Add A Gadget" kat layout yg atas tu
3. Select "Add HTML/JavaScript"
4. Kat content, paste jer kod ni..
<div id="menubar">
<ul id="menus">
<li>
<a href="#">MenuItem</a>
</li>
<li>
<a href="#">MenuItem</a>
</li>
<li>
<a href="#">MenuItem</a>
</li>
<li>
<a href="#">MenuItem</a>
<ul>
<li><a href="#">SubMenuItem</a></li>
<li><a href="#">SubMenuItem</a></li>
<li><a href="#">SubMenuItem</a></li>
</ul>
</li>
</ul>
</div>
- replace "MenuItem" dengan label/nama yang korang nak display
- replace # dengan url untuk label tu. Kalau kita nak letak label yang kita tag kat post tu, contohnya "<a href="http://yatiemn.blogspot.com/search/label/Islam">ISLAM</a>
- Klik "Save"
- Klik "Save Arrangement" kat Layout
5. Klik "Template" -> "Edit HTML"
6. Cari "]]></b:skin>" . Tekan Ctrl +F, masukkan ]]></b:skin>
7. Pastu copy paste kod bawah ni kat atas/sebelum line ]]></b:skin>
/*-------- Begin Drop Down Menu -------*/
#menubar {
background: #8E8E8E;
width: 840px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:1px solid #B2FFFF;
height:35px;
}
#menus {
margin: 0;
padding: 0;
}
#menus ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menus li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #1A6680;
border-right:1px solid #1A6680;
height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
color: #FFF;
display: block;
font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#menus li a:hover, #menus li a:active {
background: #130000; /* Menu hover */
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#menus li {
float: left;
padding: 0;
}
#menus li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#menus li ul a {
width: 140px;
}
#menus li ul ul {
margin: -25px 0 0 160px;
}
#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
left: -999em;
}
#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {
left: auto;
}
#menus li:hover, #menus li.sfhover {
position: static;
}
#menus li li a, #menus li li a:link, #menus li li a:visited {
background: #B3B3B3; /* drop down background color */
width: 120px;
color: #FFF;
display: block;
font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px solid #1A6680;
}
#menus li li a:hover, #menusli li a:active {
background: #130000; /* Drop down hover */
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
/*-------- End Drop Down Menu -------*/
8. Klik "Save Template". Close
