Drop Down Menus

This is a great way to save space on your blog. I found this amazing resource over a Sneaky Momma Blog Design, she has got some great tutorials. You know me I like to try to make it REALLY user friendly. Thanks Jill! Resource: Sneaky Momma Blog Design and Technical Bliss

Step 1 – Make a COMPLETE LINK LIST

In Word create a link list of all the links (along with a title) you want to put in your Drop Down Menu, like this:

<option value="YOUR URL LINK A"/>YOUR TITLE A

Copy and paste the code above as many times as you need for all your links. It would look like this for four links:

<option value="YOUR URL LINK A"/>YOUR TITLE A

<option value="YOUR URL LINK B"/>YOUR TITLE B

<option value="YOUR URL LINK C"/>YOUR TITLE C

<option value="YOUR URL LINK D"/>YOUR TITLE D

This method will also help you put your links in alphabetical order if you choose.

Step 2 – Create a planning document

Using Word or Windows Live Writer create a planning document.

You will remove all the spaces from your COMPLETE LINK LIST like this:

<option value="YOUR URL LINK A"/>YOUR TITLE A<option value="YOUR URL LINK B"/>YOUR TITLE B<option value="YOUR URL LINK C"/>YOUR TITLE C

Then you will add your complete link list in place of the space marked COMPLETE LINK LIST in bold in the code below. This will be your finished code, so be sure to save it so you can easily make changes and additions. Please note there is no space between the Title of your Drop Down Menu and YOU COMPLETE LINK LIST.

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);"><option value=""/>Title of YOUR Drop Down MenuCOMPLETE LINK LIST HERE</select>

Don’t forget to change the Title of YOUR Drop Down Menu to match your link list!

Step 3 – Add a Gadget

Go to CUSTOMIZE/LAYOUT/PAGE ELEMENTS/ADD A GADGET

Select Add HTML Java Script, when the window opens, copy and paste your finished code. Select Save, and view blog.

Find Word Document Instructions HERE.

Here’s to more happy scrapping, and

Hugs from the heart,

Jeanette