How do I...? Make Scroll Boxes

How do I...? Make Scroll Boxes
2008-03-05

On special email demand of a special friend:

How do I...

... make a scroll box?

You might have noticed that sometimes a blog will have a scrollable box in the sidebar. The scroll box is a neat way de-clutter your sidebar. You can display your blogroll, awards, family photos, etc.

Here´s an example from my main blog:

Blog Blings

First I want to show you the code we'll be using and explain how it works.
This is the code you'll place in your sidebar:

<div style="border: 1px solid #000000; overflow: auto; height:150px; width: 150px; color: #000000; background-">YOUR CONTENT HERE</div>

The <div style=" "> and </div> are the opening and closing HTML tags you need to make the scroll box. Everything between the quotes in the <div style> tag tells the browser how to make the box appear on the screen. Let's go through each of these items.

border:1px solid #000000; - This tells the browser to make the box with a one pixel border in black. You can change the color by typing another color code matching to your blog or you can change the line type by typing dashed or dotted.

height:150px - This tells the browser to make the box 150 pixels tall. You can change this variable by typing a different number (e.g., 200). You can play around with this until you like the look.

width:150px - This tells the browser to make the box 150 pixels wide. Again, you can control the width by typing in a different number.

color:#000000; - This is the color of the text within the box. You can use any color code here.

background-color: #FFFFFF; - This is the color of the inside of your scroll box. You can change this color by simply typing another color code instead of #FFFFFF;

Now that you understand how the tag works, simply enter the content you want to appear in your scroll box!

For example, if you are going to show an awards collage linking to your awards site, like I did above, it would look like this:

Now I will walk you through putting the code in your sidebar.

Go to Layout > Template > Page Elements > Add a Page Element.

Scroll down until you see HTML/Java Script and choose Add to Blog.

Cut and paste the following code into the Content field (you can leave the Title field blank):

<div style="border: 1px solid #000000; overflow: auto; height:150px; width: 150px; background-">YOUR CONTENT HERE</div>

Click Save Changes.

Preview your blog to see how it looks. Move the element around as needed (simply drag and drop with your mouse).

Pimp Your Blog | Template Design