Blogger Drop Down Menu Tutorial

So you've been browsing the site, checking out all cool menu styles and you've

come across one that you'd love to add to your site. However, you're a bit confused since your site happens to be a Blogger page, and you're hesitant to mess with all that template code.

No worries! We'll run down the simple steps in this tutorial to get you setup with a drop down in no time. If there is any part of the tutorial that you don't understand, please let us know in the comments and we will try to help you out.

Find a Menu

Take a look at library for free and premium menu templates. Unfortunately, Blogger does not allow you to upload images so make sure to choose a menu that is pure CSS and does not require images. We have many menus in addition to drop down menus:

• Drop Down Menus
• Horizontal Menus
• Flyout Menus
• Vertical Menus
• Tab Menus
• Pure CSS Menus

Build your Menu

First thing's first, you have to generate a drop down menu to actually use for your site. I'm going to use the recent Flat Accented Red dropdown menu for this tutorial.

I'm going to make it nice and simple, just 3 options and that's it. Once I have that all configured, I'm gonna keep this page as-is for a moment and open a new tab/window to navigate to my Blogger's dashboard.

Add the CSS to Blogger

Once you've made your way over to your blog's control panel, click the template button on the left sidebar. From there you will see an Edit HTML button on the right, which you will then click to open a modal containing all the nitty gritty code of your blog.

Blogger's initial code my throw you off, since it mixes HTML with a couple of Blogger specific tags. However, if you scroll down enough past all the variables and extra stuff the usual Blogger template contains, you should find yourself with the actual CSS of the blog. You'll want to keep scrolling till you find the tag that looks like this:

<b:skin>

Inside this tag is all the CSS code for your blogger template. You will want to scroll down past all the existing CSS and then past in the CSS code for you menu right before closing ]]></b:skin> tag.

Add the HTML to Blogger

Now, this part varies with the template you're using so as an extra tip, let's do something first: Go ahead and save your template, closing the window once complete. Middle click the "View blog" button on top to open your blog in a new tab. In the following example, I've used the "Simple" template and am using Firebug to inspect the HTML. As you can see I've checked the different divs and have decided to use "content-outer" classed div as the parent to my menu. Why? Because I want my menu to be in the center column; the parent "content" spans the whole page, and the "content-inner" child has some padding I don't want.

So I'm going to go back to the previous page, Edit my template's HTML again and scroll down till I find the place I want to paste the HTML portion of my dropdown menu into (i.e. right after the opening tag for the "content-outer" div):

Once complete, you can save template and behold the awesome new dropdown installed in Blogger!