Tuesday, June 26, 2007

Linda's How-Do-I Series - Drop Down Menu's For Your Blog Sidebar

If you're anything like me then you have a million things on the sidebars of your blog. That's great for supplying lots of information, but it can get a little "busy" and crowded in the sidebar. A little organization would be helpful.

Well, I finally figured out how to add drop-down menu listings to the sidebar of my blogs. You do it using HTML <***form><***/form> and <***option> <***option> (minus the 3 ***'s that are there to display the HTML code in this article) commands.

I'd been looking for ways to organize my sidebars for all my links sections and first saw this particular drop down listing usage on Ruth's "Woolly Wormhead's Ripping Yarns" Blog. I thought she did a terrific job of organizing her sidebar. She, too, had a LOT of information on her sidebars. So, I thought, "Hmmm..... I could use that on my blogs, too."

So, I did some research on how to add drop down menu's for listing links on the sidebars of your blogs.

I decided to utilize this for the "Linda's How-Do-I Series" of E-Pamphlets listings that I have on the sidebars of my blogs, for the categories of articles that I have on several of my blogs that I haven't converted to a new Blogger.com template, and for my doll patterns categories on my Linda's Blog.

I'm happy to report that it works wonderfully and I love how my sidebars are organized now.

Let's say that I want to use drop-down menu's to list all my doll pattern categories with a sidebar title and listing and have it look like this on the sidebar of my blog:

Linda Walsh Originals Doll Pattern Categories
    To see all my pattern categories just click on the link in the drop-down menu below for the category you would like:

Here's the HTML code your would use (minus the 3***'s in each section to get the HTML code to display in this post) for the above. I reduced it down to the first 4 categories on my doll patterns list and single spaced the commands to make it easier for you to follow. Here's the HTML code for that:

<***h2 class="sidebar-title">Linda Walsh Originals Doll Pattern Categories<***/h2>
<***strong>To see all my pattern categories just click on the link in the drop-down menu below for the category you would like:<***/strong>
<***p align="center">
<***!-- Linda's Pattern Categories-->
<***select style="FONT-SIZE: 10px; FONT-FAMILY: verdana, Arial, sans-serif" onchange="document.location=">
<***option value="">Linda Walsh Originals Pattern Categories<***/option>
<***option value="http://www.lindawalshoriginalsepatterns.com/shop/index.php?act=" catid="28">NEW Doll Patterns<***/option>
<***option value="http://www.lindawalshoriginalsepatterns.com/shop/index.php?act=" catid="1">Gray Is Beautiful Series<***/option>
<***option value="http://www.lindawalshoriginalsepatterns.com/shop/index.php?act=" catid="29">Brothers & Sisters<***/option>
<***option value="http://www.lindawalshoriginalsepatterns.com/shop/index.php?act=" catid="2">Victorian "Ladies"<***/option>
<***!-- Linda's Pattern Categories -->

The first <***option> line contains the title that will be displayed in the drop-down menu box. The following 4 <***option> lines are the individual URL's of my doll pattern categories that I want to direct you to. You just CLICK on the link in the drop-down menu and it brings you to that particular URL.

Using drop down menu's greatly reduces the size of your sidebars. If you're anything like me you need to do this as the sidebars just get to be too long.

I'm sure that I will be utilizing this even more and reducing my sidebars further, but thought you'd like to see how I did this for now.

So, what do you think? Do you like my organization?

No comments:

Post a Comment