Monday, January 12, 2009

Creating A Scroll Bar for Your Link List

by Bonnie Calhoun

Hi all! It's been a while since I had something new to tell you, mainly because I've been busy with other projects.

One of my friends ask me to help her create a scroll bar for her rather long link list. So I thought I'd share the result with you.

It's rather easy to accomplish. As with everything I tell you, make sure you have saved a copy of your template in NotePad before you go farting around with it. And when you add code to your HTML, please....use the "Preview" button to see if that is what you want. If it is not, hit the "Discard Edits" button and you will be back where you started from.

Only hit SAVE...when you are sure you have the proper results! for the easy part...go to your LAYOUT tab. Click Edit HTML. Scroll down in the code until you see:

/* Sidebar Content
----------------------------------------------- */
/* Sidebar Content */

Right below that add:

#LinkList1 {

The number '150' in the height tells you how tall the box will be before it show the scrollbar, (illustrated to the left) you can change that number at will!

If you only have one link list in your sidebar, this will work as written. But if you add more than one scroll bar you will have to scroll down in your HTML is see what the list is called to create a scrollbar for it. Typically the default names will be LinkList1, LinkList2...and so on. Change the name in the piece of code that you add according to that name that the widget gives it.

And add the piece of code for each list that you want to have a scrollbar!

One other NOTE...your sidebar section in your HTML might not be names exactly the same as might just say:



/* Typography :: Sidebar
----------------------------------------------- */

Whatever it says, it's just a section name, and I want you to put it in the right section...LOL...only because I'm a neat-freak, and anal-retentive about how the code is organized! *snort-giggle* You could actually put it in any section...but you might forget where you put it...So keep it neat!

Happy blogging! Till next time!


  1. Criação de sites said...
    Simple and fast to do.
    Great help for newbies :)
    Van said...
    This will be helpful to the niche sites I'm creating.. Thanks a lot!

    Stina said...
    Ok ..I tried..but Im too stupid to get this working... got the first one working...but since I have several lists... I got lost in the several ones... :o)
    rookie23 said...
    Wow! thanks for this! I'm finding this too on the net!
    Jaison said...
    Thanks for that tip.
    Karen said...
    Thank your for this code, i've tried it and it worked but i got one to not include the sidebar header inside the scrolled bar?.

    thank you again...God Bless!
    Bonnie Calhoun said...
    Use a plain HTML/javascript gadget, and don't put a title in the top line of the configuration box where you put the code.
    Rock said...
    Nice Post, i will surely apply this trick in my blog thank your for sharing this information, keep sharing.
    Nurana said...
    Thank you very much for sharing this info, very helpful indeed.
    james said...
    Thanks for the interesting information. The code also looks simpler to use. I am sure I will use it in my upcoming blog.
    Glenn Kun said...
    hello there. here's one thing..
    if you don't want to add the TITLE BAR to be added in your sroll. just add "ul"

    so here it will looks like:

    #LinkList1 ul{

    just paste it anywhere.

    see my blog..

Post a Comment