How to install drop-down navigation menu

Hello! Thank you so much for purchasing a drop-down navigation menu for your 17th Avenue Blogger Template. Below you will find instructions for configuring your new menu and installing it on your blog.

How to configure your menu

Understanding the HTML code

In the code below, you'll notice each line of code has two main parts: a "URL marker" and a "text marker."

As an example, a URL marker might say "URL LINK." A text marker might say "NAV TITLE" or "SUB CATEGORY 1."

The URL marker is where you will paste the URL for a specific page/label.

The text marker is where you will add the title that corresponds to the URL.

Make sure when adding your links, that you keep everything around the URL markers and text markers exactly the same. 

Obtaining URLs

To paste a URL into the code, copy it directly from the address in your browser while you are on the page you want to link to. Do NOT try to type the URL into the code yourself, otherwise you'll likely get a page error when you click on that link.

Linking to labels

To link to a post label/category in your navigation bar, visit a post on your blog that is using the label you want to use. In the post footer, find the label and click on it. This will take you to a page just for that label. While on the "label page," copy the URL from your address bar and paste in one of the URL markers.

Play with it!

This code is very malleable. You don't have to stick to the format and number of links that comes with the code by default. If you'd like to have a drop-down with 10 links, go for it! You'll find codes for adding more links at the very bottom of this page.

<div id='NavMenu'>
<ul id='nav'>

<li><a href='YOUR BLOG HOMEPAGE URL HERE'>Home</a></li>

<li><a href='URL LINK'>NAV 1 TITLE</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1B</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1C</a></li>
</ul>
</li>

<li><a href='YOUR LINK'>NAV 2 TITLE</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li>
</ul>
</li>

<li><a href='YOUR LINK'>NAV 3 TITLE</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3B</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3C</a></li>
</ul>
</li>

<li><a href='YOUR LINK'>SINGLE LINK TITLE</a></li>


<!-- IF YOU NEED TO ADD MORE CATEGORIES, ADD THEM HERE -->


</ul>
</div>
</div>

How to install the menu on your blog

  1. Upload your new template code file at Blogger > Theme > Backup/Restore.
  2. Add all of your links and titles to the code above.
  3. Copy the code above.
  4. Go to Blogger > Layout. Find the "drop-navigation" section and click Edit on the HTML/Javascript widget.
  5. Paste your code in the code box. Save.