How-To Add A Scrollbox To A WordPress Blog

Do you find it hard to commit to reading a blogpost when you see that little scroll thingy in the side telling you that it’s a long, long post? And would you love to have a way to not have that on your blog, but hide long excerpts, or even whole chapters  in a scroll box for readers to choose whether or not they want to read the extra content?

Here’s the solution, a simple piece of coding you put in the HTML window of your blog and the extra text that might scare off readers is hidden in a separate scroll box instead of in the blog post.

Oooookay. 🙂 Let me break that down to you into simple steps. (For the one-brain-celled Ape)

When you normally prepare a blog post you will do that in the visual tab (upper right hand of your editing window) to use the HTML code below you will have to switch to the Text window (click on the word ‘Text’ next to ‘Visual’)

Once you’ve done that you will notice that above the window where you type a row of small buttons have appeared. Disregard them, you can type text in this window just as you would in the Visual window, but you can also use HTML code like the one you need to create a scroll box. Yes, that is the code below. 🙂

As you can see I’ve made the height of my box a mere 200pixels, but you can adjust that number to a higher, or lower number. Just try it out and see what works best for your blog, or site. Of course you can also adjust the border by fiddling with the numbers behind the word border. If I were you I wouldn’t mess with the padding because 8 pixels is just the right padding in my opinion.

And there you have it. A scroll box for you to use on your blog and fill with whatever lengthy content you want to post but don’t want to turn your blog post into a super long one.

<div style=”border:solid 1px #999;height:200px;white-space:pre-wrap;overflow:auto;padding:8px;”>

If there’s anything not clear or you need to know more, leave a comment and I’ll get back to you as soon as possible.