How to Add Drop Down Menu in Blogger

 November 22, 2013  |  By Andrei Pogorelov 

The use of a drop-down menu is a highly convenient way to navigate. Unfortunately, most blogs at blogger.com do not have this handy feature. The main problem is that blogger.com does not include the Gadget for drop-down menus and most bloggers do not have the programming skills to work with HTML, CSS, etc. 


In this article, I will describe how to add a multiple level drop-down menu to your blog on blogger.com. Knowledge of HTML, CSS or JavaScript is not required. 

Let's start

As a starting point, I have created simple blog athttp://dropdownmenugenerator.blogspot.com/. The blog includes a few pages and a few posts. Now we will add the menu to our blog step by step. 

Step #1: Creating Our Menu

To create the menu, we will use the FREE online tool - Drop Down Menu Generator. The main advantage of the Generator is that it does everything automatically, quickly, easily and gives out the professional menu which does not require additional customization. You can find more details about the Menu Generator in the post: Unusual menu editor - Drop Down Menu Generator. 

First, we login to the Menu Generator account. If you have no account, create it. I do not recommend using the Demo Mode; your data will be available only for current session. 

• Setting the appearance
  
  The appearance of the menu is defined by a Template. As our blog has rounded corners, we choose the #R012 template from the collection. Next, we adjust the colors and the font in accordance with the style of our blog.
  
  
  




• Setting the structure
  
  Under the Structure Tab we define menu elements: items and separators. The Structure Editor is based on drag-and-drop functionality. It enables you to easily create a menu structure displaying multiple levels of hierarchy. For each item, we set the URL of the page which is the URL we copy from our Blogger site and paste it into the Link field in Menu Generator.
  
  To make our menu more user-friendly, we add an icon to each menu item. Menu Generator includes general icons (Home, Help, E-mail, etc.), icons for social networking (Facebook, Twitter, etc.), multi-purpose icons (arrows, dots, etc.) and others.
  
  
  




• Setting additional options, getting Embed Code or downloading
  
  Under the Additional Options Tab, we set the width to 100%, center alignment, and transparency. Our menu is finished now.
  
  If your account is running under the Basic or Professional plan, your menu is hosted on Menu Generator's server and you can use Embed Code to display the menu directly on the pages of your blog. So, the "Hosting the Menu on Google Drive" section can be skipped.
  
  As we have a free account, we save the menu to the local disk as "MyMenu1.zip" file by clicking on the Download button. The "MyMenu1" is a default name of our menu. Finally, we unzip it to have the "MyMenu1" folder. It includes the main JavaScript file "MyMenu1.js" as well as a few accompanying files. On the next step we will upload it to Google Drive.
  
  
  

Step #2: Hosting the Menu on Google Drive

Unfortunately, Blogger does not allow uploading JavaScript files into your blog. So, we will use the Google Drive as a host for our menu. The Google Drive is a reliable storage with unlimited bandwidth and 100% uptime. 

First, we go to Google Drive and login to our Gmail Account. Next, we create the new folder "MyMenu1" and upload all the files from the local "MyMenu1" folder to the "MyMenu1" folder on the Google Drive. Once uploading is done, we make this folder available for the public via Sharing Settings. 




Our main aim is to have a direct link to the main JavaScript file "MyMenu1.js". To get this link, we take the folder's URL and append the "MyMenu1.js" via / (slash) character. The final link for our menu is: 

https://googledrive.com/host/0BzKDEAJQJKlpSDM1V3NXcHZqUHM/MyMenu1.js

To be sure that the link is good, you can open it in a browser. Incorrect link causes the 404 error, "File not found", or similar. If the link is good, you will see JavaScript code of your menu. 

Step #3: Adding the Menu to Blog

Now we are ready to embed our menu into the blog. We open our dashboard in Blogger and choose the "Layout". In the Header Section we add new "HTML/JavaScript" Gadget. 




In the gadget's Content Box we paste the following code: 

<script src='https://googledrive.com/host/0BzKDEAJQJKlpSDM1V3NXcHZqUHM/MyMenu1.js' type='text/javascript'></script>

<div id="MyMenu1"></div>

The 

<script>

 tag creates a link between our blog and the menu stored on Google Drive in accordance with the URL for "MyMenu1.js" obtained in the previous step. The 

<div>

 tag includes the "MyMenu1" as an identifier and used to show our menu on the page. That's All! Now we can open our Blog and see the drop-down menu under the header section. 




It is important to note that a single menu instance is used for multiple pages of your blog. Since a menu is a single folder stored on Google Drive, it is enough to replace (re-upload) the current folder with a new one to see an updated menu immediately on every blog page. It is very useful because you do not need to edit every page. 

If your menu is hosted on Menu Generator's server, any modification made to the menu in Menu Generator will be immediately reflected in the menu on your web pages.

The basic characteristics of the menu created in Menu Generator

• Cross-Browser Support (IE 7.0+, Firefox 0.8+, Chrome 6.0+, Safari 1.2+, Opera 7.5+, etc.)
• Multiple levels of hierarchy
• Horizontal or vertical orientation
• Multilingual support
• Nice-looking transition effect
• Real PNG shadows
• Semi-transparency
• Support for tooltips
• Submenus are displayed over Flash movies and HTML select boxes
• The code is dramatically small
• No third-party libraries (like jQuery)
• Multiple menus on a single page are allowed

Conclusion

I hope this short article will help any blogger to create professional multi-level drop-down menu for his blog. Please do not hesitate to ask questions, we love responding! 

Links

Live Demo (blog with menu): http://dropdownmenugenerator.blogspot.com/ 
Menu Generator: http://www.dropdownmenugenerator.com 
Question Form: http://www.dropdownmenugenerator.com/ContactUs.aspx 
Google Drive: https://drive.google.com/ 

Resourcr http://www.dropdownmenugenerator.com/Blog.aspx?ID=20131122

Go back to home page