Tutorial | Creating & Adding Dropdowns In Blogger

The first order of business is to congratulate the winners of my relaunch giveaway this past weekend!

Hanne Vandersteen has won both the Simple Branding Service and a copy of my eBook "The EAE Bloggers Guide to Cleaning Up Your Blog"!

Congratulations Hanne! I look forward to building you a gorgeous new brand for your blog Hanne Vandersteen and I hope my eBook will guide you in all the right directions to help you implement that brand once we are finished working together!

And Natasha of Nimble Whale has won the Complete Branding + Design Package! I am looking forward to working with you as well to build your brand and blog design and get you all set up for a wonderful blogging career!

Thank you to everyone who entered! This was such fun! Expect another major giveaway after the new year Readers!

Now on to todays post...

Unfortunately Blogger does not have an option to utilize dropdown menus. Although I am not particularly a fan of using dropdown menus because they lack mobile optimization. There are times, however that a dropdown is needed and that's when I employ the hand CSS Menu Maker tool.

Tutorial - Creating and Adding Dropdown Menus - i don''t do them often but when i need to create a drop down menu i always turn to css menu maker. here's all you need to know to make your own

To kick off Tutorial week I though creating a CSS + HTML dropdown menu would be a fun way to really get the ball rolling. Often considered complex and just not worth the effort, drop downs have had the bad luck of being overlooked and rarely used.

I have had a few clients ask for dropdowns because their blogs have grown to such epic size that they need a cleaner and more organized look and feel.

So as soon as you are ready to see my step by step tutorial to create and add a drop down menu to your Blogger blog, clicky clicky and let's do this!

Step 1 | Create Your Account

The very first thing you need to do is create an account. With a free account you can only create so many drop down menus but if you are blogging for yourself and only need to add one to your own blog then this is perfect and you won't need to upgrade.

Tutorial | Creating & Adding Dropdowns In Blogger

Step 2 | Choosing A Menu Type

After you have created your account you will want to make sure that you browse the different menus. Some only allow for one parent and child menu where others will allow one parent with multiple child menus. You can also choose from vertical and horizontal options and most of them will allow you to change the colors to match your brand. Look through them all and pick the one you feel will compliment your blog best.

Step 3 | Choose a Style

As with what I said above, you will want to make sure that you are choosing a menu that both compliments as well as suits the needs of your blog. Make sure you are checking out every menu option and customizing the best one for you and your blog.

Step 4 | Plug In Your Details

This is probably the most time consuming portion of creating your drop down. You should have all your pages organized and already live on your blog before you go about adding all your information. You'll need both a title AND the direct page URL in order to make this work so put in plenty of thought here before you really get started. Also, if you plan to go back and edit, change or create new pages, you'll want to plug them back into the CSS Menu Maker coding on the CSS Menu Maker website for them to work correctly.

Step 5 | Adding Your Menu To The Blogger Template

Once you have done everything according to instruction above, it's time to head to your Dashboard >> Template >> Edit HTML. Remember to always back up your blog in your settings before playing in your template code.

You will first need to locate the ]]></b:skin> code in your template.

Step 6 | Adding the CSS

Copy the CSS from the Menu you have created.

And add it directly under the ]]></b:skin> Then SAVE your template!

Step 7 | Adding the HTML to Blogger

Now you have to add the HTML. Simply create a new gadget in your blogger layout wherever you want your menu to appear. For horizontal menus you should place this code directly above or below your blogs header. Vertical menus will look best in your sidebar.

Copy the HTML from the Menu Maker code and paste it right into the HTML Gadget you created on your blog and save. Then move it to where you want it in your layout and "Save Arrangement".

Step 8 | Save and View

Your menu is now LIVE and in all it's gorgeous glory. Head to your blog and see your work. You can always go back to the CSS Menu Maker website and the menu you have created to make any changes.