When I first start my blog, I've been using the "Pages" gadget just to sort of my post according to their genre, but then I wasn't that satisfied on the outcome; so I came out with a plan of using drop down menu so it will be more accommodating to use; but unluckily...I'm not that knowledgeable about HTML nor javascript, that's why I failed that subject on my college days not even knowing that I'm gonna use it this days... so I try to study it on my own...
So here I'm gonna show you some basic things on HOW TO CREATE A DROP DOWN MENU FOR BLOGGER...with my own modifications and added notes.
What you see above is my blog's drop down menu... I'd made it a week ago from scratch and good thing is that I've made it work.
FIRST:
We're going to build-up a code as foundation. So read on and get familiar with the structure.No need to copy and paste yet.(just make sure to use your notepad so that your blog wont look a little messy on trying different codes)
<div id='menubar'>
<ul id='menus'>
<li><a href='LINK'>TabName1</a></li>
<li><a href='LINK'>TabName2</a></li>
<li><a href='LINK'>TabName3</a></li>
<li><a href='LINK'>TabName4</a></li>
</ul>
</div>
the code above is a basic set of tabs, displayed in a horizontal row. To create the SUBMENU items (the one that eventually drop down to give users more options to choose from) we need to add a little more codes inside the "TabName" under which you want the drop down option to appear...
The bunch of codes will look like this:
<ul>
<li><a href='LINK'>DropDownName1</a></li>
<li><a href='LINK'>DropDownName2</a></li>
<li><a href='LINK'>DropDownName3</a></li>
</ul>
so there are three lines that are exactly the same, that gives the users three choices in a drop down menu in whichever tab we attach it to. You can add more lines if you want more options in your drop down menu or you can delete a line if you want fewer items.
Here I made a sample making the "TabName4" a drop down with more options. We're going to place the extra bunch of code above just before the closing </li> of TabName4.
<div id='menubar'>
<ul id='menus'>
<li><a href='LINK'>DropDownName1</a></li>
<li><a href='LINK'>DropDownName2</a></li>
<li><a href='LINK'>DropDownName3</a></li>
<li><a href='LINK'>TabName4</a>
<ul>
<li><a href='LINK'>DropDownName1</a></li>
<li><a href='LINK'>DropDownName2</a></li>
<li><a href='LINK'>DropDownName3</a></li>
</ul>
</li>
</ul>
</div>
Just replace the word "LINK" with the direct hyperlink that points to the appropriate page, post or website.
Place the code above in an HTML/JavaScript widget. if you alredy have "Pages" installed you'll eventually want to remove it from your blog's layout.
SECOND:
Download a backup of your current template in case something goes wrong.
Once you’ve backed up your template, click the "Edit HTML" button (under “Live on Blog”).
Notice how each line of code starts off in a green color, and each line is numbered.
Look for the line that says: <b:skin>...</b:skin>
(In my template it's around line 13; this may vary.)
Click the little dots in between those tags.
It will expand a ton of code, and that code will appear in blue.
Scroll down, and find where the code turns from blue back to green. At that point, there is a line that says: ]]></b:skin>
Sometimes it gets displaced, so you might want to put it on its own, separate line; some of it might be blue, some might be green. Don’t worry about that: Just make sure all characters stay together: ]]></b:skin>
Now, copy and paste the following chunk of code, and paste it on a line immediately BEFORE ]]></b:skin>
/*-------- Begin Drop Down Menu -------*/
#menubar {
background-color: transparent;
width: 840px;
color: #424338;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid ##8C001A;
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:0px solid #1A6680;
border-right:0px solid #1A6680;
height:auto;
}
#menus li a, #menus li a:link, #menus li a:visited {
color: #FFFFFF; /* This changes the text color of visited links. */
display: block;
font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 5;
/* change margin value to 0 if you want no space between tabs */
/* change 14 to another number to increase or reduce font size */
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#menus li a:hover, #menus li a:active {
background: #424338; /* This is the main menu background color when a user hovers. */
color: #FFFFFF; /* This changes the text color. */
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: #424338; /* This is the background color for the drop down menu. */
width: 120px;
color: #FFFFFF; /* This changes the text color. */
display: block;
font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
/* change 14 to another number to increase or reduce font size */
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:0px solid #1A6680;
}
#menus li li a:hover, #menusli li a:active {
background: #424338; /* This is the background color for the drop down menu when a user hovers. */
color: #FFFFFF; /* This changes the text color. */
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
/*-------- End Drop Down Menu -------*/
That’s it! Click the "Save Template" button and you're done!
