Ah, my little ones, grasshoppers... wisdom you want? Knowledge you seek? Syntax I invert to sound wise?

What you need ... what you want... what you seek .... can be summed up in three words: drop-down menus!

Open your Blogger Dashboard. Click on Change Settings. Select the Template tab and "Edit Current." And before you do one more thing, SAVE A COPY of the template. Yes, back to Lesson One. Learn it well. Grasshopper.

Moving on. You've saved a copy of your template. You have your Blogger Template page open.

Locate the Sidebar content. This is assuming you have a sidebar. Not all templates do, so on some blogs (this one, for instance) the sidebar content is just placed at the bottom of the page, and will be found at the tail end of the template.

Most Blogger templates come with a default setting for Archives and Previous Post Items. You will need to peruse your blog carefully to find the default code.

Since templates are created by different authors, they are not consistent. Look for a section named something like Archive Links. Note that these areas will generally start with the tag that indicates a comment (as opposed to active code). Comments are used to help organize the template. They mark sections, like so:

<!-- Archive Links -->

Blogger has certain variables it uses, such as $BlogArchiveURL$ and $BlogItemPermaLink$. These Blogger Tags are shortcuts used to pull data from your blog. We'll start by utilizing the existing Blogger variables and set up two drop-down menus: One for Archives and one for Previous Posts. In a later lesson, we'll create our own customized indices, by topic.

Let's get started!

Step One -- Delete your DEFAULT ARCHIVE CODE, which generally looks like this:

<BloggerArchives>
  <a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>
</BloggerArchives>


Step Two -- Replace it with the DROP-DOWN MENU ARCHIVE CODE:

<select name="archivemenu" onchange=
"document.location.href=this.options[this.selectedIndex].value;">
  <option selected>- Archives -</option>
  <BloggerArchives>
  <option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
  </BloggerArchives>
</select>

You should be able to cut & paste the lines above into your template.

Now use the PREVIEW button to see your lovely new Archive menu! Yay! Ay yi yi yi yi yi (stop me now, please)

You can do the exact same thing for the PREVIOUS POST links. Delete the default code and paste in this:

<select name="previousitemsmenu" onchange=
"document.location.href=this.options[this.selectedIndex].value;">
  <option selected>- Previous Posts -</option>
  <BloggerPreviousItems>
  <option value="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></option>
  </BloggerPreviousItems> 
</select>

Notice the language of the drop-down menu code. You have a SELECT tag with OPTION values. Those are the building blocks we will use to create your custom topic indices as well. That's in the next lesson.

QUIZ:

What function do the SELECT tags serve? For reference, read HTML Dog's explanation.

What do you call something like $BlogItemPermalink$ between the two dollar signs? I would call it a variable, but Blogger calls it a Blogger Tag. Weird.

How did I finally, finally figure out how to put code snippets into my posts? I could tell you, but I would have to kill you. That's for much much later.