Drop Down BlogRoll

Many of you have requested a Drop Down BlogRoll for your blogs. These save space while still allowing you to be able to include the blogroll in your sidebar. I have found one solution for this, and will continue to search for others, possibly with the ability to scroll through the list rather than just a drop down list.

Using flooble, I've been able to generate this expandable box:

League of Pastors' Wives Blogroll

[−]

It shows up wider here than it will be on your sidebar. It will fill the space wherever you put it (here it's a large space so it's a large box!).


There are two parts to including this on your blog:

Step 1:
Copy and paste the following code into the top of your page (either right after the "BODY" tag, or inside of the "HEAD" ... "/HEAD" tag). {Look for <> instead of "" around those words.} Do this only once per page, even if you are putting more than one box with expandable content onto that page.


<!-- flooble Expandable Content header start --><br /> <script language="javascript"> // Expandable content script from flooble.com. // For more information please visit: // http://www.flooble.com/scripts/expand.php // Copyright 2002 Animus Pactum Consulting Inc. //---------------------------------------------- var ie4 = false; if(document.all) { ie4 = true; } function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } } function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId); if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; } else { link.innerHTML = '+'; d.style.display = 'none'; } } </script><br /> <!-- flooble Expandable Content header end -->

Step 2:
Copy and paste the following code into the place on your page where you want the content to appear. Note that you can have more than one box with expandable content on your page. Also note, that the box will take up 100% of the width of whatever space it's in, so if you want the box to be narrower than it is normally, you need to simply put it into a table of the width you want.


<!-- flooble Expandable Content box start --><br /> <div style="border: 2px dashed #0080FF; padding: 0px; background: #E6E6E6; "><table border="0" cellspacing="0" cellpadding="2" width="100%" style="background: #FFFFFF; color: #0080FF; "><tr><td>League of Pastors' Wives Blogroll</td> <td align="right"><br /> [<a title="show/hide" id="exp1222108371_link" href="javascript: void(0);" onclick="toggle(this, 'exp1222108371');" style="text-decoration: none; color: #0080FF; ">−</a>]</td></tr> </table><div id="exp1222108371" style="padding: 3px;"><script language="javascript" src="http://rpc.blogrolling.com/display.php?r=a467517e6355336821b5fcfb141eab62" type="text/javascript"></script></div></div><noscript><a href="http://www.flooble.com/scripts/expand.php">this expanable content box is made using a <br /> free javascript from flooble</a> | <a href="http://www.blackjack-primer.com">Blackjack Guide</a><br /> </noscript><br /> <script language="javascript">toggle(getObject('exp1222108371_link'), 'exp1222108371');</script><br /> <!-- flooble Expandable Content box end -->


I've tried to match the colors to the LOPW Blog here, and they may not match your blog. If you understand code at all, you may be able to fiddle with the color values in the above code to adjust things for your blog, if you like. I'm not able to customize too much from here.

Stay tuned for more options as I find them. This is a good start!