How to Create a Drop Down Menu in Blogger
1. In the Blogger dashboard, go to Layout
2. Click on Add a Gadget
3. Select HTML/JavaScript
4. Under Content, paste the following code
➜ Copas kat sini
5. Replace MenuItem with the appropriate menu label
6. Replace SubMenuItem with the appropriate sub menu label
7. Replace # with the appropriate URL
8. Click Save
9. Move the HTML/Javascript object to where you want the menu to appear
10. Click Save arrangement
11. Click on Template
12. Click Edit HTML
13. Click Proceed
14. Search for the following line:
]]>
15. Paste the following code directly above that line
/*-------- 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 -------*/
16. Click Save Template, then Close
➜ Copas dari sini
