Hi there! It’s Heather from Blogs By Heather and I am happy to share this Blogger tutorial with you at @ All She Cooks. Today you’ll learn how to create a drop-down menu in Blogger! How cool is that!
We will be modifying “code” to create this type of dropdown menu but don’t worry, we’ll take it one step at a time!
Step 1: Choose Colors
First, notice my nav bar area is pink. It matches the colors of my artwork in m banner. I also have the dropdown menu have a beige background. Notice the text color is shades of brown as well. So, what you want to do is first go HERE to choose a set of colors that best match your site’s color scheme.
- Main Nav Bar color
- Main Nav Bar text color
- Main Nav Bar link “hover” color (means it changes color when your mouse is over the text in the main menu)
- Dropdown Background color
- Dropdown text color
- Dropdown link “hover” color
So for mine example, here is what my set of colors look like:
- Main Nav Bar color: Pink hex value is #ecbbc0
- Main Nav Bar text color: Brown hex value is #8f6f53
- Main Nav Bar link “hover” color (means it changes color when your mouse is over the text in the main menu). Dark brown hex value is #382817
- Dropdown Background color: light beige hex value is #feecd6
- Dropdown text color: Brown hex value is #8f6f53
- Dropdown link “hover” color: Dark brown hex value is #382817
So be sure to jot down your colors as we will use the hex values in the code throughout this tutorial.
Step 2: Prep Work
In order to add the dropdown navigation bar, you have to be able to Add a Gadget to the header area, near your banner/header image. By default, many templates have this option set to “no” and therefore you don’t see the Add a Gadget link option in that area, only in the sidebar and footer areas right? So we need to first change that.
Go to Template, then Edit HTML and then click Proceed. If you are using the Old Blogger interface, then go to Design, then Edit HTML.
Once to the code window, scroll down towards the bottom looking for this block, specifically
You are going to change the values for:
- maxwidgets: from 1 to 10
- showaddelement: from no to yes
- locked: from true to false
so in the end it looks like this:
Click to Save Template (or Save in old Blogger interface).
Then when you go to Layout (or Page Elements in the Old Blogger interface), you will now see the Add a Gadget option in the header area above your banner/header/title area (like you see in my example above “Hand Stamped By Heather”.
So far so good, you are doing GREAT!
Step 3: Get Starting Set of Code
Next, everyone is going to start with the same set of code for the dropdown menu exercise consisting of 4 menu items.
Please go here and select all the code and copy it. Yes, it says its for a TypePad blog, but we are going to use the same code in Blogger!
While in Blogger, go to Layout (if using old Blogger interface, go to Design and then Page Elements), and then click Add a Gadget.
And then paste in all the code in the large text box area.
Step 5: Modify the code
In this part of the tutorial, we will scan through certain areas of the code and modify the existing hex color values with our set of hex color values, as well as make a few other modifications to the defaul, starting set of code. You will replace the sample values that I have used with your own.
First, let’s start with this set of code.
In the #centernav section The only thing here you want to play with is the width. Notice I set mine to 1100px that is because that is the width of my banner. Don’t know the width of your banner? Then try setting to 100%. Leave the ; (semi-colon).
Second in the #dropnav part of the code, you will set the background color to one of the colors you choose in Step 1. In my example, you see #ecbbc0 which is the pink you see in the main nav bar area.
In the next set of code you will modify the following:
- the #dropnav li a color is the color of the text on the main nav bar. Mine is set to #8f6f53 which is a brown. Please set that to one of your text colors chosen in Step 1.
- the #dropnav li a:hover color is what color the text on the main nav bar will turn to if your mouse goes over it. I set mine to #382817 which is a Dark Brown. Please set that to one of the colors you chose.
- the #dropnav li ul background-color is the color of the dropdown menu. In my example it is a light beige #feecd6. Please set to your color chosen in Step 1.
In the next set of code you will modify the following:
- the #dropnav li li a color is the color of the text in the dropdown menu. Mine is set to #8f6f53 which is a brown. Please set that to one of your text colors chosen in Step 1.
- the #dropnav li li a:hover color is what color the text on the dropdown will turn to if your mouse goes over it. I set mine to #382817 which is a Dark Brown. And notice is set the text-decoration to underline as well. Please set that to one of the colors you chose.
Now you have changed the color and some of the width elements to customize your new dropdown nav bar. Now it’s time to build it!
Step 6: Modify code in building the menu elements
In this section we are going to continue modifying the code, but the “fun stuff” where you are actually now building your menu!
Keep in mind that before you start this section, you want to jot down the pages on your site or the posts or the Labels (categories) you want to link to. What I mean is that you need the URL of each item you want to “link” to from your nav bar. You will see what I mean through the following examples in building my dropdown menus.
Continue through your code looking for this area for Menu #1. This is typically used for “Home” which would be your blog address.
You would replace the # in the href area with your blog address as you see in the example below. And replace the text Menu Item 1 with the word Home.
You are doing GREAT! Let’s keep going onto item #2. Here you may or may not replace the first # wiht the main title Menu Item 2 as you will be entering a bunch of sub menu items on this example.
Replacing hte # with actual URL addresses to pages, posts or categories on your site, or external links to other sites.
Let’s examine a sample. Notice sub menu item 1 in my example is now Scrapbooking and the # is changed to a long URL to the category on my site called “simply scrappin kit”. If you are looking for the URL of one of your caegories (labels) on your site, add the Labels widget and then when it appears on your sidebar, you can right-click on a category and get the URL to use here in your dropdown menu.
In my example I chose 4 categories from my blog to create a dropdown item called Popular Posts. You may also link to “pages” or other “posts” on your site. The key is getting the URL and replacing the #.
Onward to Menu #3. This is again the same process as Menu #2 above. Just more practice for you with replacing the # with URLs and replacing the text “sub menu item 1 thru 4″ with real labels for your menu.
In my example, I created a Popular Techniques menu that has 5 menu items. To create the 5th item, I simply copied the 4th and then made the substitution for the URL and the Label (sub menu item). Give it a try!
Last but not least, I did a simpler Menu #4. As you will see in this example, I do away with the sub menu items and simply leave a main item.
Removed all subnav section entirely in this example and just replace the # with a URL and text for the Menu Item 4.
Let’s see how you did! Click Save Changes.
If you find that it is not quite fitting into the space you want, then adjust the width we set in Step 5.
If the sub menu item text is larger than the background color area, then find #dropnav ul li code and in that section increase the width from 150px to say 200px to start with and increase from there.
If you have any questions please check out the drop-down menu notes here on my blog. That article is part of my 101 Blogging Tips series and links to other articles are well for creating a drop-down menu and additional examples.