Related read: 15 Resources For Blogging On A Budget
In this post, I'll be sharing how to add a drop-down menu to Blogger. I am in no way an HTML expert nor do I fully understand HTML but creating a drop-down menu was one of the first customizations I made. Mainly because the default menu in blogger didn't allow me to organize my menu by using a drop-down.
Step 1: Back up your blog
Before you do any customization or edit the HTML for your blog you want to make sure you have a backup in case you make a mistake you can't fix. You can back up your blog by- Go to Template
- Click the Back/Restore button in the top right
- Select Download Full Template
Step 2: Open Notes or Notepad
This is where you will create the code for the drop-down menu. I've found it's easier to create code outside of the Blogger platform and then copy and paste it. Notes or Notepad is better than Word for creating code because it doesn't add any formatting to the text allowing for a clean cut and paste.Step 3: Copy and paste this code into Notes or Notepad
<!-- start navmenu --> <ul id='cssnav'> <center> <div id='NavMenu'> <div id='NavMenuleft'> <ul id='nav'> <li><a href='#'>MAIN MENU 1</a></li> <li><a href='#'>MAIN MENU 2</a> <ul> <li><a href='#'>SUB-MENU 1</a></li> <li><a href='#'>SUB-MENU 2</a></li> <li><a href='#'>SUB-MENU 3</a></li> <li><a href='#'>SUB-MENU 4</a></li> </ul> </li> <li><a href='#'>MAIN MENU 3</a></li> </ul></div> </div> <!-- end navmenu --></center></ul>
Step 4: Start entering your page information
- Replace the #s with the page URLs you want to link to
- Replace the words MAIN MENU AND SUB-MENU with the names/words you want to show up in the drop-down menu
- To create multiple menus just cut and paste the code below and place it before or after </li> codes
<li><a href='#'>MAIN MENU 2</a> <ul> <li><a href='#'>SUB-MENU 1</a></li> <li><a href='#'>SUB-MENU 2</a></li> <li><a href='#'>SUB-MENU 3</a></li> <li><a href='#'>SUB-MENU 4</a></li> </ul> </li>
Step 5: Place the code in your template
- Go to Layout
- Select Add a Gadget to add a widget to your blog
- You'll want to add the HTML/Javascript widget
- Copy and paste the code you edited in Notes or Notepad into the widget
- Click Save
Step 6: Add style to the menu
- Go to Template
- Click Customize under the Live on Blog image
- Select Advanced and scroll down to click on Add CSS
- Copy and paste the following code then change the sections in blue font with the colors an font styles you want for your menu
/* ----- CSS Nav Menu Styling ----- */
#cssnav {
border: 0px;
margin: 0px;
padding: 0px;
width: auto;
font: normal normal 13px Helvetica; /* Template Designer - Change Font Type, Size, Etc */
color: #ffffff; /* Template Designer - Change Font Size */
}
#cssnav ul {
background: #c4c4c4 repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 40px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}
#cssnav li {
float: none; /* none = centre */
display: inline-block;
padding: 0px;
}
#cssnav li a {
background: #c4c4c4 repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
text-align: center;
font: normal normal 13px Helvetica; /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}
#cssnav > ul > li > a {
color: #ffffff; /* Template Designer - Change Font Color */
}
#cssnav ul ul a {
color: #ffffff; /* Template Designer - Change Color */
}
#cssnav li > a:hover, #cssnav ul li:hover {
color: #000000; /* Template Designer - Change Font Color on Hover */
background-color: #ffffff; /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}
#cssnav li ul {
background: #000000 repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}
#cssnav li:hover ul {
display: block;
}
#cssnav li li {
background: #000000 repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}
#cssnav li:hover li a {
background: #cccccc; /* Template Designer - Change Background of Link on Hover */
}
#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}
#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: #000000; /* Template Designer - Change Text Color on Hover */
background-color: #ffffff; /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
--></style>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'
type='text/javascript'></script>
<script type='text/javascript'>//<
0 comments