Mrs. Mecomber's Scrapbook

I have a few blogrolls, and some are extraneously long. One way to harness long blogrolls is to insert the code into a “scrolling box.” The scrolling box is merely some html code that tells the computer how to show the text.

The code for this is actually looks like this:

<center><div style=”border: 1px dotted blue; overflow: auto; height: 100px; width: 270px; color: red; background-color: white;”>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE</div></center>

You can change anything you want to customize the scroll box. Here, I tinkered with a little of the code:

Which is the code here:

<center><div style=”border: 5px solid black; overflow: auto; height: 150px; width: 350px; color: blue; background-color: gray;”>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE</div></center>

Let me break down the html code in a language you can understand. It’s very easy, and I’m sure you’ll get the hang of it very quickly. Let’s take the tags one by one.

The first tag you see is <center>. This is the opening tag that determines text align. Think of an opening tag as the beginning of a story. You need to have an ending, too. If you look at the last tag, you’ll see </center>. There it is. This is telling the computer to show everything placed between those two tags to be centered within the space it’s placed. If you don’t want your scroll box to be centered, just remove those opening and closing tags. The scroll box will move to your default text align position.

The next tag you see is <div style=”. This is another opening tag. Look for the closing tag that matches it. </div>. The brain of the scroll box goes between these two tags. If you are missing the opening or closing “div” tags, as we call them, then your scroll box will not work. It’s kind of like the “skin” that holds the “guts” inside. Well, that’s how I think of it, lol.

Also, see those quotation marks– the ones that start after div style=” and end with white;” ? You must keep all your information within the realm of those quotation marks, as you do with the div tags. This is the way your computer reads the code. If your scroll box isn’t working properly, always check your code to make sure the quotation marks, semi-colons, and div tags are complete. More often than not, when code doesn’t work, the cause is usually a missing tag feature.

OK, now let’s tackle the fun stuff inside.

In my scroll boxes, I have borders of varying width and color. You can easily change these, or eliminate the border.

border: 1px dotted blue;

can be changed to border: 3px solid black; or to border: 1px dashed yellow;

You can be creative, but remember to keep it basic. Your choices for the border width are measured by pixels (px). Your color choices are simple (no magenta or chartreuse here), and your choices of style are solid, dashed, or dotted. Or, you can enter “none” and have nothing there. For example, change this:

<center><div style=”border: 1px dotted blue; overflow: auto; height: 100px; width: 100px; color: red; background-color: white;”>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE</div></center>

to this:

<center><div style=”border: none; overflow: auto; height: 100px; width: 100px; color: red; background-color: white;”>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE</div></center>

to get this:

Next in the html code you’ll see height: 100px; width: 100px;. These determine, obviously, the box’s height and width. You can change this to be anything you’d like, within the bounds of the code you’re putting your box in (for example, of your sidebar is only 200px wide, your scroll box won’t work properly if you make it 300px wide).

Next you see: color: red; background-color: white;. The first color determines your text color. The “background-color” determines the interior box color. Again, basic colors work best here.

Finally, your TEXT! Where do you put your text? Easy to see, right?

>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE

You can make a list of links using code (manually), or some blogroll networks give you a javascript text to insert. Just put your text or javascript code between the > and the </div>. It should all work!

P.S. Unless your text is really large or long, a scroll for the scroll box may or may not appear. Depends partially on your blog coding and partially on other’s browsers. All the text that you insert should appear, though.