6:10 AM By Unknown

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 Template Settings 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.
Blogger Template Code 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:
Dropdown CSS

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.
Inspecting HTML with Firebug 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):
Paste dropdown HTML into template editor Once complete, you can save template and behold the awesome new dropdown installed in Blogger!

0 comments:

Post a Comment