How To Put Blogrolls in a Scrolling Box

Posted by Mrs. M on January 29th, 2008

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.

ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE

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:

ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE

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:

ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE

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.

Use Buzzfuse* to easily rate, review, and share this item

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Review of Ideal Absolutes Blog

Posted by Mrs. M on January 29th, 2008

Wow, um, what can I say about Ideal Absolutes. It’s creativity in hyper-drive. The author comes at ya, blasting bullets of humor, geekery, and current events in staccato machine-gun rapid fire. It’s fun, if a bit risque, in content. This post made me literally laugh out loud— but it’s a little too mature for the kids, in my opinion (but older computer geeks can giggle privately). And I’ve never known anyone to dare mix Hegel and Southern Yard Art before. Eclectic, eccentric, and energetic– that’s the content of this blog.

The blog design is minimal with a twist here and there. I like it; it’s clean and perfunctory. I failed to see the meaning of the tattooed dude in the sidebar… besides that odd photo, the rest of the blog blends nicely with the content. Everything (archives, contact, about, etc) is very handy and easy to navigate. I like that. I must say that the content was so minimal that I kept expecting more. For example, there’s so much information in the sidebars, but one scroll down and there’s nothing else there. And I went to the archives, expecting to see page after page, but all I saw was one (long) column with titles, and then months of the year leading to more archives. I was keen on finding out about “Make Money” in the navigation menu, but was disappointed when all I saw was:

I am both a student and a teacher. Certain aspects of what I’ve been taught can not be openly shared - others can. My intention is to use this area to share what I’ve learned.

Aw! I was hoping for some real secrets! Guess I’ll have to wait…

I loved the tools page, for checking page rank and other indexing stats. That’s a good page to bookmark if you are a blog writer and concerned about your placement in the blog food chain.

There are only three posts on the blog home page. I don’t like to click endlessly to read articles, so my suggestion would be to add more posts. I suspect that other readers, like me on a typical day, would read the three posts and off they’d go somewhere else. Certainly, a small home page loads faster, but too few posts discourages further reading.

MacEwan’s (the author) best posts are when he is discussing current events in the web world. He handles the SEO lingo with ease, without the ten-syllable techno-word-speak that many other bloggers like to throw around. The posts are comfortably understandable, and quite humorous, too. It would be nice to see more links in the sidebar where a reader can peruse similar content. It’s a little disappointing to read three posts, see a few ad links and then it’s DOA after that. I’d like to see more content, more recommendations, where I can read further about the blog topics– because the topics are interesting. There is such a thing as too minimal.

So overall, good design, good posts, interesting content. But the reader leaves the site wondering, “Is that all?” My recommendation is add a bit more content to satisfy the hungry reader.

P.S. I see he’s still got PR. Congrats for that. Hey, macewan, how much did you pay them, huh, how much?

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

Copyright © 2007 Mrs. Mecomber’s Scrapbook. All rights reserved.