How do you make a scroll box for HTML code?

Sometimes a blog will have a button on its sidebar with a box of HTML code underneath, similar to this:

<a href="http://www.bloggingbasics101.com"><img src="http://www.bloggingbasics101.com/BB101button2.jpg" />

You already know how to put the button on your sidebar and how to find and display the HTML. Now let's put that HTML into a handy scroll box.

Below I will walk you through putting the code in your sidebar. First, though, 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: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;">YOUR TEXT 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:3px solid green -- This tells the browser to make the box with a three pixel border in green. You can change the color by typing another color (e.g., red, orange, etc.) or you can change the line type by typing dashed or dotted.
• height:100px -- This tells the browser to make the box 100 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 appearance.
• 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:black -- This is the color of the text within the box. You can type the name of any color here (e.g., red, orange, green, etc.).
• background-color:white -- This is the color of the inside of your box. I encourage you to use black text on a white background as this is the easiest to read. However, you can change this color by simply typing another color name in place of white.

Now that you understand how the tag works, let's look at what HTML you need to put use to make the box reflect your personlized HTML. Instead of YOUR TEXT HERE you should type your HTML code. For example, if you are going to put the HTML for putting the BB101 button on your site it would look like this:

<div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;"> <a href="http://www.bloggingbasics101.com"><img src="http://www.bloggingbasics101.com/BB101button2.jpg" /> </div>

(Note that you don't need the bold, I just added that for ease of seeing where your code goes. If you need more help with what code you'll need, see this post on HTML code for buttons.)

Now, let's put that code in your sidebar!

TypePad

In order to add the code to your sidebar, you will need to make a new Notes Typelist.

1. Go to Typelists > Create New Typelist.
2. Choose Notes for the List Type and give it a name.
3. Click Create New List.
4. In the Note field type copy and paste this code:

   <div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;">YOUR TEXT HERE</div>

5. Click Save.
6. Click the Publish tab and choose which pages you want to put the scroll box on.
7. Click Save Changes.
8. To change where the scroll box appears, use the Content Order tool in your Design toolbox.

Blogger

1. Log in to Blogger.
2. Go to Layout > Template > Page Elements > Add a Page Element.
3. Scroll down until you see HTML/Java Script and choose Add to Blog.
4. Cut and paste the following code into the Content field (you can leave the Title field blank):

   <div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px; color: black; background-color: white;">YOUR TEXT HERE</div>

5. Click Save Changes.
6. Preview your blog to see how it looks. Move the element around as needed (simply drag and drop with your mouse).
7. Click Save.

Comments

[Jennifer]

Thank you for your great help on this! I wanted to make a button for my Random Acts of Kindness that I host every Monday. I was at a loss at making it.

I will attempt this tonight when the kids go to sleep.

I have the graphic I just need to make a button etc.

THanks again!

[Sue @ Praise and Coffee]

Thank you!!! You are such a blessing!

[Deanna (domestic chicky)]

It's like you were reading my mind! Thank you!

[Sarah @ Real Life]

Oh, I have been wondering how to do this for a long time now! Thanks.