steps to create drop down list in blogspot?

[ramya sree]

how to create a sub taps in a tap

[365]

You are here: Home / Blogging Tutorials / How to Create a Drop-Down Menu In Blogger
How to Create a Drop-Down Menu In Blogger
October 12, 2012 by Jessica
[Pin It]
89



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!
Hand Stamped By Heather

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