Build your Menu
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
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 strange
"]]></b:skin>" tag.
Once found, you'll want to click on the line before it and hit enter.
You can now go back to your CSS dropdown menu for a moment and copy the
CSS (in the CSS tab) and paste it there:
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!
Thank You ... !
