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 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 here:
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!
0 comments:
Post a Comment