Georgia Lou Studios

Welcome to the Help Center!

Drop down menu setup

Follow

This article covers how to set up the drop down menus. Watch the video or see the written directions below.

Remove the Single Level Menu

  1. Navigate to the Layout page in the Blogger Dashboard.
  2. Click the Edit link in the bottom right hand corner of the Navigation menu widget. A Configure Page List window will open.
  3. Click the Remove button to delete the Page List (single-level navigation menu).

 

Add an HTML/JavaScript Gadget

  1. Click on the Add a Gadget link in the navigation section of the Layout page. screenshot-www blogger com 2015-07-14 13-00-16
  2. The Add a Gadget window will open.  Scroll down until you find the HTML/JavaScript gadget and click the blue and white add icon next to it to add the gadget to your page.Screen Shot 2015-07-14 at 12.59.14 PM
  3. The Configure HTML/JavaScript window will open.

 

Add custom drop down menu code to gadget

  1. Open the text file blogger-menu-dropdowns.txt using a plain text editor like Notepad or TextEdit.  NOTE: Microsoft Word is not recommended for this.
  2. You may choose to edit your links within your text editor and save a copy of your Dropdown menu code (HIGHLY RECOMMENDED).
  3. On Line 4 of the code you will see a line that looks like this:

<li class=”active”><a href=’LINK’>Home</a></li>

To add your homepage link, where it says LINK, cut and paste the web address for your homepage. Be careful to leave the quotes in place.

4. On Line 5 of the code, you can add your next first level tab.

<li class=”sub”><a href=’LINK’>CATEGORY 1</a>

Cut and paste your page web address where it says LINK. You can change CATEGORY 1 to any name you like for your menu tab.

5. Lines 7 & 8 are examples of sub-menu or drop down links. Replace URL LINK TO LABEL/WEBSITE/PAGE with the web address of your submenu item. Replace SUB-CATEGORY 1A with the name of your submenu tab.

6. You can cut and paste lines to make more top level tabs or drop down tabs.

7. Once you have completed editing your menu, save a copy.

8. Now cut and paste the entire code into the Content section of the HTML/Javascript gadget we created above.Screen Shot 2015-07-14 at 1.10.19 PM

9. Click the Save button.

Was this article helpful?
0 out of 0 found this helpful

Comments

  • Avatar
    Muhammad Zain

    Hi, i want setup file for Drop Down Menu.

Powered by Zendesk